I needed to debug a web page that I was working on, which was having some issues on mobile versions of firefox. I just needed to look at the console, but setting this up was a bit complicated, moreso than it should be. This should hopefully help:
- On your phone: Settings>About Phone>Build number (tap this 7 times to become a developer).
- Enable USB sharing: On your phone: Settings>Developer Options>USB Debugging
- In firefox on your desktop, open developer tools (Ctrl+Shift+I). Click on the gear icon. In the Advanced Settings section, check the boxes for \'Enable chrome and add-on debugging\' and the \'Enable remote debugging.
- Open the firefox on your mobile device. Click on the menu, then go to Settings>Developer Tools. Enable remote debugging by checking the appropriate checkbox.
- Connect your phone to your computer with a USB cable
- In Firefox on your desktop, go to Tools>Web Developer>WebIDE
- Click on \'Select Runtime\' dropdown, your device should be listed, click on it.
- Look at your phone, there should be a message to allow the connection. Click ok
- In WebIDE, click on the \'Open App\' dropdown. There is a section that lists currently open tabs, click on the tab you would like to debug.
- You should now have access to the console, inspector, etc...
Fixed Position Div Isn't Staying Fixed When Scrolling on Android
My nice fixed position toolbar wasn't sticking as it should as I scrolled through on my mobile browser window...
Simple Sticky Element
The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Chrome displays a different height than what Chrome says the height should be.
I was changing the height of an element, but no matter where I specified the height, it wasn't displaying what I was putting in
The Built Environment