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

Question

我正在寻找一种从附加到网页的脚本中打开WebKit“开发人员工具”的方法。我需要Google Chrome和Safari的解决方案，如果尚未打开，则会打开开发人员工具窗格，并且（希望，如果你能弄明白的话）也会在打开时切换到所述窗格的特定标签/部分。 / p>

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

---

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

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

Answer 1

简单地说：你不能。

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

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

Answer 2

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

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

设置

• 在Mac OS / Windows上安装Chrome Canary或从Linux上的Chromium continuous builds档案下载最新的Chromium版本
• 克隆来自https://chromium.googlesource.com/chromium/blink.git
的Blink git repo
• 设置一个本地Web服务器，该服务器将在某个端口上提供来自WebKit / Source / WebCore / inspector的文件（8090）

运行

• 使用以下命令行标志运行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应用程序一样编辑其源代码。

我希望这是你需要的。

Answer 3

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

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

但是你想为谁开发这个功能？

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

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

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

Answer 4

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

但是，你可以设计一个附加/扩展或控制台API来为特定网站做同样的事情。

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

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

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

编辑： 现在Chrome已推出许多新进展source。

我希望这有帮助！

Answer 5

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

您可以制作并使用控制台包装器并在代码中使用它 和/或您can monkey patch如果使用/ import外部js，控制台将起作用，但您需要在加载之前应用它。