A brief look at setting up remote device debugging for Chrome and Firefox on Android. I look at some of the differences in viewport and relative height sizing for these mobile browsers when the URL Bar is shown/hidden

Android Debugging Setup

For complete guides on setting up remote debugging on Android for Chrome and Firefox, see the official guides:

Firefox WebIDE: Firefox Android Remote Debugging on MDN

Chrome DevTools Guide: Chrome Android Remote Debugging

The abbreviated instructions below are summaries of the official docs, and contain a few workarounds for the 'gotchas' not emphasised in the guides

Firefox Remote

On your Android device go to Settings > Developer Options > Advanced > Enable USB Debugging (might vary depending on device)

Open Firefox Android and enable Settings > Advanced> Remote debugging via USB

Connect the Android device to your laptop via USB

From within the Firefox Desktop app, open Web Developer > WebIDE. Your device should be listed on the right of the screen. If not, disconnect and reconnect your device. Click on your device's name once it appears. You MUST have Firefox Android running and visible on the mobile device when connecting via the WebIDE

02 Firefox WebIDE

A popup will appear on your device requesting that you Allow Access from the laptop. This popup will only appear if Firefox Android is open and active - it is not a system wide prompt

03 Firefox Mobile Allow

Once you allow access, the Firefox WebIDE will display a list of open websites under the Tabs heading. Click on one of the sites: the familiar debugger should appear, except it will be targeting Firefox on the Android device.

04 Firefox WebIDE Connected

Chrome Remote

On Chrome desktop app, open Developer Tools > Options (three dots) > More Tools > Remote Devices

Check Discover USB Devices

01 Chrome Remote Devices

After enabling USB Debugging on your Android device, connect it via USB to the laptop

The detected devices will be listed on the left under Devices, and also at the bottom of the screen. Click the Inspect button for the page you want to debug

05 Chrome Remote Devices Connected Edit

ADB Drivers (Android Debug Bridge): if you have connectivity problems with your device, especially on Windows, you may need to install ADB drivers: see the troubleshooting section of the official docs. Note that these drivers come with Android Studio if you have that installed

If problems persist with Chrome DevTools not recognizing a connected device, try connecting via Firefox WebIDE first. This works consistently for me: after connecting via WebIDE, Chrome DevTools recognizes my connected devices immediately 🤝

Chrome Android Localhost

You can also access and debug your apps directly from local servers using Chrome. In Remote Devices > Settings, set the listening port for your device that will map to your local server address:

05 a Chrome Localhost Setup

05 b Chrome Localhost

Start the server on your local machine e.g. ng serve --aot, which listens on port 4200 by default, and on your remote device enter the mapped port e.g. http://localhost:5000/. The remote browser will connect to your local server, allow live updates on the mobile device during development, and debugging via the Inspect option.

App Not Loading: After clicking Inspect, you may find that the app on the mobile device hangs during loading. To resolve this, go to the Network tab and hit F5 to refresh the browser via DevTools. Remember to then click Stop Recording as F5 starts the recorder by default

Screenshot 20180721-232846 (1)

Viewport Heights

On desktop browsers, where the URL bar is not resized while scrolling, viewport units can be used consistently. A problem arises though when using viewport units (vh and vw) and ICB* relative heights on mobile browsers.

It is a common behavior of Android and iOS browsers to transition the URL bar between a visible and hidden states as a user scrolls up and down a page: effectively changing the visible area of the browser.

How each browser handles this viewport area change in relation to viewport and ICB* lengths needs to be considered when designing web applications

* The Initial Containing Block (ICB) is the root containing block used when sizing elements relative to their parents. For example, giving the <html> element a style of width: 100%; height: 100% will make it the same size as the ICB -- Chrome Android >56 Update 2016

Chrome Viewport

Chrome Android (v65.0.3)

  • 100vh sized to the viewport height as if the URL bar is always hidden
  • height:100% sized to the viewport height as if the URL bar is always visible
  • These values do not resize in response to the URL bar being shown or hidden
  • Exception to the above behavior for position: fixed elements. Changes to the URL Bar visible/hidden state will update a fixed element's size

In the following image, the transparent area at the top of the Chrome mobile viewer indicates the space that the URL bar would take up

06.0 Chrome 100pc URLBarVisible

06.1 Chrome 100vh

Firefox Viewport

Firefox Android (v59.0.2)

  • 100vh and height:100% are based on the current maximum visible area
  • These values are recalculated while scrolling, and change when the URL Bar transitions
  • This can lead to reflow/layout thrashing

Reflow (as it's called in Firefox) or layout (Google/IE/Safari) is an expensive process, and should be minimized for performance reasons. This is explained in detail in Google's Web Fundamentals article

10 Firefox URLBar Resizing 100pc

Brian Bishop

Dublin, Ireland