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
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
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.
Chrome Remote
On Chrome desktop app, open Developer Tools > Options (three dots) > More Tools > Remote Devices
Check Discover USB 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
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:
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
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: fixedelements. 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
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
