| # Net debugging in WebView |
| |
| This guide explains how to capture network logs [net logs](https://www.chromium.org/for-testers/providing-network-details/) |
| for debugging WebView using DevTools. Net logs provide detailed information about |
| network requests and responses made by your WebView, helping you diagnose |
| network-related issues. |
| |
| ## Net Logs In WebView DevTools |
| |
| *** note |
| **Important**: Enabling net logging through DevTools requires enabling |
| [setWebContentsDebuggingEnabled](https://developer.chrome.com/docs/devtools/remote-debugging/webviews) |
| in your app. This setting is automatically enabled by default if you use a |
| either a `userdebug` or `eng` Android image. it is also enabled by default if |
| you use a debug app build. See [device setup](device-setup.md) and [commandline flags](commandline-flags.md) |
| for more information. |
| |
| Net Logs in the DevTools are available from M128 |
| *** |
| |
| ### Steps: |
| |
| 1. Open [WebView DevTools](https://chromium.googlesource.com/chromium/src/+/a326b853919f482d7e9c67fe7e492ae060cb4851/android_webview/docs/developer-ui.md) |
| and navigate to the "Flags" section. |
| 1. Locate the "net-log" flag and enable it within the DevTools flags menu. |
| 1. Launch your app and perform actions that trigger the network behavior you |
| want to debug. Once you've reproduced the issue, close your app. |
| 1. Locate and share the net log file generated using [Android's Quick Share](https://support.google.com/android/answer/9286773?hl=en). |
| |
| *** note |
| Please note, there are file limitations: |
| |
| **File Size:** Net log files are limited to 100 MB each. |
| |
| **File Age:** Files older than 30 days will be automatically deleted. |
| |
| **Storage Capacity:** If the total net log storage exceeds 1 GB, older files |
| will be deleted until the total storage is under the threshold. |
| *** |
| |
| ## Manually setting the flag (WebView developers only) |
| |
| WebView supports the `kLogNetLog` flag to log debugging network info to a JSON |
| file on disk. |
| |
| *** note |
| **Important**: if you are unable to use net logs in WebView DevTools, all |
| alternate approaches require applying commandline flags. **It's not typically |
| possible for external reporters to apply commandline flags, so please do not |
| ask them to follow this guide.** |
| |
| This guide is only for chromium developers who are set up for WebView |
| development. Specifically, this guide requires the reader to use a `userdebug` |
| or `eng` Android image, see [device setup](device-setup.md) and [commandline |
| flags](commandline-flags.md) for more information. |
| *** |
| |
| ### Python script |
| |
| If you have a chromium checkout, the preferred way to set the netlog flag is to |
| use the `record_netlog.py` script like so: |
| |
| ```shell |
| # Optional: set any flags of your choosing before running the script. Don't set |
| # --log-net-log though; this is set by record_netlog.py. |
| $ build/android/adb_system_webview_command_line --enable-features=MyFeature,MyOtherFeature |
| Wrote command line file. Current flags (in webview-command-line): |
| 005d1ac915b0c7d6 (bullhead-userdebug 6.0 MDB08M 2353240 dev-keys): --enable-features=MyFeature,MyOtherFeature |
| |
| # Replace "<app package name>" with your app's package name (ex. the |
| # WebView Shell is "org.chromium.webview_shell"). This script will set an |
| # appropriate value for --log-net-log and handle setup/cleanup. |
| $ android_webview/tools/record_netlog.py --package="<app package name>" |
| Netlog will start recording as soon as app starts up. Press ctrl-C to stop recording. |
| ^C |
| Pulling netlog to "netlog.json" |
| ``` |
| |
| Then import the JSON file (`netlog.json` in the working directory) into [the |
| NetLog viewer][1]. |
| |
| ### Manual steps |
| |
| 1. Figure out the app's data directory |
| ```sh |
| # appPackageName is the package name of whatever app you're interested (ex. |
| # WebView shell is "org.chromium.webview_shell"). |
| appDataDir="$(adb shell dumpsys package ${appPackageName} | grep 'dataDir=' | sed 's/^ *dataDir=//')" && \ |
| ``` |
| 1. Pick a name for the JSON file. This must be under the WebView folder in the |
| app's data directory (ex. `jsonFile="${appDataDir}/app_webview/foo.json"`). |
| **Note:** it's important this is inside the data directory, otherwise |
| multiple WebView apps might try (and succeed) to write to the file |
| simultaneously. |
| 1. Kill the app, if running |
| 1. [Set the netlog flag](commandline-flags.md): |
| ```sh |
| FLAG_FILE=/data/local/tmp/webview-command-line |
| adb shell "echo '_ --log-net-log=${jsonFile}' > ${FLAG_FILE}" |
| ``` |
| 1. Restart the app. Reproduce whatever is of interest, and then kill the app |
| when finished |
| 1. Get the netlog off the device: |
| ```sh |
| adb pull "${appDataDir}/app_webview/${jsonFile}" |
| adb shell "rm '${appDataDir}/app_webview/${jsonFile}'" |
| ``` |
| 1. Optional: view the data in [the NetLog viewer][1] |
| 1. Optional: [clear the commandline flags](commandline-flags.md): |
| ```sh |
| FLAG_FILE=/data/local/tmp/webview-command-line |
| adb shell "rm ${FLAG_FILE}" |
| ``` |
| |
| [1]: https://netlog-viewer.appspot.com/#import |