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?
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.
--auto-open-devtools-for-tabs as in this answer –
Strader /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs –
Facile 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.
DevTools. My version is Ubuntu Snap Version 84.0.4147.105 (Offizieller Build) snap (64-Bit) –
Kinaesthesia debugger statement to pause in the newly opened window works for me. –
Thurman 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
Version 50.0.2661.102 Ubuntu 15.10 (64-bit) and opened it like this chromium-browser --auto-open-devtools-for-tabs –
Eyestrain /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs –
Facile 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.
--auto-open-devtools-for-tabs as in this answer –
Strader /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs –
Facile On a Mac: Quit Chrome, then run the following command in a terminal window:
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
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://mcmap.net/q/87355/-executing-shell-scripts-from-the-os-x-dock –
Bolger Under the Chrome DevTools settings you enable:
Under Network -> Preserve Log Under DevTools -> Auto-open DevTools for popups
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
Answer for 2021:
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.
-- from the runTimeArgs. –
Mut 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 |
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.
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
open -a "Google Chrome" --args --auto-open-devtools-for-tabs for MacOS as in this answer above from 2017 –
Mut 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!
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
For Windows:
On windows I try and succeed to make disappear DevTools opening @chrome opening or new tab opening
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.
You can open dock view settings and adjust the window as you want. Screenshot attached.
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.
© 2022 - 2024 — McMap. All rights reserved.
+^jto 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... – Onfroi