自动打开Chrome开发工具时，新选项卡/新窗口打开

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

有没有办法打开开发人员工具自动当新窗口打开在Chrome?

261183 次浏览
小开

F12比Ctrl+Shift+I简单

小开
最佳答案

更新2:

参见这个答案。- 2019-11-05

你现在也可以让它在弹出窗口中自动打开开发人员工具，如果它们是打开它们的地方。例如，如果你没有打开开发工具，你得到一个弹出窗口，它不会打开与开发工具。但是如果你打开了开发工具，然后你点击一些东西，弹出窗口会自动打开开发工具。

更新:

时间已经改变，你现在可以使用——auto-open-devtools-for-tabs，如这个答案 - Wouter Huysentruit 5月18日11:08

人事处:

我在Chrome执行时使用了启动字符串，但不能让它持续到新选项卡 我还考虑了一个已定义的PATH方法，可以从提示符调用它。这可以通过SendKeys命令实现，但同样只能在新实例上实现。并且DevTools不会持久化到新选项卡

浏览谷歌产品论坛，似乎没有一个内置的方式来做到这一点在Chrome。你必须使用一个按键解决方案或F12如上所述。

我推荐它作为一个功能。我知道我也不是第一个。

小开

我来这里是为了寻找类似的解决方案。我真的很想看到chrome输出页面负载从一个新的选项卡。我实际使用的解决方案是修改表单目标属性，以便表单提交发生在当前选项卡中。我能够捕获网络请求。问题解决了!

小开

是的，有一种方法可以做到

  1. 点击右键- >检查- >来源(选项卡)

  2. 在你的右边会有一个“暂停脚本执行按钮” 李此链接所指向的图像中突出显示的按钮是脚本执行按钮，可以根据需要暂停或播放。自己试试”></a> < / p > < / > </ol> <p>我希望这能有所帮助!和平</p> <ul> <li>附注:这是第一次。从第二次开始，开发工具自动加载</li> </ul></div> </div> </div> </div> </div> <div class=

    小开

    这里有一个命令行开关:--auto-open-devtools-for-tabs

    所以对于谷歌Chrome浏览器的属性，使用这样的东西:

    "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
    这里有一个有用的链接: chromium-command-line-switches < / p >
小开

打开开发人员工具时，以开发人员工具窗口为焦点，按F1。这将打开一个设置页面。检查“自动打开弹出的DevTools”。

这对我很管用。

截图

小开

Mac系统:退出Chrome，然后在终端窗口执行如下命令:

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

在Chrome DevTools设置下启用:

Under Network ->保存日志

. DevTools ->自动打开弹出的DevTools
小开

任何想在Visual Studio中实现这个功能的人，这篇代码项目文章将会有所帮助。只需在参数框中添加“——auto-open-devtools-for-tabs”。2017年生效。

小开

你可以通过右下角的clicking three, vertical dots在新窗口中打开Dev Tools (Chrome中的F12)，并选择Open as Separate Window。

小开

如果你使用Visual Studio Code (vscode)，使用非常流行的vscode chrome调试扩展(https://github.com/Microsoft/vscode-chrome-debug)，你可以设置一个启动配置文件launch.json，并指定在调试会话期间打开开发人员工具。

这是我用于React项目的launch.json:

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

重要的一行是"runtimeArgs": ["--auto-open-devtools-for-tabs"],

从vscode你现在可以输入F5, Chrome打开你的应用程序和控制台选项卡。

小开

在开发人员工具窗口可见的情况下，单击菜单图标(右上角的三个垂直点)并单击设置。

Setting

在开发工具下，检查自动打开弹出的DevTools选项

setting details

小开

从命令行运行chrome时使用--auto-open-devtools-for-tabs标志

/应用程序/谷歌\ Chrome。app/Contents/MacOS/谷歌\ Chrome——auto-open-devtools-for-tabs

https://developers.google.com/web/tools/chrome-devtools/open#auto

小开

2021年的答案:

  1. 打开开发人员工具(Windows下按CTRL+SHIFT+I)
  2. 点击“齿轮”;图标。将出现新的设置窗口。

Settings

  1. “popup "自动打开DevTools;现在在“首选”;部分。

实际位置

小开

您可以打开码头视图设置，并根据需要调整窗口。 截图。< / p >

Dock_view_seetings

小开

Windows:

  1. 右键单击你的谷歌Chrome快捷方式
  2. 属性
  3. 将Target更改为:“C: \ Program Files \谷歌\ \程序\ chrome.exe"铬;——auto-open-devtools-for-tabs
  4. 单击ok
  5. 您需要关闭当前所有chrome实例&在任务管理器中结束chrome进程。或重启电脑。

提交答案