Title: Using Firefox remote debugging feature | |
Author: Solène | |
Date: 06 August 2024 | |
Tags: firefox network | |
Description: In this blog post, you will learn how to use Firefox | |
remote debugging feature | |
# Introduction | |
Firefox has an interesting features for developers, its ability to | |
connect a Firefox developers tools to a remote Firefox instance. This | |
can really interesting in the case of a remote kiosk display for | |
instance. | |
The remote debugging does not provide a display of the remote, but it | |
gives you access to the developer tools for tabs opened on the remote. | |
# Setup | |
The remote firefox you want to connect to must be started using the | |
command line parameter `--start-debugger-server`. This will make it | |
listen on the TCP port 6000 on 127.0.0.1. Be careful, there is another | |
option named `remote-debugging-port` which is not what you want here, | |
but the names can be confusing (trust me, I wasted too much time | |
because of this). | |
Before starting Firefox, a few knobs must be modified in its | |
configuration. Either search for the options in `about:config` or | |
create a `user.js` file in the Firefox profile directory with the | |
following content: | |
``` | |
user_pref("devtools.chrome.enabled", true); | |
user_pref("devtools.debugger.remote-enabled", true); | |
user_pref("devtools.debugger.prompt-connection", false); | |
``` | |
This enables the remote management and removes a prompt upon each | |
connection, while this is a good safety measure, it is not practical | |
for remote debugging. | |
When you start Firefox, the URL input bar should have a red background. | |
# Remote connection | |
Now, you need to make a SSH tunnel to that remote host where Firefox is | |
running in order to connect to the port. Depending on your use case, a | |
local NAT could be done to expose the port to a network interface or | |
VPN interface, but pay attention to security as this would allow anyone | |
on the network to control the Firefox instance. | |
The SSH tunnel is quite standard: `ssh -L 6001:127.0.0.1:6000`, the | |
remote port 6000 is exposed locally as 6001, this is important because | |
your own Firefox may be using the port 6000 for some reasons. | |
In your own local Firefox instance, visit the page `about:debugging`, | |
add the remote instance `localhost:6001` and then click on Connect on | |
its name on the left panel. Congratulations, you have access to the | |
remote instance for debugging or profiling websites. | |
Input the remote address localhost:6001 and click on Add | |
Click on connect on the left | |
Enjoy your remote debugging session | |
# Conclusion | |
While it can be tricky to debug a system you can directly see, | |
especially if it is a kiosk in production that you can see / use in | |
case of a problem. |