My Javascript does not work on Webview, how can I debug?

Question

I have a page and I’m trying to turn it into Webview App. I generated an apk when I got to the javascript section, but the page inside the app is static, locked. When entering the site through the browser, it works perfectly. It opens a screen showing name and logo and in a few seconds goes to the home screen. What happens, is that in the app, the screen is stopped on this first screen (with name and logo).

How can I debug the page in Webview to check what is happening with the code?

Mainactivity.java:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = findViewById(R.id.webview);
        webView.loadUrl("https://estilofacul.com.br");
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());

        webView.setWebChromeClient(new WebChromeClient());

    }
}

Answer 1

Like Uilherme said in his comment, can be a problem of functionality, fact is you will have to debug to see what is happening.

You can use Chrome Developer Tools (Devtools) to make the remote debugging of Webview.

FIRST STEP

^{Make your Webview to be view by browser.}

You need to add the following code in your app.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
        WebView.setWebContentsDebuggingEnabled(true);
}

^{This code enables Webview debug mode only when the generated application is in debug mode.}

SECOND STEP

^{Accessing the inpect via the Google Chrome browser}

MODE 1:

1. Go to the link chrome://inspect/#devices
2. Check whether the Discovery USB Devices this marked.
3. Among the pages that appear will be your application, just click on Inspect in it and ready you will have access to the console.

MODE 2:
^{This mode seems to have been discontinued in more current versions of the browser}

1. Open up Google Chrome
2. Open the Devtools
   • Windows/Linux: F12 or Ctrl+Shift+I
   • Mac: ⌘+option+I
3. Go to a tab that is not the console, ex. network
4. Squeeze ESC, will open a new section with the console.
5. In this section you will click on more tools ( the three points ).
6. Click on Remote Devices
7. Check whether the Discovery USB Devices this marked.
8. Click on your device
9. Among the pages that appear will be your application, just click on Inspect in it and ready you will have access to the console.

^{*Remembering that your Android device has to be connected via USB and with mode USB Debugging active.}

References:

• Get started with remote debugging of Android devices
• Remote debugging of Webviews
• Chrome Devtools keyboard shortcuts