打开新标签页/新窗口时自动打开 Chrome 开发者工具

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

这对我有用。

https://i.stack.imgur.com/dHH3a.png

---

更新 2：

请参阅this answer。 - 2019-11-05

如果它们在您打开它们的位置打开，您现在还可以让它在弹出窗口中自动打开开发人员工具。例如，如果您没有打开开发工具并看到一个弹出窗口，则它不会使用开发工具打开。但是如果你打开了开发工具然后你点击了一些东西，弹出窗口将自动打开开发工具。

更新：

时间变了，您现在可以像 this answer 一样使用 --auto-open-devtools-for-tabs – Wouter Huysentruit 5 月 18 日 11:08

操作：

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

浏览 Google 产品论坛，Chrome 中似乎没有内置的方法可以做到这一点。如上所述，您必须使用击键解决方案或 F12。

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

---

为此有一个命令行开关：--auto-open-devtools-for-tabs

因此，对于 Google Chrome 上的属性，请使用以下内容：

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

这是一个有用的链接：chromium-command-line-switches

---

在 Mac 上：退出 Chrome，然后在终端窗口中运行以下命令：

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

---

在您启用的 Chrome DevTools 设置下：

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

---

在“开发者工具”窗口可见的情况下，单击菜单图标（右上角的三个垂直点），然后单击“设置”。

https://i.stack.imgur.com/zdvQM.png

在 Dev Tools 下，选中 Auto-open DevTools for popups 选项

https://i.stack.imgur.com/ryYrA.png

---

F12 比 Ctrl+Shift+I 更容易

---

如果您使用 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 也会打开您的应用程序和控制台选项卡。

---

2021年的答案：

打开开发工具（在 Windows 上为 CTRL+SHIFT+I）单击“齿轮”图标。将出现新的设置窗口。

https://i.stack.imgur.com/8mvnU.png

“自动打开弹出窗口的 DevTools”现在位于“首选项”部分下。

https://i.stack.imgur.com/BC7uZ.png

---

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

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

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

---

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

---

任何希望在 Visual Studio 中执行此操作的人，这篇Code Project文章都会有所帮助。只需在参数框中添加“--auto-open-devtools-for-tabs”。 2017年工作。

---

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

右键单击->检查->源（选项卡）向您的右侧将有一个“暂停脚本执行按钮”

我希望它有帮助！和平

PS：这是第一次。从第二次开始，开发工具会自动加载

---

您可以打开停靠视图设置并根据需要调整窗口。附上截图。

https://i.stack.imgur.com/KXWzn.png

---

您可以通过右下角的 clicking three, vertical dots 在新窗口中打开开发工具（Chrome 中的 F12），然后选择 Open as Separate Window。

---