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
@Rimian great link! Nitpick though... it's the comment 78 above the one you link to that is more relevant I think: https://bugs.chromium.org/p/chromium/issues/detail?id=410958#c78 — icc97, Jan 20 '23 at 05:31

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

393

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 Jayaratne

1,684
4
31
35

answered Jul 14 '16 at 05:37

Saint

3,977
2
11
10

22

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
2

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
4

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
3

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
3

Doesn't work when starting from VS Code with Chome debug extension. – VanAlbert Jul 06 '17 at 09:14
2

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
This option in combination with [`debugger`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statement to pause in the newly opened window works for me. – mihca Jun 22 '21 at 07:01
1

This little tweak has an amazingly large effect on my sanity. When doing dev, especially with frameworks like React and NextJS, the dev tools are open 100% of the time. Being able to automatically open for popup interactions means I don't have to try and race faster than the system can perform component redirects and output can be captured, debuggers can be handled, etc. – bsplosion Jun 30 '21 at 12:56

score 143 · Answer 2 · edited Jan 20 '23 at 06:07

143

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

So, on Windows, for the properties on Google Chrome shortcut, 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.

As per the DevTools docs, here's the commands for each platform from the command line:

MacOS:

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

Windows:

start chrome --auto-open-devtools-for-tabs

Linux:

google-chrome --auto-open-devtools-for-tabs

edited Jan 20 '23 at 06:07

icc97

11,395
8
76
90

answered Apr 30 '16 at 16:33

David

1,437
1
9
4

2

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
8

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

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
4

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
3

Remember to quit all Chrome instances before trying this. Or this won't work. – Rick Sep 02 '18 at 06:03
2

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
For reference here is the issue thread for when it was added to Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=410958#c78 (first noted in [question comment from @Rimian](https://stackoverflow.com/questions/12212504/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened/36957422#comment75102404_12212504)) – icc97 Jan 20 '23 at 05:41

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

122

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,274
16
14

answered Dec 06 '12 at 16:00

Chiperific

4,428
3
21
41

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
12

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
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:42

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

38

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

381
3
3

4

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 23 · Answer 5 · answered Nov 03 '17 at 19:45

23

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

541
1
5
10

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

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
4

On MacOS in Chrome 85 it is now under Settings -> Global section. – Konstantin Gatilin Oct 08 '20 at 14:30
This is the same answer as https://stackoverflow.com/a/38366206/327074 – icc97 Jan 20 '23 at 05:23

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

18

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

389
6
14

answered Jan 23 '20 at 05:24

luhuiya

2,129
21
20

6

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
This is the same answer as https://stackoverflow.com/a/38366206/327074 – icc97 Jan 20 '23 at 05:23

score 13 · Answer 7 · answered Nov 05 '21 at 09:45

13

Answer for 2021:

Open the Developer Tool (CTRL+SHIFT+I on Windows)
Click the "Gear" icon. THe new Settings window will appear.

"Auto-open DevTools for popups" is now under "Preferences" section.

answered Nov 05 '21 at 09:45

randolfarevalo

179
1
7

This is the same answer as https://stackoverflow.com/a/38366206/327074 – icc97 Jan 20 '23 at 05:23
Downvoted because stolen answer. – codepleb Jun 26 '23 at 07:15

score 11 · 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.

Yes! Thank you. [@VanAlbert's comment in the top answer](https://stackoverflow.com/questions/12212504/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened/36957422#comment76864533_38366206) points in this direction, and this solves it. I'd missed off the `--` from the `runTimeArgs`. — icc97, Jan 20 '23 at 05:26

score 9 · Answer 9 · edited Jan 20 '23 at 05:53

9

F12 is easier than Ctrl+Shift+I

Here's all the DevTools open shortcuts:

OS	Elements	Console	Your last panel
Windows or Linux	Ctrl + Shift + C	Ctrl + Shift + J	F12 Ctrl + Shift + I
Mac	Cmd + Option + C	Cmd + Option + J	Fn + F12 Cmd + Option + I

edited Jan 20 '23 at 05:53

icc97

11,395
8
76
90

answered Oct 25 '12 at 09:04

Yehia

518
2
17

2

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

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

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

5

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

2,666
1
22
17

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 5 · Answer 11 · edited Jan 20 '23 at 05:58

5

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://developer.chrome.com/docs/devtools/open/#auto

edited Jan 20 '23 at 05:58

icc97

11,395
8
76
90

answered Apr 14 '20 at 15:01

Robin

6,879
7
37
35

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
This is the same answer as https://stackoverflow.com/a/36957422/327074 – icc97 Jan 20 '23 at 05:34
See also [this comment](https://stackoverflow.com/questions/12212504/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened/36957422#comment76602920_36957422) on the [same answer](https://stackoverflow.com/a/36957422/327074) – icc97 Jan 20 '23 at 05:54
Further the link you point to suggests `open -a "Google Chrome" --args --auto-open-devtools-for-tabs` for MacOS as in this [answer above from 2017](https://stackoverflow.com/a/45329472/327074) – icc97 Jan 20 '23 at 06:00

score 4 · Answer 12 · edited Jan 20 '23 at 06:02

4

I came here looking for a similar solution. I really wanted to see the chrome output for the page load 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. Then I was able to capture the network request. Problem Solved!

edited Jan 20 '23 at 06:02

icc97

11,395
8
76
90

answered Jan 04 '15 at 22:09

George Griffin

634
7
17

score 1 · Answer 13 · 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

12,108
5
69
56

answered Mar 29 '16 at 15:03

Harish

19
2

score 0 · Answer 14 · answered Dec 02 '22 at 20:12

0

For Windows:

Right-click your Google Chrome shortcut
Properties
Change Target to: "C:\Program Files\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
Click ok
You will need to close all current chrome instances & end chrome processes in Task Manager. Or restart PC.

answered Dec 02 '22 at 20:12

Andrew

18,680
13
103
118

This is the same answer as https://stackoverflow.com/a/36957422/327074 – icc97 Jan 20 '23 at 05:37

score -3 · Answer 15 · edited Nov 17 '21 at 04:45

-3

You can open dock view settings and adjust the window as you want. Screenshot attached.

edited Nov 17 '21 at 04:45

Suraj Rao

29,388
11
94
103

answered Nov 17 '21 at 04:42

VED

1
1

Hi and welcome to Stack Overflow. Sorry for the downvote, but I believe your answer is very far off the mark here. – user230910 Nov 25 '21 at 08:31
I think the question is about how to get that window to automatically open, not about how to adjust that window. – Teepeemm Feb 23 '23 at 15:35

score -6 · Answer 16 · 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

423
5
9

But I think the question is about how to get the window to automatically open, without needing extra clicks. – Teepeemm Feb 23 '23 at 15:36

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

16 Answers16

Linked