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

Question

我正在寻找一种从附加到网页的脚本打开WebKit"开发人员工具"的方法.我需要谷歌Chrome和Safari的解决方案,如果尚未打开,将打开开发人员工具窗格,并且(希望,如果你能弄明白的话)也可以在打开时切换到所述窗格的特定选项卡/部分.

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

我正在为这个问题设置一个赏金,因为它显然是一个以前没有得到任何人满意的回答,答案是毛茸茸的.请不要回答它,除非你有一个真正的答案:1)适用于两种浏览器,2)不需要私有扩展API,这些API不能在静态网页上运行.

Answer 1

简单地说:你做不到.

该开发工具不是沙盒(不同于任何网页),从而给予沙盒环境中打开和控制电源无沙箱防护环境是主要的安全设计缺陷.

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

Answer 2

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

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

在Mac OS/Windows上安装Chrome Canary或从Linux上的Chromium continuous builds档案下载最新的Chromium版本
Clone Blink git repo来自https://chromium.googlesource.com/chromium/blink.git
设置一个本地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

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

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

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

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

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

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