通过JavaScript编程方式自动打开Safari/Google Chrome开发者工具

Question

我正在寻找一种方法，可以从附加到网页的脚本中打开WebKit“开发者工具”。 我需要针对Google Chrome和Safari的解决方案，如果开发人员工具面板尚未打开，则会打开开发人员工具面板，并且（如果您能够找出如何）还会在打开时切换到特定的选项卡/部分。 （如果有人感兴趣，请使用案例：如果发生错误并且开发人员正在查看页面，则要打开console.log输出窗口；此特定页面将是一些JavaScript单元测试的输出。）

---

我正在对这个问题设置赏金，因为显然没有人得到了令人满意的答案，而且答案很棘手。除非你有一个真正的答案，同时满足以下两个条件，否则请不要回答：1）在两种浏览器中都有效，2）不需要私有扩展API，这些API无法从静态网页中使用。

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

- ELLIOTTCABLE

---

如果可能的话，就应该进行修复。网页不能访问浏览器的接口。你应该考虑编写一个插件或独立应用程序来解决这个问题。 - Pavel Strakhov

如果只能通过扩展来实现，那么这仍然是一个可接受的答案；只要提供了所有常见浏览器的方法，这样我就可以提供扩展包装器，在它们之间公开单个接口。 - ELLIOTTCABLE

与其打开开发者工具，你有没有想过在开发环境中注入一个弹出窗口，其中包含控制台日志输出？这就是我们所做的，无论是JS错误还是性能数据。在开发环境中运行时，我们会在页面底部注入一个小的弹出窗口，开发人员可以单击它以展开并查看日志，以及每个调用的服务器往返时间（常规回传和AJAX）。 - Matt Holmes

Riateche是正确的。你所询问的可能会方便代码调试，但它会给浏览器带来安全风险，即使使用插件或其他方法也是如此。浏览器并不足以满足你所要求的开发需求。你应该使用IDE来完成。 - user568109

Answer 1

简单来说：你不能。

开发工具并没有沙盒化（与任何网页不同），因此赋予沙盒化环境打开和控制非沙盒化环境的能力是一个重大安全设计缺陷。

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

- Mathieu Amiot

---

比任何其他东西都更接近。我看不出允许打开未经沙盒处理的环境会导致安全漏洞，尽管我从未建议允许控制是一个好主意。 - ELLIOTTCABLE

如果你可以打开，那么你也可以控制（因为这意味着你实际上可以访问代表开发面板的对象，因此可能会利用漏洞将数据注入其中）。 - Mathieu Amiot

Answer 2

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

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

设置

• 在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 repo为您提供前端UI。 （将路径调整为chromeServerProfile，以便成为系统中某个可写目录）。
• 打开示例页面（例如www.chromium.org）。
• 使用以下命令行标志之一运行Chrome Canary的第二个副本：--user-data-dir = / work / chromeClientProfile。打开http：// localhost：9222。在缩略图中，您将看到来自其他浏览器实例的示例页面。单击它以开始远程调试您的示例页面。
• 打开的DevTools Web页面是从第一个浏览器实例中的remote-debugging-frontend提供的，该实例从您的本地文件系统中的git repo中提供服务。像任何其他Web应用程序一样调试此Devtools Web页面并编辑其源代码。

我希望这是您所需的内容。

- user568109

---

这个答案是针对调试服务器端JavaScript代码的，据我所知，是吗？那与此无关：目标是从正在开发的网页中打开Chrome DevTools、FireBug等工具。也就是说，在出现错误时。 - ELLIOTTCABLE

这实际上是远程调试。您可以通过打开已启动服务器的URL来查看Dev Tools调试器。这是我能找到的最接近的方法。 - user568109

给那位点踩的用户。您能否留下评论解释一下为什么要点踩呢？ - user568109

Answer 3

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

唯一与您尝试做的事情相关的API是debugger命令，它只在开发工具已经打开的情况下切换到脚本面板。

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

如果是为正在开发该站点的开发人员服务，则最好只使用现有的开发人员工具手动设置断点或切换异常暂停。

如果是为最终用户而设计，请不要这样做。除非您的网站是专门为高技术Web开发人员设计的，否则如果开发人员工具突然弹出错误，您只会吓跑用户。

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

- Sergiu Dumitriu

---

X/Y 描述：用于客户端测试结果的网页。如果测试中出现错误，最好让页面自动为我打开开发者工具。 - ELLIOTTCABLE

为了教学目的，拥有一个可以按下打开开发工具的按钮会很酷，但肯定不是必需的。 - jtr13

Answer 4

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

但是，您可以设计一个Add-On/扩展程序或控制台API来完成相同的操作...针对特定的网站。

创建一个类似于this的Add-On以实现该要求。

您可以尝试发送键“CTRL”+SHIFT'+'I'，这可能适用于Chrome和FireFox（在IE中，您需要使用“F12”）

我在需要时使用它，因为此Add-On中的一些实用程序比内置工具更好。

编辑： 现在，Chrome已经有了许多新的进展source。

希望这可以帮助到您！

- MarmiK

Answer 5

这里有另一个答案，提出了一个解决方案以应对您所提到的使用情况/目标（检测错误、获取和显示控制台日志），而不是标题中所述的不可能实现的目标。

您可以创建并使用一个控制台包装器，并在您的代码中使用它 和/或者如果您使用/导入外部JS，则可以 monkey patch控制台函数，但您需要在加载它们之前应用它。

- Wis

Answer 6

很不喜欢回答这么老的问题，但惊讶地没有看到这个作为答案，所以我想在这里添加一下，以防将来有人需要。

假设您可以访问源代码，您可以在您感兴趣的第一行代码之前立即放置一个alert("open devtools");语句。此警报将为您提供打开DevTools并在清除警报之前在该第一行上设置断点的机会，从而允许代码继续运行并触发断点。

- Casey Chester