22

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

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

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

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

4

5 回答 5

14

简单地说：你不能。

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

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

于 2013-06-04T06:52:48.577 回答
10

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

我希望这是你需要的。

于 2013-05-31T11:01:50.500 回答
5

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

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

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

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

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

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

于 2013-06-01T18:16:52.997 回答
0

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

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

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

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

我在需要时使用它，因为此附加组件中的少数实用程序使用起来比内置的更好。

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

我希望这有帮助！

于 2013-06-04T05:23:35.767 回答
0

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

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

于 2018-05-17T12:08:29.250 回答