如何将chrome devtool放入浏览器？答案

【问题标题】：how to put chrome devtool in browser?如何将chrome devtool放入浏览器？
【发布时间】：2019-03-03 10:04:41
【问题描述】：

我正在为一个由 chrome 无头驱动 puppeteer 运行的项目工作，我最近发现一个网站 (https://chrome.browserless.io/) 可以在浏览器中显示 puppeteer 进程。该网站附加了一个看起来像魔术的 chrome devtoll。

我试图弄清楚是如何工作的，我发现这个网站注入了一个 chrome devtool iframe，并且 url 通常如下所示：

https://chrome-devtools-frontend.appspot.com/serve_file/@7f3cdc3f76faecc6425814688e3b2b71bf1630a4/inspector.html?wss=chrome.browserless.io/devtools/page/(4BDC5841A823B95BF9B6107801819A31)&remoteFrontend=true

我认为inspector.html 之后的版本指的是puppeteer 代码，但我不知道它是如何工作的。

我认为这是对DevTools Protocol 的某种暗示。我搜索了文档，但没有找到有关如何将 chrome devtool iframe 放入浏览器的信息。

有人知道怎么做吗？或任何有关此的文件？

【问题讨论】：

标签： google-chrome-devtools puppeteer

【解决方案1】：

您在问题中提到的Browserless Chrome Debugger 在左侧部分嵌入了CodeMirror 文本编辑器的实例。

在右侧部分，存在一个 iframe 元素，用于显示您执行的代码的结果。

简单地说，您可以模拟此类行为，并允许用户通过以下一系列步骤直接从您的网站执行 Puppeteer 代码：

Sandbox a section of your system 带有系统容器管理器，例如 LXD。
Install Node.js, NPM, and Puppeteer。
安装基于 Web 的代码编辑器，例如 CodeMirror，并将其嵌入网页中。
验证 AJAX 请求并将代码从文本编辑器发送到您的沙盒服务器。
清理代码，然后将代码传递给 Puppeteer。
在客户端的 AJAX 请求中将结果返回给回调函数。
在将结果显示在iframe 中之前对其进行格式化和清理。

注意：这是对这一概念的幼稚植入，旨在解释实现问题目标所需的基本必要性。

确保您遵循所有普遍推荐的安全做法。

【讨论】：