VS Code - Android WebView Debugging

Debug your JavaScript code running in WebViews on any Android device from VS Code.

A VS Code extension to debug your JavaScript code in the Google Chrome browser or other WebView targets on Android devices, that support the Chrome DevTools Protocol.

Requirements

vscode-js-debug

This extension uses the vscode-js-debug extension under the hood.

Using the debugger

When your launch config is set up, you can debug your project. Pick a launch config from the dropdown on the Debug pane in Code. Press the play button or F5 to start.

Configuration

Right now the extension only supports attaching to an already running Google Chrome or WebView instance. This can be configured in the .vscode/launch.json file in the root directory of your project.

In case you want to use the old Debugger for Chrome extension you can set debug.javascript.usePreview to false.

All configuration options of the pwa-chrome: attach configuration of the vscode-js-debug extension are supported.

You can optionally specify a port to use for the debugging connection or let the extension automatically choose an unsued one.

It is possible to specify the device and/or the application to attach to. If multiple possible instances are found the extension will ask you to choose one.

An example launch.json file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "android-webview",
            "request": "attach",
            "name": "Attach to Android WebView",
            "application": "com.android.chrome",
            "webRoot": "${workspaceFolder}",
            "urlFilter": "http://example.com/*"
        }
    ]
}

All contributed configuration fields

• device: The serial of the device to use. It can be found using adb devices.
• application: The package name of the application to connect to. For example com.android.chrome.
• connectTimeout: The time the extension will wait for the webview to be ready in milliseconds.

Extension Settings

This extension contributes the following settings:

• android-webview-debug.adbPath: Specifies the path to the ADB executable.
• android-webview-debug.adbArgs: Specifies extra arguments for the ADB executable. For example ["-H", "1.2.3.4"]

Troubleshooting

Failed to locate ADB executable.

The ADB executable was not found. Usually it should be on the PATH environment variable. You can also specify it manually using the android-webview-debug.adbPath configuration parameter.

No WebViews found

Ensure that the device is connected and that the Android application is a debug build or WebView debugging is enabled. You can always find the available WebViews by visiting chrome://inspect/#devices in Google Chrome.

No devices found

Ensure that USB Debugging is enabled on your Android device and that ADB can find it. You can find a list of connected devices using the command adb devices.