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?
This question is related to
google-chrome
google-chrome-devtools
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
On a Mac: Quit Chrome, then run the following command in a terminal window:
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
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.
F12 is easier than Ctrl+Shift+I
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
Under the Chrome DevTools settings you enable:
Under Network -> Preserve Log Under DevTools -> Auto-open DevTools for popups
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!
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
.
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.
Source: Stackoverflow.com