I would like to be able to see the console and the debugger tabs of Firefox's developer tools at the same time. They should both be relating to the same page. How can I do this?
The answer is remote debugging, which will enable you to connect the android device to your workstation via a USB cable and debug your mobile webpage on your desktop. On a side note, you can debug multiple device sizes while performing responsiveness tests simultaneously.
You can open the Firefox Developer Tools from the menu by selecting Tools > Web Developer > Web Developer Tools or use the keyboard shortcut Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS.
You can set an unconditional breakpoint using the context menu (see above), or by: Clicking on the line number for the line you want to break at in the source pane. Highlighting the line you want to break at in the source pane and pressing Ctrl + B (Windows/Linux) or Cmd + B (macOS).
Firefox 28, released 18th of March 2014, has this feature:
To enable it, just open the debugger and click the "Toggle split console" button. It's in the top bar of the dev tools, on the right-hand side.
Also now possible to open the Console from any panel in the Developer Tools with the ESCape key.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With