blocks|key|3073283|text|有一个用于此的命令行开关：--auto-open-devtools-for-tabs|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3073284|因此，对于Google+Chrome上的属性，请使用类似以下内容：|3073285|"C:\Program+Files+(x86)\Google\Chrome\Application\chrome.exe"+--auto-open-devtools-for-tabs|code-block|syntax|javascript|3073286|这里有一个有用的链接：chromium-command-line-switches|3073287|entityMap|0|LINK|mutability|MUTABLE|url|http://peter.sh/experiments/chromium-command-line-switches/^0|D|T|0|0|0|B|U|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

There is a command line switch for this: <code>--auto-open-devtools-for-tabs</code>

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

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

Here is a useful link:
<a href="http://peter.sh/experiments/chromium-command-line-switches/">chromium-command-line-switches</a>

blocks|key|2859805|text|在Mac上:退出Chrome，然后在终端窗口中运行以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2859806|open+-a+"Google+Chrome"+--args+--auto-open-devtools-for-tabs|code-block|syntax|javascript|2859807|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>open -a "Google Chrome" --args --auto-open-devtools-for-tabs
</code></pre>

blocks|key|3073299|text|在您启用的Chrome+DevTools设置下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3073300|在DevTools+->自动打开弹出窗口的DevTools下的网络日志保留日志下|3073301|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Under the Chrome DevTools settings you enable: 

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

blocks|key|212510|text|在Developer+Tools窗口可见的情况下，单击菜单图标(右上角的三个垂直线)，然后单击设置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|212511|​|212512|📷|atomic|212513|212514|在开发工具下，检查自动打开弹出窗口的+DevTools+选项|212515|212516|212517|212518|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/17a748bb2b460a422c0ea2aa34b7cf18.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/60c76844b686235a1bca508bfaad8fa0.png^0|1B|2|0|0|0|1|0|0|0|1|4|I|A|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|K|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|N|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|I|5|J|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|P|3|G|5|6|7|1K|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X|Y|-4]]|Z|$5|T|U|V|E|$W|10|Y|-4]]]]

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

<a href="https://i.stack.imgur.com/zdvQM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zdvQM.png" alt="Setting"></a>

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

<a href="https://i.stack.imgur.com/ryYrA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ryYrA.png" alt="setting details"></a>

blocks|key|212422|text|F12比Ctrl%2BShift%2BI更简单|type|unstyled|depth|inlineStyleRanges|entityRanges|data|212423|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

blocks|key|215188|text|如果您使用Visual+Studio+Code+(+vscode+)，使用非常流行的vscode+chrome+debug扩展(https://github.com/Microsoft/vscode-chrome-debug)，您可以设置一个启动配置文件launch.json，并指定在调试会话期间打开开发人员工具。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|215189|这是我在React项目中使用的launch.json：|215190|{
++"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"
++++}
++]
}|code-block|syntax|javascript|215191|重要的一行是"runtimeArgs":+["--auto-open-devtools-for-tabs"],|215192|在vscode中，你现在可以输入F5，Chrome会打开你的应用程序和控制台标签。|215193|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Microsoft/vscode-chrome-debug^0|3J|B|1S|1C|0|0|F|B|0|0|6|1D|0|G|2|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

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

This the <code>launch.json</code> I use for my React projects :

<pre><code>{
 "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"
 }
 ]
}
</code></pre>

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

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

blocks|key|215244|text|2021年的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215245|215246|打开开发人员工具(Windows上的CTRL%2BSHIFT%2BI)|ordered-list-item|215247|单击“齿轮”图标。THe将出现新的设置窗口。|215248|215249|​|215250|📷|atomic|offset|length|215251|215252|215253|“自动打开弹出窗口的DevTools”现在位于"Preferences“部分下。|215254|215255|215256|215257|215258|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3e2adc1ad89f455dc0bd1259d2fd1c17.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/3bacf9852e00a59ff0986163ae2097d7.png^0|0|0|0|0|0|0|0|1|0|0|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1A|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|1B|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1D|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1E|8|@]|9|@$N|1F|O|1G|1|1H]]|A|$]]|$1|P|3|J|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|R|3|S|5|E|7|1K|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|U|3|J|5|6|7|1M|8|@]|9|@]|A|$]]|$1|V|3|L|5|M|7|1N|8|@]|9|@$N|1O|O|1P|1|1Q]]|A|$]]|$1|W|3|J|5|6|7|1R|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14|15|-4]]|16|$5|10|11|12|A|$13|17|15|-4]]]]

Answer for 2021:
<ol>
<li>Open the Developer Tool (CTRL+SHIFT+I on Windows)</li>
<li>Click the &quot;Gear&quot; icon. THe new Settings window will appear.</li>
</ol>
<a href="https://i.stack.imgur.com/8mvnU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8mvnU.png" alt="Settings" /></a>
<ol start="3">
<li>&quot;Auto-open DevTools for popups&quot; is now under &quot;Preferences&quot; section.</li>
</ol>
<a href="https://i.stack.imgur.com/BC7uZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BC7uZ.png" alt="actual location" /></a>

blocks|key|215110|text|我来这里是为了寻找类似的解决方案。我真的很想从一个新的选项卡中看到页面加载的chrome输出。(在我的例子中是表单提交)我实际使用的解决方案是修改表单目标属性，以便表单提交将出现在当前选项卡中。我能够捕获网络请求。问题解决了！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215111|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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!

blocks|key|2859823|text|任何希望在Visual+Studio中做到这一点的人，这篇Code+Project文章都会有所帮助。只需在参数框中添加"--auto-open-devtools-for-tabs“即可。在2017年工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2859824|entityMap|0|LINK|mutability|MUTABLE|url|https://www.codeproject.com/Tips/644059/Run-Debug-with-new-browser-session-in-Visual-Studi^0|T|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Anyone looking to do this inside Visual Studio, this <a href="https://www.codeproject.com/Tips/644059/Run-Debug-with-new-browser-session-in-Visual-Studi" rel="nofollow noreferrer">Code Project</a> article will help. Just add "--auto-open-devtools-for-tabs" in the arguments box. Works on 2017.

blocks|key|215457|text|从命令行运行chrome时使用--auto-open-devtools-for-tabs标志|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|215458|/Applications/Google\+Chrome.app/Contents/MacOS/Google\+Chrome+--auto-open-devtools-for-tab|215459|https://developers.google.com/web/tools/chrome-devtools/open#auto|215460|entityMap|0|LINK|mutability|MUTABLE|url^0|F|T|0|0|0|1T|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|J|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|I]]]]

Use <code>--auto-open-devtools-for-tabs</code> flag while running chrome from command line 

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

<a href="https://developers.google.com/web/tools/chrome-devtools/open#auto" rel="nofollow noreferrer">https://developers.google.com/web/tools/chrome-devtools/open#auto</a>

blocks|key|215117|text|是的，有一种你可以做到的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215118|215119|Right+click->Inspect->sources(tab)|ordered-list-item|215120|Towards++right会出现一个"pause+|215121|215122|“按钮|215123|215124|215125|📷|atomic|offset|length|215126|​|215127|我希望它能帮上忙！|215128|开发工具第二次加载automatically时，|215129|P.S:This用于第一个time.From|unordered-list-item|215130|215131|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3b6a09849a5f00de435be98d5558c89d.png|imageAlt^0|0|0|0|1|1|1|0|0|0|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1C|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|1D|8|@]|9|@]|A|$]]|$1|H|3|-4|5|E|7|1E|8|@]|9|@]|A|$]]|$1|I|3|J|5|E|7|1F|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1I|8|@]|9|@$P|1J|Q|1K|1|1L]]|A|$]]|$1|R|3|S|5|6|7|1M|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1N|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1O|8|@]|9|@]|A|$]]|$1|X|3|Y|5|Z|7|1P|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18|19|-4]]]]

Yep,there is a way you could do it

<ol>
<li>Right click->Inspect->sources(tab)</li>
<li>Towards Your right there will be a "pause script execution button"
<a href="https://i.stack.imgur.com/N2i6w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N2i6w.png" alt="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"></a></li>
</ol>

I hope it helps!Peace

<ul>
<li>P.S:This is for the first time.From the second time onwards the dev tool loads automatically</li>
</ul>

blocks|key|2859967|text|您可以打开固定视图设置并根据需要调整窗口。附加屏幕截图。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2859968|​|2859969|📷|atomic|offset|length|2859970|2859971|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/fc36e09248dae038e88687f8ce1f927c.png|imageAlt^0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@$G|V|H|W|1|X]]|A|$]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q|R|-4]]]]

You can open dock view settings and adjust the window as you want.
Screenshot attached.
<a href="https://i.stack.imgur.com/KXWzn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KXWzn.png" alt="Dock_view_seetings" /></a>

blocks|key|215418|text|您可以通过右下角的clicking+three,+vertical+dots在新窗口中打开开发工具(Chrome中的F12)，然后选择Open+as+Separate+Window。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|215419|entityMap^0|9|T|1M|3|1V|N|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

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

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?

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

Visual Studio

Windows

HTML5

MacOS

我有一个HTML5应用程序，通过单击一个链接在新窗口中打开。每次我想要记录网络通信以启动Developer tools时，我都会按下Shift + I，这让我有点厌倦，因为我总是需要它。我找不到在启动时始终启用开发人员工具的选项。有没有办法在中打开新窗口时自动打开Chrome ？

问打开新选项卡/新窗口时自动打开Chrome开发人员工具
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问打开新选项卡/新窗口时自动打开Chrome开发人员工具EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问打开新选项卡/新窗口时自动打开Chrome开发人员工具
EN