https://github.com/mpotthoff/vscode-android-webview-debug
Debug your JavaScript code running in WebViews on any Android device from VS Code.
https://github.com/mpotthoff/vscode-android-webview-debug
android chrome chrome-debugging-protocol debugger editor vscode webview
Last synced: 25 days ago
JSON representation
Debug your JavaScript code running in WebViews on any Android device from VS Code.
- Host: GitHub
- URL: https://github.com/mpotthoff/vscode-android-webview-debug
- Owner: mpotthoff
- License: lgpl-3.0
- Created: 2018-08-28T18:15:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-28T21:01:50.000Z (almost 2 years ago)
- Last Synced: 2025-10-20T21:27:53.898Z (5 months ago)
- Topics: android, chrome, chrome-debugging-protocol, debugger, editor, vscode, webview
- Language: TypeScript
- Homepage:
- Size: 674 KB
- Stars: 26
- Watchers: 1
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://chromedevtools.github.io/debugger-protocol-viewer/).
## Requirements
### vscode-js-debug
This extension uses the [vscode-js-debug](https://github.com/microsoft/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](https://github.com/Microsoft/vscode-chrome-debug) extension you can set `debug.javascript.usePreview` to `false`.
> All configuration options of the `pwa-chrome: attach` configuration of the [vscode-js-debug](https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md#pwa-chrome-attach) 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:
```json
{
"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`.