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

IT技术 javascript google-chrome safari webkit developer-tools
2021-01-23 11:40:15

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

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

我在这个问题上悬赏，因为这显然是一个以前没有人满意地回答过的问题，而且答案是毛茸茸的。请不要回答它，除非你有一个真正的答案：1) 在两种浏览器中都有效，2) 不需要在静态网页上不起作用的私有扩展 API。

请参阅（相关，但特定于 Chrome 和扩展程序）：我可以从 Google Chrome 扩展程序以编程方式打开 devtools 吗？

5个回答

简单地说：你不能。

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

我希望这回答了你的问题 ：-）

@elliottcable 如果您可以打开，您也可以控制（因为这意味着您可以实际访问代表开发面板的对象，因此可能会利用漏洞在其中注入数据）。
2021-03-28 11:40:15
比什么都近。不过，我看不出允许打开未经过沙盒处理的环境会有什么安全漏洞。（如果这是个好主意，我从不建议允许控制。）
2021-04-02 11:40:15

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

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

配置

  • 在 Mac OS/Windows 上安装 Chrome Canary 或从 Linux 上的 Chromium 连续构建存档下载最新的 Chromium 构建
  • 从https://chromium.googlesource.com/chromium/blink.git克隆 Blink git repo
  • 设置一个本地 Web 服务器，该服务器将在某个端口 (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 存储库提供前端 UI。（将 chromeServerProfile 的路径调整为系统中的某个可写目录）。
  • 打开示例页面（例如 www.chromium.org）。
  • 使用命令行标志运行 Chrome Canary 的第二个副本：--user-data-dir=/work/chromeClientProfile。打开http://localhost:9222。在缩略图中，您将看到来自其他浏览器实例的示例页面。单击它以开始远程调试您的示例页面。
  • 打开的 DevTools 网页由第一个浏览器实例中的 remote-debugging-frontend 提供，该浏览器实例从您的本地文件系统的 git repo 提供。调试此 Devtools 网页并像编辑任何其他 Web 应用程序一样编辑其源代码。

我希望这就是你所需要的。

其实就是远程调试。您可以通过打开已启动服务器的 URL 来查看 Dev Tools 调试器。这是我能找到的最接近的。
2021-03-22 11:40:15
据我所知，这个答案用于调试服务器端 JavaScript 代码，不是吗？这是无关的：目标是从开发中的网页中打开 Chrome DevTools、FireBug 等。即当出现错误时。
2021-04-05 11:40:15
给downvoter。你能发表评论来解释downvote。
2021-04-05 11:40:15

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

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

但是您要为谁开发此功能？

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

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

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

X/Y 描述：一些客户端测试结果的网页。如果测试中出现错误，最好让页面为我打开开发人员工具。
2021-03-29 11:40:15
出于教学目的，有一个按钮可以用来打开 devtools 会很酷，但肯定不是必需的。
2021-03-30 11:40:15

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

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

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

但是，您可以设计一个附加组件/扩展程序或控制台 API 来为特定站点执行相同的操作。

创建一个像这样的附加组件来实现该要求。

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

我在需要时使用它，因为在这个附加使用中使用的工具很少，可以比内置的更好地工作。

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

我希望这有帮助！

其它你可能感兴趣的问题
上一篇为什么在 nodejs 的 for 循环中 let 比 var 慢？ 下一篇即使重新选择相同的选项，也为选择运行更改事件