logged.

<< back to post overview

Automatically open browser devtools on startup

As a frontend developer, the browser devtools are an essential tool working on websites and webapps. For me they are basically always open in every browser I am developing and testing.

One thing which came to my mind recently was if it is possible to open the devtools automatically on opening up a browser window or tab. A thought so obvious that it is nearly embarassing, but maybe something which did not came to me earlier since my muscle memory just kicks in every day doing the job.

A quick search later revealed that there are indeed process arguments for both Firefox Developer Edition and Chromium (the two browsers I am mostly using for developing) opening their devtools automatically!
Unfortunately I could not find anything similar for Epiphany (i.e. Gnome Web):

Despite its name the Chromium flag opens the devtools in new tabs and new windows. Perfect! Firefox unfortunately opens its devtools only on initial launch, i.e. in the first tab on startup. Every other tab or window will not open them up automatically. For me personally this should be fine for most cases, but I wished that Firefox would behave the same as Chromium in this regard.

Now the only thing left to do is to ensure that I just need to click the application icon to open each browser with its devtools open.
For me, who is using Gnome on Arch Linux, this means adding these arguments to the corresponding .desktop files. There are most certainly ways on macOS and Windows to achieve the same, but if you use one of these platforms you probably know better than me how to achieve this. ;)

I copied the system-wide chromium.desktop and firefoxdeveloperedition.desktop to ~/.local/share/applications to prevent them from being overwritten on a future update. In each file, I added the corresponding argument at the end of each Exec= line, which in my case are now looking like this:

Firefox Developer Edition:

[Desktop Entry]
Exec=/usr/lib/firefox-developer-edition/firefox --class="firefoxdeveloperedition" %u --devtools

[Desktop Action new-window]
Exec=/usr/lib/firefox-developer-edition/firefox --class="firefoxdeveloperedition" --new-window %u --devtools

[Desktop Action new-private-window]
Exec=/usr/lib/firefox-developer-edition/firefox --class="firefoxdeveloperedition" --private-window %u --devtools

Chromium:

[Desktop Entry]
Exec=/usr/bin/chromium %U --auto-open-devtools-for-tabs

[Desktop Action new-window]
Exec=/usr/bin/chromium --auto-open-devtools-for-tabs

[Desktop Action new-private-window]
Exec=/usr/bin/chromium --incognito --auto-open-devtools-for-tabs

That's it! Now both browsers are ready to be launched with their devtools open at launch! :)