Google chrome devtools 如何将ChromeDevTool放入浏览器？

我正在为一个由chrome无头驱动程序Puppeter运行的项目工作，最近我发现一个网站（）可以在浏览器中显示Puppeter进程。这个网站附加了一个看起来像魔术的ChromeDevToll

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

https://chrome-devtools-frontend.appspot.com/serve_file/@7f3cdc3f76faecc6425814688e3b2b71bf1630a4/inspector.html？wss=chrome.browserless.io/devtools/page/（4bdc5841a823b95bf9b610701819a31）和remoteFrontend=true

我认为inspector.html之后的版本指的是木偶师代码，但我不知道这是如何工作的

我认为这是一种暗示结束的方法。我搜索了文档，但没有找到关于如何将chrome devtool iframe放入浏览器的任何信息

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

您在问题中提到的文本编辑器实例嵌入在左侧部分

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

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

• 使用系统容器管理器，例如
• 安装基于web的代码编辑器，如，并将其嵌入网页
• 验证AJAX请求，并将代码从文本编辑器发送到您的沙盒服务器
• 清理代码，然后将代码传递给木偶演员
• 将结果返回到客户端AJAX请求中的回调函数
• 格式化并清理结果，然后再将其显示在文件中

注意：这是对这一概念的天真植入，旨在解释实现问题目标所需的基本条件

确保遵循所有一般推荐的安全实践