如何在浏览器中放置chrome devtool？

Question

我正在为一个由chrome无头司机木偶操作员运行的项目工作，我最近发现一个网站（https://chrome.browserless.io/）可以在浏览器中显示木偶操作过程。这个网站附加了一个看起来像魔术的镀铬devtoll。

我试着找出工作原理，我发现这个网站注入了一个chrome devtool iframe，网址通常如下：

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

我认为在inspector.html之后的版本引用木偶操作员代码，但我不知道这是如何工作的。

我认为这是一种暗示DevTools Protocol的方法。我搜索文档但没有发现如何在浏览器中放置chrome devtool iframe。

有谁知道怎么做？或者关于这个的任何文件？

Answer 1

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

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

简而言之，您可以按照以下步骤模拟这种行为，并允许用户直接从您的网站执行Puppeteer代码：

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

  

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

     

确保遵循所有通常建议的安全性惯例。