416

I have an HTML5 application which opens in a new window each time I click on a link. I'm a bit tired of pressing Shift + I command each time I want to log 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?

7
  • 1
    I would love to know this as well. Only way I've found is to edit the source like this guy did: [link]groups.google.com/forum/?fromgroups=#!topic/…
    – zone117x
    Sep 6, 2012 at 1: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. Sep 16, 2012 at 20:37
  • 2
    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... Sep 16, 2012 at 20:44
  • 1
    Yeah, I also saw this variant but it is not applicable when you what to open dev tools for each new tab opened. Oct 4, 2012 at 9:57
  • 1
    This feature was added in 2016. See here: bugs.chromium.org/p/chromium/issues/detail?id=410958#c81
    – Rimian
    May 18, 2017 at 3:21

18 Answers 18

423

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.

enter image description here

10
  • 23
    This works and is exactly what the OP was asking, it should be marked as the right answer
    – Rui
    Aug 11, 2016 at 10:06
  • 2
    Also doesn't work for me with WebStorm. The page opens but no dev tools.
    – Mörre
    Feb 2, 2017 at 15:35
  • 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 5, 2017 at 16:30
  • 3
    This only works for a specific subset of cases, please see bugs.chromium.org/p/chromium/issues/detail?id=410958#c87. It's not a general solution. Jun 28, 2017 at 19:40
  • 3
    Doesn't work when starting from VS Code with Chome debug extension.
    – VanAlbert
    Jul 6, 2017 at 9:14
152

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
    
9
  • 3
    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, 2016 at 13:01
  • 9
    This doesn't work on Windows 7 Version 51.0.2704.103 m
    – Peter
    Aug 8, 2016 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 Jun 28, 2017 at 19:43
  • 4
    Didn't work on Version 59.0.3071.115 (Official Build) (64-bit) Aug 3, 2017 at 14:58
  • 4
    Remember to quit all Chrome instances before trying this. Or this won't work.
    – Rick
    Sep 2, 2018 at 6:03
123

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.

5
  • 1
    @Seanny123: fixed! If you want this as a feature, feel free to Star this Chromium bug: code.google.com/p/chromium/issues/detail?id=410958
    – phsource
    Oct 15, 2014 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? Nov 30, 2014 at 18:47
  • 12
    Time has changed, you can now use --auto-open-devtools-for-tabs as in this answer May 18, 2016 at 11:08
  • 2
    Please consider editing your answer. It is obsolete but still very visible in SO. Oct 24, 2016 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 Jun 28, 2017 at 19:42
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
1
  • 5
    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: stackoverflow.com/a/281455/1512790 Jan 6, 2019 at 19:21
24

Under the Chrome DevTools settings you enable:

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

4
  • The best answer IMO Aug 29, 2018 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, 2019 at 15:57
  • 5
    On MacOS in Chrome 85 it is now under Settings -> Global section. Oct 8, 2020 at 14:30
  • This is the same answer as stackoverflow.com/a/38366206/327074
    – icc97
    Jan 20, 2023 at 5:23
18

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

Setting

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

setting details

2
14

Answer for 2021:

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

Settings

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

actual location

2
11

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.

2
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
3
  • 2
    If you are on Windows or Linux Jun 11, 2013 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 Jul 21, 2015 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, 2019 at 14:27
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.

1
  • 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, 2020 at 19:04
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

4
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!

1

Yep,there is a way you could do it

  1. Right click->Inspect->sources(tab)

  2. Towards Your right there will be a "pause script execution button" The button highlighted in the image directed by this link is the script execution button which can be paused or played as per necessity.Try it Yourself

I hope it helps!Peace

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

For Windows:

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

On windows I try and succeed to make disappear DevTools opening @chrome opening or new tab opening

  1. F12
  2. DevTools settings
  3. Click "Restore defaults and reload" button Close Chrome and check task manager to be shore that you close all Chrome processes. Open Chrome and no more DevTools :)
0

If you are trying to open dev tools when redirecting, you can add a sleep function just before the debugger keyword. Without this time sleep, auto-opening dev tool won't get opened. RequestContext.getCurrentInstance().execute(script); -- redirecting code in Spring e.g. In your typescript app add

setTimeout(5000);
debugger

In my case that helped.

-3

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

Dock_view_seetings

2
  • 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, 2021 at 8: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, 2023 at 15:35
-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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.