首页 文章

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

提问于
浏览 次
14

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

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

我显然是一个以前没有满意的人，答案是毛茸茸的 . 请不要回答它，除非你有一个真正的答案：1）在两种浏览器中都有效，2）不能在静态网页上工作 .

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

javascript google-chrome safari webkit developer-tools

5 回答

  • 11

    简单地说：你不能 .

    开发工具不是沙箱（与任何网页不同），因此授予 sandboxed 环境打开和控制 unsandboxed 环境的权力是 major security design flaw .

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

    回复于
  • 0

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

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

    设置

    • 在Mac OS / Windows上安装Chrome Canary或从Linux上的Chromium continuous builds档案下载最新的Chromium版本

    • 克隆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应用程序一样编辑其源代码 .

    我希望这是你需要的 .

    回复于
  • 0

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

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

    但是你是谁在尝试开发此功能？

    如果最好只手动使用现有的开发人员工具，通过设置断点或暂停异常切换 .

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

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

    回复于
  • 8

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

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

    回复于
  • 4

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

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

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

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

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

    编辑：现在Chrome已经推出了许多新进展source .

    我希望这有帮助！

    回复于

相关问题