本方案的缺点

使用本方案需要以下步骤：

• 打开浏览器的远程调试功能。
• 安装一个浏览器插件，由项目提供，有以下辅助作用：
  • 快速打开单独的开发者工具，并不是按 F12 键打开的那个版本哟。
  • 自动插入与取消自定义的 debugger 语句。
  • 与标签页关联 —— 标签页关闭时自动关闭开发者工具等等。
• 需要点击插件打开新的开发者工具使用，不能使用按 F12 键显示的那个版本。
• 启动一个服务器 cdp server，由项目提供，它是最核心的部分。

上述操作可以在需要过 debugger 时再快速启用，如果能接受以上繁杂的步骤，可以继续阅读下文了。

2024-09-29 补充：现在发现此方案有一个最大的缺点，具体见评论区这篇回答：在 debugger 语句停留的时长。

可预见的解决方式如下：
发现 debugger 语句时，自动地在它的位置上下一个 Never pause here 的断点，退出调试时由 cdp server 自动清理这些断点。
我考虑了很久，是否有必要这样做，结合实际情况，或许这个缺点可以忽略不计？

项目的使用方式

本文以 Chrome 浏览器为例进行展示，Edge 浏览器的配置也是一样的。

基本配置

step 1

访问项目，获取源代码：Hosinoharu/SkipJSDebugger。在 Releases 中的文件根据后文说明按需求下载。

step 2

修改浏览器的启动参数为如下情形，然后打开浏览器。

 复制代码 隐藏代码
// chrome.exe --remote-debugging-port=9222 --remote-allow-origins=localhost

// --remote-debugging-port 启动远程调试端口，暂时定为 9222，后续可以手动修改
// --remote-allow-origins 远程调试时允许连接的来源，建议设置为 localhost。使用 * 运行任何来源

项目中提供了一个 powershell 脚本，位于 scripts\debug_browser.ps1，可以等到需要的时候再快速启动浏览器。不过使用之前需要填入本机浏览器的位置。

 复制代码 隐藏代码
# 找到脚本的这个位置，修改这两个变量的值为本机的浏览器的路径
$Edge = "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe"
$Chrome = "E:\Google\Chrome\Application\chrome.exe"

基本使用如下：

 复制代码 隐藏代码
# 首先修改 powershell 执行脚本的权限
Set-ExecutionPolicy RemoteSigned

# 然后按需执行下面任意一条命令打开浏览器，注意！执行 ps 脚本时需要加上路径哟
.\debug_browser.ps1             # 默认打开 Chrome 浏览器，远程调试端口为 9222
.\debug_browser.ps1 -Port 8888  # 默认打开 Chrome 浏览器，远程调试端口为 8888

.\debug_browser.ps1 Edge               # 打开 Edge 浏览器，远程调试端口为 9222
.\debug_browser.ps1 Edge -Port 8888    # 打开 Edge 浏览器，远程调试端口为 8888

step 3

手动添加插件 OpenDevtoolsPage，其位于项目根目录。在浏览器地址栏输入 chrome://extensions/ 打开界面，然后如下进行添加：

step 4

运行 cdp server，位于项目的 cdp_server 目录中，共有两个版本。

• Python 实现。最初的版本，使用此版本时，每次打开浏览器开发者工具时它都会发动时间法则，硬控我一秒，所以后续使用 Go 重写。如果没有 Go 环境，可以用这个版本。
• Go 实现。可以自己从源代码编译，也可以在 Releases 中下载编译好的版本 —— 仅限于 windows 10。

下图本机的处理效果。提交到 Github Releases 的文件 SHA256 hash：F96B7896A2ED14BC088DCB37B030F2C6A2B81E559FEE9DA632695B498C2E97EA

step 5

测试效果。先打开项目的 test/test_debugger.html 文件，然后按下述步骤测试：

然后关闭刚刚打开的开发者工具，刷新网页，继续下面的操作。

注：现在给插件换了个图标，所以和下图会有些区别。