Nate Fischer | b8762b3 | 2019-02-12 00:14:41 | [diff] [blame] | 1 | # Net debugging in WebView |
| 2 | |
Thomas | 44aabf0 | 2024-07-08 08:05:55 | [diff] [blame] | 3 | This guide explains how to capture network logs [net logs](https://www.chromium.org/for-testers/providing-network-details/) |
| 4 | for debugging WebView using DevTools. Net logs provide detailed information about |
| 5 | network requests and responses made by your WebView, helping you diagnose |
| 6 | network-related issues. |
| 7 | |
| 8 | ## Net Logs In WebView DevTools |
| 9 | |
| 10 | *** note |
| 11 | **Important**: Enabling net logging through DevTools requires enabling |
| 12 | [setWebContentsDebuggingEnabled](https://developer.chrome.com/docs/devtools/remote-debugging/webviews) |
| 13 | in your app. This setting is automatically enabled by default if you use a |
| 14 | either a `userdebug` or `eng` Android image. it is also enabled by default if |
| 15 | you use a debug app build. See [device setup](device-setup.md) and [commandline flags](commandline-flags.md) |
| 16 | for more information. |
| 17 | |
| 18 | Net Logs in the DevTools are available from M128 |
| 19 | *** |
| 20 | |
| 21 | ### Steps: |
| 22 | |
| 23 | 1. Open [WebView DevTools](https://chromium.googlesource.com/chromium/src/+/a326b853919f482d7e9c67fe7e492ae060cb4851/android_webview/docs/developer-ui.md) |
| 24 | and navigate to the "Flags" section. |
| 25 | 1. Locate the "net-log" flag and enable it within the DevTools flags menu. |
| 26 | 1. Launch your app and perform actions that trigger the network behavior you |
| 27 | want to debug. Once you've reproduced the issue, close your app. |
| 28 | 1. Locate and share the net log file generated using [Android's Quick Share](https://support.google.com/android/answer/9286773?hl=en). |
| 29 | |
| 30 | *** note |
| 31 | Please note, there are file limitations: |
| 32 | |
| 33 | **File Size:** Net log files are limited to 100 MB each. |
| 34 | |
| 35 | **File Age:** Files older than 30 days will be automatically deleted. |
| 36 | |
| 37 | **Storage Capacity:** If the total net log storage exceeds 1 GB, older files |
| 38 | will be deleted until the total storage is under the threshold. |
| 39 | *** |
| 40 | |
| 41 | ## Manually setting the flag (WebView developers only) |
Nate Fischer | b8762b3 | 2019-02-12 00:14:41 | [diff] [blame] | 42 | |
| 43 | WebView supports the `kLogNetLog` flag to log debugging network info to a JSON |
| 44 | file on disk. |
| 45 | |
Nate Fischer | b8762b3 | 2019-02-12 00:14:41 | [diff] [blame] | 46 | *** note |
Thomas | 44aabf0 | 2024-07-08 08:05:55 | [diff] [blame] | 47 | **Important**: if you are unable to use net logs in WebView DevTools, all |
| 48 | alternate approaches require applying commandline flags. **It's not typically |
| 49 | possible for external reporters to apply commandline flags, so please do not |
| 50 | ask them to follow this guide.** |
Nate Fischer | 0f46ff8 | 2020-01-30 00:37:38 | [diff] [blame] | 51 | |
| 52 | This guide is only for chromium developers who are set up for WebView |
| 53 | development. Specifically, this guide requires the reader to use a `userdebug` |
| 54 | or `eng` Android image, see [device setup](device-setup.md) and [commandline |
| 55 | flags](commandline-flags.md) for more information. |
Nate Fischer | b8762b3 | 2019-02-12 00:14:41 | [diff] [blame] | 56 | *** |
| 57 | |
Nate Fischer | f58373a | 2019-09-24 02:33:58 | [diff] [blame] | 58 | ### Python script |
| 59 | |
| 60 | If you have a chromium checkout, the preferred way to set the netlog flag is to |
| 61 | use the `record_netlog.py` script like so: |
| 62 | |
Nate Fischer | 7d9828c | 2019-04-17 19:23:27 | [diff] [blame] | 63 | ```shell |
Nate Fischer | f58373a | 2019-09-24 02:33:58 | [diff] [blame] | 64 | # Optional: set any flags of your choosing before running the script. Don't set |
| 65 | # --log-net-log though; this is set by record_netlog.py. |
Nate Fischer | 1531d358 | 2019-08-06 21:31:17 | [diff] [blame] | 66 | $ build/android/adb_system_webview_command_line --enable-features=MyFeature,MyOtherFeature |
Nate Fischer | 7d9828c | 2019-04-17 19:23:27 | [diff] [blame] | 67 | Wrote command line file. Current flags (in webview-command-line): |
Nate Fischer | 1531d358 | 2019-08-06 21:31:17 | [diff] [blame] | 68 | 005d1ac915b0c7d6 (bullhead-userdebug 6.0 MDB08M 2353240 dev-keys): --enable-features=MyFeature,MyOtherFeature |
Nate Fischer | 7d9828c | 2019-04-17 19:23:27 | [diff] [blame] | 69 | |
| 70 | # Replace "<app package name>" with your app's package name (ex. the |
Nate Fischer | f58373a | 2019-09-24 02:33:58 | [diff] [blame] | 71 | # WebView Shell is "org.chromium.webview_shell"). This script will set an |
| 72 | # appropriate value for --log-net-log and handle setup/cleanup. |
Nate Fischer | 7d9828c | 2019-04-17 19:23:27 | [diff] [blame] | 73 | $ android_webview/tools/record_netlog.py --package="<app package name>" |
Nate Fischer | 7d9828c | 2019-04-17 19:23:27 | [diff] [blame] | 74 | Netlog will start recording as soon as app starts up. Press ctrl-C to stop recording. |
| 75 | ^C |
| 76 | Pulling netlog to "netlog.json" |
| 77 | ``` |
| 78 | |
Nate Fischer | f58373a | 2019-09-24 02:33:58 | [diff] [blame] | 79 | Then import the JSON file (`netlog.json` in the working directory) into [the |
| 80 | NetLog viewer][1]. |
Nate Fischer | 7d9828c | 2019-04-17 19:23:27 | [diff] [blame] | 81 | |
Nate Fischer | 7d9828c | 2019-04-17 19:23:27 | [diff] [blame] | 82 | ### Manual steps |
| 83 | |
Nate Fischer | a5a8962 | 2019-04-17 01:05:08 | [diff] [blame] | 84 | 1. Figure out the app's data directory |
| 85 | ```sh |
| 86 | # appPackageName is the package name of whatever app you're interested (ex. |
| 87 | # WebView shell is "org.chromium.webview_shell"). |
| 88 | appDataDir="$(adb shell dumpsys package ${appPackageName} | grep 'dataDir=' | sed 's/^ *dataDir=//')" && \ |
| 89 | ``` |
| 90 | 1. Pick a name for the JSON file. This must be under the WebView folder in the |
| 91 | app's data directory (ex. `jsonFile="${appDataDir}/app_webview/foo.json"`). |
| 92 | **Note:** it's important this is inside the data directory, otherwise |
| 93 | multiple WebView apps might try (and succeed) to write to the file |
| 94 | simultaneously. |
Nate Fischer | b8762b3 | 2019-02-12 00:14:41 | [diff] [blame] | 95 | 1. Kill the app, if running |
Nate Fischer | f58373a | 2019-09-24 02:33:58 | [diff] [blame] | 96 | 1. [Set the netlog flag](commandline-flags.md): |
Nate Fischer | b8762b3 | 2019-02-12 00:14:41 | [diff] [blame] | 97 | ```sh |
Nate Fischer | f58373a | 2019-09-24 02:33:58 | [diff] [blame] | 98 | FLAG_FILE=/data/local/tmp/webview-command-line |
| 99 | adb shell "echo '_ --log-net-log=${jsonFile}' > ${FLAG_FILE}" |
Nate Fischer | b8762b3 | 2019-02-12 00:14:41 | [diff] [blame] | 100 | ``` |
| 101 | 1. Restart the app. Reproduce whatever is of interest, and then kill the app |
| 102 | when finished |
| 103 | 1. Get the netlog off the device: |
| 104 | ```sh |
Nate Fischer | b8762b3 | 2019-02-12 00:14:41 | [diff] [blame] | 105 | adb pull "${appDataDir}/app_webview/${jsonFile}" |
Nate Fischer | f58373a | 2019-09-24 02:33:58 | [diff] [blame] | 106 | adb shell "rm '${appDataDir}/app_webview/${jsonFile}'" |
Nate Fischer | b8762b3 | 2019-02-12 00:14:41 | [diff] [blame] | 107 | ``` |
Nate Fischer | f58373a | 2019-09-24 02:33:58 | [diff] [blame] | 108 | 1. Optional: view the data in [the NetLog viewer][1] |
| 109 | 1. Optional: [clear the commandline flags](commandline-flags.md): |
| 110 | ```sh |
| 111 | FLAG_FILE=/data/local/tmp/webview-command-line |
| 112 | adb shell "rm ${FLAG_FILE}" |
| 113 | ``` |
| 114 | |
| 115 | [1]: https://netlog-viewer.appspot.com/#import |