Chris Hayes
@chris@floss.social  ·  activity timestamp 3 days ago

A neat #webdev trick I really need to use more is #Firefox USB debugging + scrcpy to debug a website on a Android phone.

A screen capture of a Linux desktop where an Android phone’s screen is mirrored via scrcpy. On the left, Firefox Developer Tools’ “about:debugging” tab lists the connected device. On the right, scrcpy a mobile browser pointed at a local dev server. I click “Inspect Tab” in the Firefox debugger, and then uses Firefox’s element picker directly on the screencopy mirrored display to select an element in the page. That element is highlighted in the Firefox inspector, and its CSS is live-edited—changing the background color to red—to demonstrate real-time debugging and styling on the Android device.
A screen capture of a Linux desktop where an Android phone’s screen is mirrored via scrcpy. On the left, Firefox Developer Tools’ “about:debugging” tab lists the connected device. On the right, scrcpy a mobile browser pointed at a local dev server. I click “Inspect Tab” in the Firefox debugger, and then uses Firefox’s element picker directly on the screencopy mirrored display to select an element in the page. That element is highlighted in the Firefox inspector, and its CSS is live-edited—changing the background color to red—to demonstrate real-time debugging and styling on the Android device.