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

Posted 2023-02-22

技术标签:

【中文标题】打开新标签页/新窗口时自动打开 Chrome 开发者工具【英文标题】：Automatically open Chrome developer tools when new tab/new window is opened 【发布时间】：2012-08-26 02:29:38 【问题描述】：

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

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

【问题讨论】：

我也很想知道这一点。我发现的唯一方法是像这个人一样编辑源代码：[link]groups.google.com/forum/?fromgroups=#!topic/… 我已经很努力地搜索了，我能找到的最接近的是在开发工具中创建一个新的窗格，带有一个 Chrome 扩展。在 Python 中使用 SendKeys，您可以启动 Chrome 并发送 +^j 以模拟 Ctrl Shift J，但这仅适用于新实例；为了导航到给定的页面，您必须使用 selenium 或其他东西获得更多创意...... 是的，我也看到了这个变体，但是当您为每个打开的新标签打开开发工具时，它不适用。 Here's a guy 修改了源代码以添加此功能。它现在似乎已经过时了，但至少我们知道您的请求是可能的。 【参考方案1】：

在打开开发者工具时，在开发者工具窗口处于焦点的情况下，按 F1。这将打开一个设置页面。勾选“Auto-open DevTools for popups”。

这对我有用。

【讨论】：

这行得通，这正是 OP 所要求的，它应该被标记为正确答案 WebStorm 也不适用于我。页面打开，但没有开发工具。这可行，但“保留日志”选项始终未选中，如果弹出重定向它不会显示以前的网络请求。任何想法如何使其默认保留日志？这仅适用于特定的案例子集，请参阅bugs.chromium.org/p/chromium/issues/detail?id=410958#c87。这不是一个通用的解决方案。从带有 Chome 调试扩展的 VS Code 启动时不起作用。【参考方案2】：

更新 2：

见this answer。 - 2019-11-05

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

更新：

时间已经改变，您现在可以使用 --auto-open-devtools-for-tabs，如 this answer – Wouter Huysentruit 5 月 18 日 11:08

操作：

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

浏览 Google 产品论坛，Chrome 中似乎没有内置的方法来执行此操作。如上所述，您必须使用击键解决方案或 F12。

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

【讨论】：

@Seanny123：修复！如果您希望将此作为一项功能，请随时为这个 Chromium 错误加注星标：code.google.com/p/chromium/issues/detail?id=410958 @Chiperific，你说你在执行 Chrome 的启动字符串，但无法让它持续到新标签。但是，我在启动时只需要一个选项卡的这种行为。你能分享一下你只为一个标签做的方式吗？时间变了，你现在可以像this answer一样使用--auto-open-devtools-for-tabs 请考虑编辑您的答案。它已经过时但在 SO 中仍然非常明显。 OS X 的完整命令是（首先退出任何正在运行的 Chrome 进程）：/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs【参考方案3】：

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

【讨论】：

这绝对有效，现在应该被标记为接受的答案。检查铬Version 50.0.2661.102 Ubuntu 15.10 (64-bit) 并像这样打开它chromium-browser --auto-open-devtools-for-tabs 这不适用于 Windows 7 版本 51.0.2704.103 m OS X 的完整命令是（首先退出任何正在运行的 Chrome 进程）：/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs 不适用于版本 59.0.3071.115（官方构建）（64 位）我将命令行参数更新为：--auto-open-devtools-for-tabs --user-data-dir=c:\temp\chrome。这实际上告诉 Chrome 使用一个单独的目录来进行调试，并且为我做了这个伎俩【参考方案4】：

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

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

【讨论】：

澄清一下：这会打开带有auto-open-devtools-for-tabs 标志的Chrome。退出 Chrome 并使用正常的应用程序快捷方式重新打开它会打开没有设置标志的 Chrome。如果你想要一个快捷方式来打开带有这个标志的 Chrome 而不必打开终端窗口，你可以在 Automator 中创建一个工作流，添加一个“运行 Shell 脚本”项，然后粘贴上面的脚本。将工作流保存为应用程序将创建一个可点击的应用程序。在另一个线程中查看此答案：***.com/a/281455/1512790【参考方案5】：

在您启用的 Chrome DevTools 设置下：

在网络下 -> 保留日志在 DevTools -> Auto-open DevTools for popups 下

【讨论】：

国际海事组织的最佳答案很好的答案，但针对 linux 进行了解释：转到开发人员控制台。转到汉堡菜单。单击设置（或 f1）。在网络部分检查保留日志。在开发工具部分检查弹出窗口的自动打开开发工具在 Chrome 85 的 MacOS 上，它现在位于 Settings -> Global 部分。【参考方案6】：

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

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

【讨论】：

Chrome 版本 86 设置在同一个地方但命名不同，因此：设置 -> 首选项 -> 全局 -> 自动打开 DevTools 以弹出窗口。【参考方案7】：

F12 比 Ctrl+Shift+I 更简单

【讨论】：

如果您使用的是 Windows 或 Linux 在 macbook 上按 f12，或者 pro 必须按 fn+f12（左下极端 + 右上角极端），这对大多数键盘用户来说并不方便在 linux 上运行良好...另一个切换的理由。在 Mac Pro 上做的，它并不完美，但仍然比 Apple OS 好得多【参考方案8】：

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

【讨论】：

【参考方案9】：

2021 年的答案：

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

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

【讨论】：

【参考方案10】：

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

【讨论】：

【参考方案11】：

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

【讨论】：

如果代码项目页面消失：您转到执行下拉菜单，选择浏览方式...，添加...，程序类似于：C:\Program Files (x86) \Google\Chrome\Application\chrome.exe 和参数：--auto-open-devtools-for-tabs -incognito（隐身是可选的）【参考方案12】：

从命令行运行 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

【讨论】：

谢谢，在我的电脑上可以。前提是必须先关闭所有对应的浏览器进程。【参考方案13】：

是的，你有办法做到这一点

右键->Inspect->sources(tab)

在你的右边会有一个“暂停脚本执行按钮”

希望对你有帮助！和平

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

【讨论】：

【参考方案14】：