如何通过代码实现类似CodeSandbox的Chrome DevTools唤起功能？

先说明白：普通前端网页没法用JS直接打开Chrome原生开发者工具，这是浏览器的安全限制，防止恶意网站滥用。但CodeSandbox这类在线编辑器的调试功能，是靠**Chrome DevTools Protocol（CDP）**搭配自身的沙箱环境实现的，具体分几种情况：

1. 在线编辑器的专业方案（如CodeSandbox） #

这类平台不是直接唤起你本地的Chrome DevTools，而是：

• 服务器端运行隔离的浏览器沙箱实例，通过CDP协议对其进行控制。
• 将DevTools的前端界面嵌入到平台页面中，用户点击按钮时，直接展示这个内嵌的调试界面，与沙箱中的页面建立调试连接。
  这种方案必须依赖后端服务支持，仅靠前端JavaScript无法实现。

2. 基于Chrome DevTools Protocol（CDP）自行搭建 #

如果想自己搭建类似功能，核心步骤如下：

• 启动调试模式的Chrome实例：通过命令行启动Chrome时开启调试端口，示例命令：

  chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
  

• 通过CDP连接浏览器：在你的应用中通过WebSocket连接到ws://localhost:9222/devtools/browser/<浏览器ID>，发送调试指令。
• 嵌入DevTools前端：将Chrome官方的DevTools前端资源嵌入到页面中，通过CDP与后端的浏览器实例通信，即可实现自定义的调试唤起按钮。

3. 前端页面的简易替代方案（仅限特定场景） #

如果是在普通前端页面中，无法直接打开DevTools，但可以采用以下替代方式：

• 用debugger触发断点：给按钮绑定点击事件，执行debugger语句——若用户之前已打开过DevTools，页面会自动跳转到断点位置：

  document.querySelector('#debug-btn').addEventListener('click', () => {
    debugger;
  });
  

• 提示用户手动打开：点击按钮时提示用户使用快捷键（F12/ Ctrl+Shift+I / Cmd+Opt+I）打开DevTools，这是最稳妥的前端方案。

内容的提问来源于stack exchange，提问作者yakiler