diff --git a/docs/remote-debugging-legacy.html b/docs/remote-debugging-legacy.html index 7a291b6..099fc34 100644 --- a/docs/remote-debugging-legacy.html +++ b/docs/remote-debugging-legacy.html @@ -59,7 +59,7 @@ Return to the previous screen to find Developer options.
- USB debugging settings in Developer options + USB debugging settings in Developer options
@@ -84,7 +84,7 @@ to enable port forwarding:
resolve.

- Port forwarding using the adb tool + Port forwarding using the adb tool
  • On your development machine, open Chrome and navigate to @@ -93,7 +93,7 @@ resolve.

    tabs on your mobile Chrome. Choose the page you would like to debug.
    • - Inspectable pages + Inspectable pages
  • You can now start debugging and profiling mobile content in the DevTools on diff --git a/docs/remote-debugging.html b/docs/remote-debugging.html index 4606e8e..0620fc1 100644 --- a/docs/remote-debugging.html +++ b/docs/remote-debugging.html @@ -1,326 +1,373 @@ {{+bindTo:partials.standard_devtools_article}} + + +

    Remote Debugging on Android with Chrome

    -

    The experience of your web content on mobile devices can operate very differently than what users experience on the desktop. Get a bug-free page that behaves perfectly across all devices by using Google Chrome DevTools on your development machine to inspect, debug, and analyze browser tabs and WebViews on your Android device.

    +

    The way your web content behaves on mobile can be dramatically different from the desktop experience. Remote debugging with the Chrome DevTools gives you the best of both worlds. Debug live content on your Android device from your development machine.

    Debugging Chrome for Android using the Chrome Developer Tools -
    -

    Set up remote debugging

    - -

    To begin remote debugging, you will need:

    - -
    -

    Confirm that Discover USB Devices is checked:

    -

    - Discover USB Devices in chrome://inspect -
    +
    +

    Discovering devices in Chrome

    +

    After setting up remote debugging on Android, discover your device in Chrome.

    -

    3. Connect your device via USB

    +

    On your desktop Chrome browser, navigate to chrome://inspect. Confirm that Discover USB devices is checked:

    -

    Connect your mobile device to the development machine using a USB cable.

    +
    + Discover USB Devices in chrome://inspect +
    Tip: You can also get to chrome://inspect by selecting Chrome menu > More tools > Inspect Devices.
    +
    -

    If you are developing on Windows, install the appropriate USB driver for your device. See OEM USB Drivers on the Android Developers site.

    +

    On your device, an alert prompts you to allow USB debugging from your computer. Tap OK.

    +
    + USB debugging permission alert +
    Tip: To skip this alert in the future, check Always allow from this computer.
    +
    +

    The message USB debugging connected displays in the device's notification drawer.

    -

    After connecting, you may see an alert on the device requesting permission for USB debugging from your computer:

    +

    Note: During remote debugging, Chrome prevents your device’s screen from going to sleep. This feature is useful for debugging, but is also less secure. So be sure to keep an eye on your device!

    -
    - USB debugging permission alert -
    +

    On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.

    +
    + The chrome://inspect page. +
    Viewing connected devices from the chrome://inspect page.
    +
    + +

    If you have problems finding your device on the chrome://inspect page, see the Troubleshooting section for solutions.

    -

    To avoid seeing this alert each time you debug, check Always allow from this computer. Tap OK.

    +
    -

    4. Debug a remote web view

    +
    +

    Debugging remote browser tabs

    -

    Once you have set up your device for debugging over USB, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews:

    +

    From the chrome://inspect page, you can launch the DevTools and debug your remote browser tabs.

    -
    - -
    Check Discover USB devices and plug in your mobile device to see your phone or tablet show up in chrome://inspect.
    -
    +

    To start debugging, click inspect below the browser tab that you want to debug.

    +
    + Click inspect to start remote debugging +
    -

    Find the tab or WebView you're interested in and click the inspect link to open DevTools on it:

    +

    A new instance of Chrome DevTools launches on your computer. From this instance, you can interact with the selected browser tab on your device in real time.

    -
    - Click inspect to start remote debugging -
    +
    + Debugging Chrome for Android using the Chrome Developer Tools +
    Debug a web page on your Android phone from your laptop using Chrome DevTools.
    +
    -

    Open new browser tabs on the remote device by typing the URL in the text input field, then click Open.

    +

    For example, you can use the DevTools to inspect web page elements on your device:

    + + +

    Note: The version of Chrome on your device determines the version of DevTools used during remote debugging. For this reason, the remote debugging DevTools might differ from the version that you normally use.

    -
    - Click inspect to start remote debugging -
    +

    Debugging tips

    +

    Here are a few more tips to help get you started with remote debugging:

    + -

    Troubleshooting

    +
    - +

    On Android 4.4 (KitKat) or later, you can use the DevTools to debug WebView content in native Android applications.

    + +

    Configure WebViews for debugging

    +

    WebView debugging must be enabled from within your application. To enable WebView debugging, call the static method setWebContentsDebuggingEnabled on the WebView class.

    + + 
    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+      WebView.setWebContentsDebuggingEnabled(true);
+  }
    + +

    This setting applies to all of the application's WebViews.

    + +

    Tip: WebView debugging is not affected by the state of the debuggable flag in the application's manifest. If you want to enable WebView debugging only when debuggable is true, test the flag at runtime.

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

    Open a WebView in DevTools

    + +

    The chrome://inspect page displays a list of debug-enabled WebViews on your device.

    + +

    To start debugging, click inspect below the WebView that you want to debug. Use the DevTools as you would for a remote browser tab.

    + +
    + Inspecting elements in a WebView +
    Debugging a remote Android WebView with the Chrome DevTools.
    +
    + +

    The gray graphics listed with the WebView represent its size and position relative to the device's screen. If your WebViews have titles set, the titles are listed as well.

    + + + +
    +

    Screencasting

    + +

    Shifting your attention between screens isn’t always convenient. Screencast displays your device's screen right alongside the DevTools on your development machine. You can interact with the content on your device from the screencast too.

    + +

    As of KitKat 4.4.3, screencast is available for both browser tabs and Android WebViews.

    + +

    Start a screencast session

    +

    To start screencasting, click the Screencast screencast icon icon in the upper right corner of your remote debugging DevTools window.

    + +
    + screencast location in DevTools +
    The Screencast icon.
    +
    + +

    The Screencast panel opens on the left and displays a live view of your device's screen.

    + +
    + Open a new remote tab. +
    Live interactive screencast from your Android to your laptop.
    +
    + +

    Screencast only displays page content. Transparent portions of the screencast are covered by things like the omnibox and device keyboard.

    + +

    Note: Because screencast continuously captures frames, it introduces some performance overhead. If your tests are sensitive to frame rate, disable screencast.

    + +

    Interact with your device using the screencast

    + +

    When you interact with the screencast, clicks are translated into taps, firing proper touch events on the device. Keystrokes from your computer are sent to the device, so you can avoid typing on the device with your thumbs.

    + +

    The other DevTools work with the screencast too. For example, to inspect an element, click the Inspect Element inspect element icon icon and then click inside the screencast.

    + +
    + +
    + +

    Tips: To simulate a pinch gesture, hold Shift while dragging. To scroll, use your trackpad or mouse wheel or fling with your pointer.

    -

    Debug browser tabs

    +

    Port forwarding

    -

    When inspecting a remote browser tab in Chrome for Android, the element you are mousing over in the DevTools window will highlight the element on your device in real time. In fact, turn on inspect mode by clicking the Inspect icon icon, and then tap on your device screen.

    +

    Your phone can't always reach the content on your development server. They might be on different networks. Moreover, you might be developing on a restricted corporate network.

    -
    - Debugging Chrome for Android using the Chrome Developer Tools -
    Debug a web page loaded on your Android phone from your laptop using Chrome DevTools.
    -
    +

    Port forwarding on Chrome for Android makes it easy to test your development site on mobile.

    -

    Similarly, editing scripts or executing commands from the DevTools console affects the page being inspected on your device. You can also also use all of the other panels, such as Timeline and Profiles.

    +

    It works by creating a listening TCP port on your mobile device that maps to a particular TCP port on your development machine. Traffic between these ports travels through USB. So, the connection doesn't depend on your network configurations.

    -

    Debugging tips

    - +

    To enable port forwarding:

    +
      +
    1. Open chrome://inspect on your development machine.
      2. +
    2. Click Port Forwarding. The port forwarding settings display. +
      + port forwarding button location +
      +
      3. +
    3. In the Device port field, enter the port number that you want your Android to listen on. +
      (The default port is 8080.) +
    4. In the Host field, enter the IP address (or hostname) and port number where your web application is running. +
      This address can be any local location accessible from your development machine. Currently, it is limited to ports over 1024 and under 65535 (inclusive).
      5. +
    5. Check Enable port forwarding. +
    6. Click Done. +
      + port forwarding dialog +
      The port forwarding settings.
      +
      +
      7. +
    +

    The port status indicators on chrome://inspect are green when port forwarding is successful.

    +
    + viewing local content on mobile +
    Viewing the content of your local web server on Android using port forwarding.
    +
    -

    Notes

    +

    Now you can open a new Chrome for Android tab and view the content of your local server on your device.

    - +
    + +
    +

    Virtual host mapping

    + +

    Port forwarding works great when you're developing on localhost. But there are cases when you might be using a customized local domain.

    +

    For example, you're using a third party JavaScript SDK that only works on whitelisted domains. So you added an entry, such as 127.0.0.1 production.com, to your hosts file. Or maybe you configured a customized domain using virtual hosts on your web server (MAMP).

    +

    If you want your phone to reach content on your customized domain, you can use port forwarding in combination with a proxy server. The proxy maps requests from your device to the correct location on the host machine.

    + + +

    Set up port forwarding to a proxy

    +

    Virtual host mapping requires you to run a proxy server on the host machine. All requests from your Android device will be forwarded to the proxy.

    +

    To set up port forwarding to a proxy:

    +
      +
    1. On the host machine, install proxy software such as Charles Proxy (free trial available) or Squid.
      2. +
    2. + Run the proxy server and note the port that it's using. +

      Note: The proxy server and your development server must be running on different ports.

      +
      3. +
    3. In a Chrome browser, navigate to chrome://inspect.
      4. +
    4. + Click Port Forwarding. The port forwarding settings display. +
      + port forwarding button location +
      +
      5. +
    5. + In the Device port field, enter the port number that you want your Android to listen on. +
      Use a port that Android allows, such as 9000. +
    6. In the Host field, enter localhost:xxxx, where xxxx is the port where your proxy is running.
      7. +
    7. Check Enable port forwarding.
      8. +
    8. + Click Done. +
      + port forwarding dialog +
      Port forwarding to a proxy.
      +
      +
      9. +
    + +

    The proxy on the host machine is set up to make requests on behalf of your Android device.

    + +

    Configure proxy settings on your device

    + +

    Your Android device needs to communicate with the proxy on the host machine.

    +

    To configure the proxy settings on your device:

    +
      +
    1. Select Settings > Wi-Fi.
      2. +
    2. + Long-press the network that you are currently connected to. +

      Note: Proxy settings apply per network.

      +
      3. +
    3. Tap Modify network.
      4. +
    4. Select Advanced options. +
      The proxy settings display. +
      + phone proxy settings +
      Proxy settings on the device.
      +
      +
      5. +
    5. Tap the Proxy menu and select Manual.
      6. +
    6. In the Proxy hostname field, enter localhost.
      7. +
    7. In the Proxy port field, enter 9000.
      8. +
    8. Tap Save.
      9. +
    + +

    With these settings, your device forwards its requests to the proxy on the host machine. The proxy makes requests on behalf of your device, so requests to your customized local domain are properly resolved.

    + +

    Now you can load local domains on Chrome for Android just as you would on the host machine.

    +
    + virtual host mapping +
    Using virtual host mapping to access a customized local domain from an Android device.
    +
    + +

    Tip: To resume normal browsing, remember to revert the proxy settings on your device after you disconnect from the host.

    -

    Debug WebViews

    - -

    Starting Android 4.4 (KitKat), you can use the DevTools to debug the contents of -Android WebViews inside native Android applications. -

    - -

    The procedure for debugging WebViews is very similar to what was outlined in the Set up your device for remote debugging section except the Enable USB web debugging setting in Chrome doesn't affect WebViews.

    - -

    Configure WebViews for debugging

    - -

    To debug the contents of your WebView, you need to enable it programmatically from within your application by calling - -setWebContentsDebuggingEnabled, a static method on the WebView class.

    - -
    -if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
-    WebView.setWebContentsDebuggingEnabled(true);
-}
-
    - -

    This setting applies to all of the application's WebViews. Note that web debugging is not affected -by the state of the debuggable flag in the application's manifest. If you want to enable web debugging only -when debuggable is true, test the flag at runtime.

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

    Open a WebView in DevTools

    - -

    Go to chrome://inspect in Chrome to get a list of debuggable WebViews, along with a graphic representing the WebView's size and position relative to the device's screen. If your WebViews have titles set, those will show as well. Click inspect on the WebView you wish to debug and use the DevTools as you would for a remote browser tab.

    - -
    - -
    - - -
    - - -
    -

    Screencasting

    - -

    Screencasting lets you bring the experience of your device onto your machine. This allows you to keep your attention on one screen instead of switching back and forth between the device and the DevTools. As of KitKat 4.4.3, screencasting in now also available for Android WebViews.

    - -

    While debugging a remote device, you will see a screencast icon in the DevTools toolbar:

    - -
    - -
    - -

    Clicking on the screencast icon Screencast opens up a panel on your computer displaying your device's screen:

    - -
    - Screencasting device -
    - -

    Watch a video of screencasting in action:

    - -
    - - - -
    - -

    Interacting with the screencast

    - -

    You can interact with the screencast of your device in a number of ways.

    - - - -

    Note: The screencast feature does have a performance overhead, due to continuously capturing frames. Disable screencast if you're testing framerate-sensitive situations.

    - -
    - - -
    -

    Port forwarding

    - -

    Commonly you have a web server running on your local development machine, and you want to -connect to that site from your device. If the mobile device and the development machine are -on the same network, this is straightforward. But this may be difficult in some cases, like -on a restricted corporate network.

    - -

    Chrome for Android supports port fowarding making this workflow very simple to do. -It works by creating a listening TCP port on your mobile device that maps to a particular TCP -port on your development machine. The traffic through the forwarded port travels over USB, so -it doesn't depend on the mobile device's network configuration.

    - -

    Enable port forwarding

    - -

    This procedure assumes that you already have remote debugging configured and working. On your development machine within Chrome:

    - -
    - -
    - -
      -
    1. Open chrome://inspect.
      2. -
    2. Click Port Forwarding button at the top.
      3. -
    3. In the Device port field, enter the port number the Android should device listen on (defaults to 8080). -
    4. In the Host field, add the IP (or hostname) and port number where your web application is running. This location can be any local location accessible from your development machine. Currently, it is limited to ports over 1024 and under 65535 (inclusive).
      5. -
    5. Make sure to check Enable port forwarding before hitting Done. -
    - -

    On chrome://inspect you should now see a green circle indicating your port forwarding is succssful. -Now, enter in your local URL into the Open tab field and hit Go to open it on your device's browser.

    - -

    You should see the content being served by your development machine:

    - -
    - -
    - -

    Virtual host mapping

    - -

    Follow the instructions for virtual host mapping to preview customised local domains (something other than localhost) on your device. Consider the following use cases for local development to understand where this is useful:

    - - - -

    To configure virtual host mapping with Chrome for Android, the device will need to communicate with a proxy installed on the host machine.

    - -On the Android device: -
      -
    1. Open Wi-Fi settings.
      2. -
    2. Long-press the current network. (The proxy setting is per-network.)
      3. -
    3. Select Modify network.
      4. -
    4. Tap the Show advanced options checkbox below IP Address.
      5. -
    5. Proxy settings will appear. Select Manual.
      6. -
    6. Set Proxy hostname to localhost.
      7. -
    7. Set Proxy port to a port that Android will let you use, for example 9000.
      8. -
    8. Tap Save.
      9. -
    - -
    - Android Wi-Fi proxy settings -
    - -On the host machine: -
      -
    1. Install proxy software such as Charles Proxy (free trial available) or Squid.
      2. -
    2. Make note of the port the proxy is using. In Charles, you can access this via Proxy > Proxy Settings and making note of the port number in the HTTP Proxy > Port field.
      3. -
    3. Navigate to chrome://inspect/#devices on Google Chrome.
      4. -
    4. Select Port forwarding.
      5. -
    5. Enter 9000 in the Port field.
      6. -
    6. Enter localhost:1234 where 1234 is the port retrieved in step 2.
      7. -
    7. Ensure the Enable port forwarding checkbox is checked.
      8. -
    - -

    The steps above are required once per development session. Once port forwarding has been configured to forward requests to the host machine's proxy (from the device), you can load local domains on Chrome for Android just as you would on the host machine.

    - -
    - Virtual host mapping on Chrome for Android -
    - +

    Troubleshooting

    +

    I can't see my device on the chrome://inspect page.

    + +

    If you still can't see your device, unplug it. On your device, select Settings > Developer options. Tap Revoke USB debugging authorizations. Then, retry the device setup and discovery processes.

    +

    I can't see my browser tabs on the chrome://inspect page.

    + +

    I can't see my WebViews on the chrome://inspect page.

    + +

    I can't access my web server from my Android device.

    + +

    Lastly, remote debugging still isn't working, you can revert to the legacy workflow using the adb binary from the Android SDK.

    -

    Additional information

    +

    Additional information

    -

    Remote debugging and ADB

    +

    Remote debugging and ADB

    -

    DevTools supports direct USB debugging of connected devices. You no longer need to configure ADB or the ADB plugin to see all instances of Chrome and the Chrome-powered WebView on devices connected to your system. This functionality works on all operating systems: Windows, Mac, Linux and Chrome OS.

    +

    You no longer need to configure ADB or the ADB plugin to debug remote browser tabs and WebViews. Remote debugging for Android is now part of the standard Chrome DevTools. It works on all operating systems: Windows, Mac, Linux, and Chrome OS.

    - +

    If you do encounter problems with remote debugging, you can try the legacy workflow using the adb binary from the Android SDK.

    -

    If you use the adb binary for other reasons, please note the direct USB connection between Chrome and the device may interrupt an adb connection that you may be trying to establish. To fix, just uncheck the Discover USB Devices checkbox, unplug the device, and plug it back in, before establishing your connection via adb.

    +

    Note: The direct USB connection between Chrome and the device might interrupt your adb connection. Before establishing your adb connection, uncheck Discover USB devices on chrome://inspect. Then, disconnect and reconnect the device.

    +

    Remote debugging for DevTools extension developers

    - -

    Remote debugging for DevTools extension developers

    - -

    For information on the interaction protocol we use for our remote debugging, please see the Debugger Protocol documentation and chrome.debugger.

    +

    For information about the remote debugging interaction protocol, refer to the Debugger Protocol documentation and chrome.debugger.

    diff --git a/docs/remote-debugging/7tap-optimized.mp4 b/docs/remote-debugging/7tap-optimized.mp4 deleted file mode 100644 index 6b5b8f7..0000000 Binary files a/docs/remote-debugging/7tap-optimized.mp4 and /dev/null differ diff --git a/docs/remote-debugging/about-inspect-stuff.png b/docs/remote-debugging/about-inspect-stuff.png deleted file mode 100644 index 21d1eb5..0000000 Binary files a/docs/remote-debugging/about-inspect-stuff.png and /dev/null differ diff --git a/docs/remote-debugging/about-inspect-webview.gif b/docs/remote-debugging/about-inspect-webview.gif deleted file mode 100644 index 4bf5c70..0000000 Binary files a/docs/remote-debugging/about-inspect-webview.gif and /dev/null differ diff --git a/docs/remote-debugging/about-phone-build-num.png b/docs/remote-debugging/about-phone-build-num.png new file mode 100755 index 0000000..284d24c Binary files /dev/null and b/docs/remote-debugging/about-phone-build-num.png differ diff --git a/docs/remote-debugging/adb-plugin-menu-active.png b/docs/remote-debugging/adb-plugin-menu-active.png deleted file mode 100644 index 45eb22b..0000000 Binary files a/docs/remote-debugging/adb-plugin-menu-active.png and /dev/null differ diff --git a/docs/remote-debugging/adb-plugin-menu.png b/docs/remote-debugging/adb-plugin-menu.png deleted file mode 100644 index fc70c5c..0000000 Binary files a/docs/remote-debugging/adb-plugin-menu.png and /dev/null differ diff --git a/docs/remote-debugging/allow-usb-debugging.png b/docs/remote-debugging/allow-usb-debugging.png new file mode 100755 index 0000000..b02958a Binary files /dev/null and b/docs/remote-debugging/allow-usb-debugging.png differ diff --git a/docs/remote-debugging/android-proxy-settings.jpg b/docs/remote-debugging/android-proxy-settings.jpg deleted file mode 100644 index 36594a7..0000000 Binary files a/docs/remote-debugging/android-proxy-settings.jpg and /dev/null differ diff --git a/docs/remote-debugging/chrome-discover-usb.png b/docs/remote-debugging/chrome-discover-usb.png new file mode 100644 index 0000000..7dffa9d Binary files /dev/null and b/docs/remote-debugging/chrome-discover-usb.png differ diff --git a/docs/remote-debugging/chrome-inspect-devices.png b/docs/remote-debugging/chrome-inspect-devices.png new file mode 100644 index 0000000..d3bf50d Binary files /dev/null and b/docs/remote-debugging/chrome-inspect-devices.png differ diff --git a/docs/remote-debugging/chrome-inspect-tabs.png b/docs/remote-debugging/chrome-inspect-tabs.png new file mode 100644 index 0000000..0c896f6 Binary files /dev/null and b/docs/remote-debugging/chrome-inspect-tabs.png differ diff --git a/docs/remote-debugging/chrome-open-remote-tab.png b/docs/remote-debugging/chrome-open-remote-tab.png new file mode 100644 index 0000000..6382555 Binary files /dev/null and b/docs/remote-debugging/chrome-open-remote-tab.png differ diff --git a/docs/remote-debugging/chrome-port-forwarding.png b/docs/remote-debugging/chrome-port-forwarding.png new file mode 100644 index 0000000..ff06dc3 Binary files /dev/null and b/docs/remote-debugging/chrome-port-forwarding.png differ diff --git a/docs/remote-debugging/chrome-virtual-host-mapping.png b/docs/remote-debugging/chrome-virtual-host-mapping.png new file mode 100644 index 0000000..f8dfbaa Binary files /dev/null and b/docs/remote-debugging/chrome-virtual-host-mapping.png differ diff --git a/docs/remote-debugging/cws.png b/docs/remote-debugging/cws.png deleted file mode 100644 index 385a779..0000000 Binary files a/docs/remote-debugging/cws.png and /dev/null differ diff --git a/docs/remote-debugging/discover-usb-devices.png b/docs/remote-debugging/discover-usb-devices.png deleted file mode 100644 index c338e0d..0000000 Binary files a/docs/remote-debugging/discover-usb-devices.png and /dev/null differ diff --git a/docs/remote-debugging/icon-screencast.png b/docs/remote-debugging/icon-screencast.png new file mode 100644 index 0000000..fbeae59 Binary files /dev/null and b/docs/remote-debugging/icon-screencast.png differ diff --git a/docs/remote-debugging/image_4.png b/docs/remote-debugging/image_4.png deleted file mode 100644 index 2022aaa..0000000 Binary files a/docs/remote-debugging/image_4.png and /dev/null differ diff --git a/docs/remote-debugging/image_5.png b/docs/remote-debugging/image_5.png deleted file mode 100644 index 3e4caa3..0000000 Binary files a/docs/remote-debugging/image_5.png and /dev/null differ diff --git a/docs/remote-debugging/inspect-open-tab.png b/docs/remote-debugging/inspect-open-tab.png deleted file mode 100644 index bd8516b..0000000 Binary files a/docs/remote-debugging/inspect-open-tab.png and /dev/null differ diff --git a/docs/remote-debugging/image_7.png b/docs/remote-debugging/legacy-inspect.png similarity index 100% rename from docs/remote-debugging/image_7.png rename to docs/remote-debugging/legacy-inspect.png diff --git a/docs/remote-debugging/image_6.png b/docs/remote-debugging/legacy-port-forwarding-command.png similarity index 100% rename from docs/remote-debugging/image_6.png rename to docs/remote-debugging/legacy-port-forwarding-command.png diff --git a/docs/remote-debugging/menu.png b/docs/remote-debugging/menu.png deleted file mode 100644 index 480620a..0000000 Binary files a/docs/remote-debugging/menu.png and /dev/null differ diff --git a/docs/remote-debugging/open-new-remote-tab.png b/docs/remote-debugging/open-new-remote-tab.png deleted file mode 100644 index 72d9d28..0000000 Binary files a/docs/remote-debugging/open-new-remote-tab.png and /dev/null differ diff --git a/docs/remote-debugging/phone-proxy-settings.png b/docs/remote-debugging/phone-proxy-settings.png new file mode 100644 index 0000000..da9d8df Binary files /dev/null and b/docs/remote-debugging/phone-proxy-settings.png differ diff --git a/docs/remote-debugging/port-forward-to-proxy.png b/docs/remote-debugging/port-forward-to-proxy.png new file mode 100644 index 0000000..bae6d0f Binary files /dev/null and b/docs/remote-debugging/port-forward-to-proxy.png differ diff --git a/docs/remote-debugging/port-forwarding-dialog.png b/docs/remote-debugging/port-forwarding-dialog.png new file mode 100644 index 0000000..e42ffb8 Binary files /dev/null and b/docs/remote-debugging/port-forwarding-dialog.png differ diff --git a/docs/remote-debugging/port-forwarding-on-device.png b/docs/remote-debugging/port-forwarding-on-device.png new file mode 100644 index 0000000..7a0b8d1 Binary files /dev/null and b/docs/remote-debugging/port-forwarding-on-device.png differ diff --git a/docs/remote-debugging/port-forwarding-settings.png b/docs/remote-debugging/port-forwarding-settings.png deleted file mode 100644 index 68174fe..0000000 Binary files a/docs/remote-debugging/port-forwarding-settings.png and /dev/null differ diff --git a/docs/remote-debugging/portforward.png b/docs/remote-debugging/portforward.png deleted file mode 100644 index 6d8f3ba..0000000 Binary files a/docs/remote-debugging/portforward.png and /dev/null differ diff --git a/docs/remote-debugging/rsa-fingerprint.png b/docs/remote-debugging/rsa-fingerprint.png new file mode 100644 index 0000000..18fe3c3 Binary files /dev/null and b/docs/remote-debugging/rsa-fingerprint.png differ diff --git a/docs/remote-debugging/screencast-button.png b/docs/remote-debugging/screencast-button.png deleted file mode 100644 index 852a37a..0000000 Binary files a/docs/remote-debugging/screencast-button.png and /dev/null differ diff --git a/docs/remote-debugging/screencast-icon-location.png b/docs/remote-debugging/screencast-icon-location.png new file mode 100644 index 0000000..7471115 Binary files /dev/null and b/docs/remote-debugging/screencast-icon-location.png differ diff --git a/docs/remote-debugging/screencast.png b/docs/remote-debugging/screencast.png new file mode 100644 index 0000000..5174a8d Binary files /dev/null and b/docs/remote-debugging/screencast.png differ diff --git a/docs/remote-debugging/screencast0.png b/docs/remote-debugging/screencast0.png deleted file mode 100644 index 1a1a262..0000000 Binary files a/docs/remote-debugging/screencast0.png and /dev/null differ diff --git a/docs/remote-debugging/screencast1.png b/docs/remote-debugging/screencast1.png deleted file mode 100644 index 9fb8b3b..0000000 Binary files a/docs/remote-debugging/screencast1.png and /dev/null differ diff --git a/docs/remote-debugging/usb-debugging-dialog.png b/docs/remote-debugging/usb-debugging-dialog.png deleted file mode 100644 index 22375d1..0000000 Binary files a/docs/remote-debugging/usb-debugging-dialog.png and /dev/null differ diff --git a/docs/remote-debugging/usb-debugging-on.png b/docs/remote-debugging/usb-debugging-on.png new file mode 100755 index 0000000..24241be Binary files /dev/null and b/docs/remote-debugging/usb-debugging-on.png differ diff --git a/docs/remote-debugging/usb_debugging_on.png b/docs/remote-debugging/usb_debugging_on.png deleted file mode 100644 index 113c25e..0000000 Binary files a/docs/remote-debugging/usb_debugging_on.png and /dev/null differ diff --git a/docs/remote-debugging/vhost-mapping.jpg b/docs/remote-debugging/vhost-mapping.jpg deleted file mode 100644 index 72cd8a5..0000000 Binary files a/docs/remote-debugging/vhost-mapping.jpg and /dev/null differ diff --git a/docs/remote-debugging/virtual-host-mapping.png b/docs/remote-debugging/virtual-host-mapping.png new file mode 100644 index 0000000..90ffa99 Binary files /dev/null and b/docs/remote-debugging/virtual-host-mapping.png differ diff --git a/docs/remote-debugging/webview-debugging.png b/docs/remote-debugging/webview-debugging.png new file mode 100644 index 0000000..1b30281 Binary files /dev/null and b/docs/remote-debugging/webview-debugging.png differ