Automatically open Chrome developer tools when new tab/new window is opened

Question

I have HTML5 application which opens in a new window by clicking a link. I'm a bit tired of pressing Shift + I each time I want to logging network communication to launch Developer tools because I need it always. I was not able to find an option to keep Developer Tools always enabled on startup.

Is there any way to open Developer tools automatically when new window is opened in Chrome?

I would love to know this as well. Only way I've found is to edit the source like this guy did: [link]https://groups.google.com/forum/?fromgroups=#!topic/google-chrome-developer-tools/HhwKHUryNaA — zone117x, Sep 06 '12 at 01:50
I've scoured pretty hard, and the closest thing I can find is the create a new Pane inside the dev tools, with a Chrome Extension. — TankorSmash, Sep 16 '12 at 20:37
Using SendKeys with Python, you can launch Chrome and send `+^j` to simulate Ctrl Shift J, but that would only work with a new instance; you'd have to get a bit more creative with selenium or something in order to navigate to a given page... — TankorSmash, Sep 16 '12 at 20:44
Yeah, I also saw this variant but it is not applicable when you what to open dev tools for each new tab opened. — Alexander Sirobaba, Oct 04 '12 at 09:57
[Here's a guy](https://groups.google.com/forum/#!topic/google-chrome-developer-tools/HhwKHUryNaA) who modified the source code to add this capability. It appears to be out of date now, but at least we know your request is *possible*. — Patrick M, Jul 22 '14 at 17:59
This feature was added in 2016. See here: https://bugs.chromium.org/p/chromium/issues/detail?id=410958#c81 — Rimian, May 18 '17 at 03:21

score 239 · Answer 1 · edited Jul 14 '16 at 10:20

239

On opening the developer tools, with the developer tools window in focus, press F1. This will open a settings page. Check the "Auto-open DevTools for popups".

This worked for me.

edited Jul 14 '16 at 10:20

Lahiru

1,534
4
31
30

answered Jul 14 '16 at 05:37

Saint

2,419
2
9
8

15

This works and is exactly what the OP was asking, it should be marked as the right answer – Rui Aug 11 '16 at 10:06
1

Also doesn't work for me with WebStorm. The page opens but no dev tools. – Mörre Feb 02 '17 at 15:35
It worked for me. Opening the console open, I clicked a link on my page which opens in a new tab and then it opened with a console. Thanks. – Onur Demir Feb 20 '17 at 11:04
3

This works, but the "Preserve Logs" option is always unchecked, and if the popup redirects it doesn't show previous network requests. Any ideas how to make it preserve logs by default? – timetofly Jun 05 '17 at 16:30
1

This only works for a specific subset of cases, please see https://bugs.chromium.org/p/chromium/issues/detail?id=410958#c87. It's not a general solution. – Lane Rettig Jun 28 '17 at 19:40
2

Doesn't work when starting from VS Code with Chome debug extension. – VanAlbert Jul 06 '17 at 09:14
In Preferences, there are no `DevTools`. My version is Ubuntu Snap `Version 84.0.4147.105 (Offizieller Build) snap (64-Bit)` – Timo Aug 15 '20 at 08:47
@VanAlbert See https://stackoverflow.com/a/54386381/7660079 (Sorry late reply lol) – Aweston Oct 21 '20 at 14:11

score 102 · Accepted Answer · edited Nov 06 '19 at 04:30

102

UPDATE 2:

See this answer . - 2019-11-05

You can also now have it auto-open Developer Tools in Pop-ups if they were open where you opened them from. For example, if you do not have Dev Tools open and you get a popup, it won't open with Dev Tools. But if you Have Dev Tools Open and then you click something, the popup will have Dev-Tools Automatically opened.

UPDATE:

Time has changed, you can now use --auto-open-devtools-for-tabs as in this answer – Wouter Huysentruit May 18 at 11:08

OP:

I played around with the startup string for Chrome on execute, but couldn't get it to persist to new tabs.
I also thought about a defined PATH method that you could invoke from prompt. This is possible with the SendKeys command, but again, only on a new instance. And DevTools doesn't persist to new tabs.

Browsing the Google Product Forums, there doesn't seem to be a built-in way to do this in Chrome. You'll have to use a keystroke solution or F12 as mentioned above.

I recommended it as a feature. I know I'm not the first either.

edited Nov 06 '19 at 04:30

Dan Pritts

1,124
15
14

answered Dec 06 '12 at 16:00

Chiperific

2,664
2
17
31

1

@Seanny123: fixed! If you want this as a feature, feel free to Star this Chromium bug: https://code.google.com/p/chromium/issues/detail?id=410958 – phsource Oct 15 '14 at 21:19
1

@Chiperific, you said you was playing around the startup string for Chrome on execute, but could not get it to persist to new tabs. I need this behavior on startup for only one tab, however. Can you share the way you did it for one tab only? – Martin Braun Nov 30 '14 at 18:47
11

Time has changed, you can now use `--auto-open-devtools-for-tabs` as in [this answer](http://stackoverflow.com/a/36957422/1300910) – huysentruitw May 18 '16 at 11:08
2

Please consider editing your answer. It is obsolete but still very visible in SO. – yannick1976 Oct 24 '16 at 17:00
5

The full command for OS X is (quit any running Chrome process first): `/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs` – Lane Rettig Jun 28 '17 at 19:42
@HANDL, How to also enable for network for new tabs? – Pacerier Oct 11 '17 at 05:59
@Pacerier I don't think that is possible – huysentruitw Oct 11 '17 at 12:18

score 98 · Answer 3 · edited Apr 30 '16 at 17:11

98

There is a command line switch for this: --auto-open-devtools-for-tabs

So for the properties on Google Chrome, use something like this:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs

Here is a useful link: chromium-command-line-switches

edited Apr 30 '16 at 17:11

Ani Menon

23,084
13
81
107

answered Apr 30 '16 at 16:33

David

987
6
4

1

This definitely works and should probably be marked as accepted answer now. Checked for chromium `Version 50.0.2661.102 Ubuntu 15.10 (64-bit)` and opened it like this `chromium-browser --auto-open-devtools-for-tabs` – Olga Jul 28 '16 at 13:01
6

This doesn't work on Windows 7 Version 51.0.2704.103 m – Peter Aug 08 '16 at 15:32
7

The full command for OS X is (quit any running Chrome process first): `/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs` – Lane Rettig Jun 28 '17 at 19:43
2

Didn't work on Version 59.0.3071.115 (Official Build) (64-bit) – Gustavo Straube Aug 03 '17 at 14:58
Works in my use case unlike Saint's answer. – Markus Barthlen Sep 01 '17 at 09:19
Remember to quit all Chrome instances before trying this. Or this won't work. – Rick Sep 02 '18 at 06:03
1

I updated the command line arguments to this: --auto-open-devtools-for-tabs --user-data-dir=c:\temp\chrome. This essentially tells Chrome to use a separate directory just for debugging and did the trick for me – Brian Wells Oct 07 '20 at 21:54
Thanks for that hint, @BrianWells ! – alex_jwb90 Mar 01 '21 at 17:50

score 31 · Answer 4 · answered Jul 26 '17 at 14:12

31

On a Mac: Quit Chrome, then run the following command in a terminal window:

open -a "Google Chrome" --args --auto-open-devtools-for-tabs

answered Jul 26 '17 at 14:12

Erin Mills

311
3
3

2

To clarify: this opens Chrome with the `auto-open-devtools-for-tabs` flag set. Quitting Chrome and reopening it using the normal application shortcut will open Chrome without the flag set. If you want a shortcut to opening Chrome with this flag set without having to open a terminal window, you can create a workflow in Automator, add a "Run Shell Script" item, and paste in the above script. Saving the workflow as an application will create a clickable app. See this answer in another thread: https://stackoverflow.com/a/281455/1512790 – Rick Gladwin Jan 06 '19 at 19:21

score 21 · Answer 5 · answered Nov 03 '17 at 19:45

21

Under the Chrome DevTools settings you enable:

Under Network -> Preserve Log Under DevTools -> Auto-open DevTools for popups

answered Nov 03 '17 at 19:45

Andrew Patterson

513
5
10

The best answer IMO – Chase Miller Aug 29 '18 at 20:38
2

good answer but explained for linux: Go to developer console. Go to the hamburger menu. click settings (or f1). in the network section check preserve log. in the devtools section check auto-open devtools for popups – JDPeckham Mar 14 '19 at 15:57
2

On MacOS in Chrome 85 it is now under Settings -> Global section. – Konstantin Gatilin Oct 08 '20 at 14:30

score 12 · Answer 6 · edited Feb 19 '20 at 03:06

12

With the Developer Tools window visible, click the menu icon (the three vertical dots in the top right corner) and click Settings.

Under Dev Tools, check the Auto-open DevTools for popups option

edited Feb 19 '20 at 03:06

recvfrom

79
1
10

answered Jan 23 '20 at 05:24

luhuiya

1,803
19
19

3

Chrome Version 86 the setting is on the same place but named differently, so: Settings -> Preferences -> Global -> Auto-open DevTools for popups. – Бранко Пејић Oct 28 '20 at 12:15

score 9 · Answer 7 · answered Oct 25 '12 at 09:04

9

F12 is easier than Ctrl+Shift+I

answered Oct 25 '12 at 09:04

Yehia

462
2
16

2

If you are on Windows or Linux – Gianfranco P. Jun 11 '13 at 17:22
1

to hit f12 on a macbook, or pro you have to do fn+f12 (bottom left extreme + top right extreme), which is not comfortable for most keyboard users – Seth McClaine Jul 21 '15 at 16:18
Works great on linux... Another reason to switch. Did it on a Mac Pro, it's not perfect, but still way better than Apple OS – Ray Foss Aug 27 '19 at 14:27

score 6 · Answer 8 · answered Jan 27 '19 at 08:33

If you use Visual Studio Code (vscode), using the very popular vscode chrome debug extension (https://github.com/Microsoft/vscode-chrome-debug) you can setup a launch configuration file launch.json and specify to open the developer tool during a debug session.

This the launch.json I use for my React projects :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "runtimeArgs": ["--auto-open-devtools-for-tabs"],
      "webRoot": "${workspaceRoot}/src"
    }
  ]
}

The important line is "runtimeArgs": ["--auto-open-devtools-for-tabs"],

From vscode you can now type F5, Chrome opens your app and the console tab as well.

score 4 · Answer 9 · answered Jan 04 '15 at 22:09

I came here looking for a similar solution. I really wanted to see the chrome output for the pageload from a new tab. (a form submission in my case) The solution I actually used was to modify the form target attribute so that the form submission would occur in the current tab. I was able to capture the network request. Problem Solved!

Ron Rebennack · Answer 10 · 2018-01-23T21:00:00.677

4

Anyone looking to do this inside Visual Studio, this Code Project article will help. Just add "--auto-open-devtools-for-tabs" in the arguments box. Works on 2017.

edited Jan 23 '18 at 21:00

answered Jan 23 '18 at 19:50

Ron Rebennack

1,549
1
13
13

In case Code Project page goes away: you go to the Execute drop-down, select Browse With..., Add..., Program is something like: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe and Arguments: --auto-open-devtools-for-tabs -incognito (incognito being optional) – Dustin_00 Feb 22 '20 at 19:04

score 2 · Answer 11 · answered Apr 14 '20 at 15:01

2

Use --auto-open-devtools-for-tabs flag while running chrome from command line

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs

https://developers.google.com/web/tools/chrome-devtools/open#auto

answered Apr 14 '20 at 15:01

Robin

5,551
7
32
33

1

thanks ,It works on my computer.The premise is that all corresponding browser processes must be shut down first. – Andy Aug 01 '20 at 05:50

score 1 · Answer 12 · edited May 26 '19 at 09:25

1

Yep,there is a way you could do it

Right click->Inspect->sources(tab)
Towards Your right there will be a "pause script execution button"

I hope it helps!Peace

P.S:This is for the first time.From the second time onwards the dev tool loads automatically

edited May 26 '19 at 09:25

Korayem

10,709
5
65
52

answered Mar 29 '16 at 15:03

Harish

19
2

score -6 · Answer 13 · answered May 25 '18 at 16:07

-6

You can open Dev Tools (F12 in Chrome) in new window by clicking three, vertical dots on the right bottom corner, and choose Open as Separate Window.

answered May 25 '18 at 16:07

Belloz

323
3
8

Automatically open Chrome developer tools when new tab/new window is opened

13 Answers13

Linked