319

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

在 Chrome 中打开新窗口时，有什么方法可以自动打开开发者工具？

4

15 回答 15

289

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

这对我有用。

截屏

于 2016-07-14T05:37:12.970 回答
111

更新 2：

看到这个答案。- 2019-11-05

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

更新：

时间变了，您现在可以在此答案中使用 --auto-open-devtools-for-tabs – Wouter Huysentruit 5 月 18 日 11:08

操作：

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

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

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

于 2012-12-06T16:00:48.980 回答
107

为此有一个命令行开关：--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

于 2016-04-30T16:33:01.723 回答
34

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

open -a "Google Chrome" --args --auto-open-devtools-for-tabs
于 2017-07-26T14:12:04.283 回答
22

在您启用的 Chrome DevTools 设置下：

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

于 2017-11-03T19:45:53.527 回答
17

在 Developer Tools 窗口可见的情况下，单击菜单图标（右上角的三个垂直点），然后单击Settings。

环境

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

设置细节

于 2020-01-23T05:24:31.963 回答
9

F12 比 Ctrl+Shift+I 更容易

于 2012-10-25T09:04:44.953 回答
7

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

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

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

于 2019-01-27T08:33:26.000 回答
6

2021年的答案：

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

设置

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

实际位置

于 2021-11-05T09:45:18.227 回答
4

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

于 2015-01-04T22:09:03.417 回答
4

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

于 2018-01-23T19:50:37.757 回答
4

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

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

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

于 2020-04-14T15:01:51.847 回答
1

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

  1. 右键单击->检查->源（选项卡）

  2. 在你的右边会有一个“暂停脚本执行按钮” 此链接指向的图像中突出显示的按钮是脚本执行按钮，可以根据需要暂停或播放。自己尝试

我希望它有帮助！和平

  • PS：这是第一次。从第二次开始，开发工具会自动加载
于 2016-03-29T15:03:39.287 回答
-2

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

Dock_view_seetings

于 2021-11-17T04:42:14.580 回答
-6

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

于 2018-05-25T16:07:52.580 回答