从 JavaScript 以编程方式打开 Safari / Google Chrome 开发人员工具

Posted 2023-02-15

【中文标题】从 JavaScript 以编程方式打开 Safari / Google Chrome 开发人员工具

【英文标题】：Open Safari / Google Chrome developer tools programmatically from JavaScript

【发布时间】：2013-05-15 15:34:25

【问题描述】：

我正在寻找一种从附加到网页的脚本中打开 WebKit“开发者工具”的方法。我需要 Google Chrome 和 Safari 的解决方案，如果它尚未打开，它将打开开发者工具窗格，并且（希望，如果你能弄清楚如何）在打开时也切换到所述窗格的特定选项卡/部分。

（用例，如果有人感兴趣：如果出现错误并且开发人员正在查看页面，我想打开console.log 输出窗口；这个特定页面将是一些 javascript 单元测试的输出.)

---

我在这个问题上设置了一个赏金，因为它显然是一个以前没有得到任何人满意的答案，而答案是一个毛茸茸的。请不要回答它，除非您有一个真正的答案：1) 在 两种浏览器 中都可以工作，并且 2) 不需要私有扩展 API，这些 API 不会从静态网页工作。

请参阅（相关但特定于 Chrome 和扩展程序）：Can I programmatically open the devtools from a Google Chrome extension?

【问题讨论】：

如果可能的话，应该修复它。网页不得访问浏览器的界面。您应该考虑为此编写扩展程序或独立应用程序。

如果通过扩展这样做是可能的，那仍然是一个可以接受的答案；只要为所有常见浏览器提供方法，我就可以提供扩展垫片，在所有浏览器中公开单个接口。

在您的开发环境中，您是否想过简单地注入一个带有控制台日志输出的弹出窗口，而不是打开开发人员工具？对于 JS 错误和性能数据，这就是我们所做的。在开发环境中运行时，我们在页面底部注入一个小弹出窗口，开发人员可以单击它来展开它并查看日志以及每次调用到服务器的往返时间（常规回发和 AJAX )。

Riateche 是对的。您提出的问题可能会简化代码的调试，但它会给浏览器带来安全风险，即使使用插件或任何其他方法也是如此。浏览器不足以满足您所要求的开发需求。您应该为此使用 IDE。

你说你需要它，但我怀疑它。

【参考方案1】：

不，任何安全浏览器都不允许脚本打开扩展程序，因为这会导致不安全。

但是，您可以设计一个插件/扩展程序或控制台 API 来为特定站点做同样的事情。

创建一个像 this 这样的插件来满足这个要求。

您可以尝试发送键 'CTRL' + SHIFT' + 'I' 可能适用于任何 FireFox 的 Chrome（在 I.E 中，您需要使用 'F12'

我在需要时使用它，因为此插件中的一些实用程序使用起来比内置的更好。

编辑： 现在一天，Chrome 有了许多新的进步source。

我希望这会有所帮助！

【参考方案2】：

这是另一个答案，它为您提到的用例/目标（检测错误、获取和显示控制台日志）提出了解决方案，而不是标题中不可能的目标。

您可以制作和使用控制台包装器并在您的代码中使用它 和/或你canmonkey patch控制台功能，如果你使用/导入外部js，但你需要在加载它们之前应用它。

【参考方案3】：

简单地说：你不能。

开发工具没有沙盒（与任何网页不同），因此授予沙盒环境打开和控制非沙盒环境的能力是主要安全性设计缺陷。

我希望这能回答你的问题:-)

【讨论】：

比其他任何东西都更接近。不过，我看不出允许 opening 非沙盒环境是一个安全漏洞。 （如果这是个好主意，我从不建议允许控制。）

@elliottcable 如果你可以打开，你也可以控制（因为这意味着你可以实际访问代表开发面板的对象，因此可能会利用漏洞向其中注入数据）。跨度>

【参考方案4】：

除了通过主要提供日志记录工具的Console API 之外，无法从页内脚本控制 Web 开发人员工具。让脚本控制更多内容将是一个严重的安全问题，因为它会允许网页控制浏览器的某些部分。

与您正在尝试执行的操作远程相关的唯一 API 是 debugger 命令，仅当开发人员工具已打开时才会切换到脚本窗格。

但是您打算为谁开发此功能？

如果是针对在网站上工作的开发人员，那么最好手动使用现有的开发人员工具，通过设置断点或异常暂停切换。

如果是针对最终用户，不要。除非您的网站应该由技术含量高的网络开发人员使用，否则只有当开发人员工具突然出现错误时，您才会吓跑用户。

如果你真的想显示错误，你可以实现自己的日志框架和错误报告 UI，它适用于基本的 JS，不依赖于特定的浏览器环境。

【讨论】：

X/Y 描述：一些客户端测试结果的网页。如果测试中出现错误，最好让页面打开开发人员工具for me。

出于教学目的，有一个按钮可以打开开发工具会很酷，但肯定不是必需的。

【参考方案5】：

您不能直接从您的网页使用 Chrome 的开发工具。它与浏览器捆绑在一起。

但是您可以像使用常规 Web 应用程序一样使用它。转到 Chrome 开发人员工具，然后转到 Contributing。您将找到有关为您的应用使用开发工具的帮助。

设置

在 Mac OS/Windows 上安装 Chrome Canary 或从 Linux 上的 Chromium 连续构建存档下载最新的 Chromium 构建 从https://chromium.googlesource.com/chromium/blink.git克隆Blink git repo 设置一个本地网络服务器，在某个端口 (8090) 上提供来自 WebKit/Source/WebCore/inspector 的文件

跑步

使用以下命令行标志运行一份 Chrome Canary 副本：--remote-debugging-port=9222 --user-data-dir=blink/chromeServerProfile --remote-debugging-frontend="http://localhost :8090/front_end/inspector.html”。这些标志使 Chrome 允许 websocket 连接到 localhost:9222 并从本地 git repo 提供前端 UI。 （将 chromeServerProfile 的路径调整为系统中的某个可写目录）。 打开一个示例页面（例如 www.chromium.org）。 使用命令行标志运行 Chrome Canary 的第二个副本：--user-data-dir=/work/chromeClientProfile。打开http://localhost:9222。在缩略图中，您将看到来自其他浏览器实例的示例页面。点击它开始远程调试您的示例页面。 打开的 DevTools 网页是从第一个浏览器实例中的远程调试前端提供的，它从本地文件系统的 git 存储库提供服务。调试此 Devtools 网页并像任何其他网络应用程序一样编辑其源代码。

我希望这是你需要的。

【讨论】：

这个答案是用于调试服务器端 JavaScript 代码，据我所知，不是吗？这无关紧要：目标是从正在开发的网页中打开 Chrome DevTools、FireBug 等。即出现错误时。

其实是远程调试。您可以通过打开已启动服务器的 URL 来查看开发工具调试器。这是我能找到的最接近的。

致反对者。您能否发表评论以解释否决票。