利用Sublime Text的WebInspector插件进行轻量级网页前端断点联调-sublime-PHP中文网

chrome必须显式启动--remote-debugging-port=9222，sublimewebinspector依赖cdp连接localhost:9222，未带参数启动会导致no targets found等错误；需关闭所有chrome进程并用对应系统命令行启动，端口、路径、sourcemap配置须严格匹配。

利用sublime text的webinspector插件进行轻量级网页前端断点联调

Chrome 必须显式启动 --remote-debugging-port=9222

SublimeWebInspector 不是独立调试器，它只是 Chrome DevTools 协议（CDP）的前端界面。插件启动后会尝试连接 localhost:9222，但 Chrome 默认完全不开启这个端口。

常见错误现象：No targets found、Connection refused、命令面板里 SWI: Start Debugging 点击后无响应 —— 90% 是因为 Chrome 没带参数启动。

关掉所有 Chrome 进程（包括右下角任务栏里的隐藏实例）
Windows：用命令提示符运行 chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\temp\swi
macOS：终端执行 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/swi
Linux：运行 google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/swi
验证是否成功：浏览器访问 http://localhost:9222/json，能看到 JSON 数组即表示通了

swi.sublime-settings 配置项必须严格匹配 Chrome 启动参数

插件读取配置后直接发起 WebSocket 连接，写错一个字符就失败，且错误提示极不友好。

关键配置项和易错点：

chrome_remote_port：必须和你启动 Chrome 时的端口号完全一致（默认 9222，不是 9223 或 92222）
chrome_executable：macOS/Linux 上不能填 Google Chrome，要填绝对路径，比如 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
reload_on_save 设为 true 时，保存 JS 文件会触发页面刷新 —— 但只对当前 Chrome tab 中已打开的目标页面生效；如果页面没打开，就静默失败，建议初期设为 false
debug_mode 设为 true 可在 Sublime 控制台看到连接日志，排查连接问题时必开

断点只对 sourceMap 映射后的原始代码生效

你在 Sublime 里点的行号，必须能通过 sourceMap 正确映射到 Chrome 实际执行的 JS 文件位置，否则断点不会触发。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

典型失效场景：

TS 编译后 JS 文件末尾没有 //# sourceMappingURL=xxx.js.map 注释
map 文件路径错误或 404（比如部署后 map 被忽略、路径未配对）
Chrome DevTools 的 “Settings → Preferences → Sources → Enable JavaScript source maps” 未勾选（即使 Sublime 插件开了，这里也得开）
使用 Webpack/Vite 时未配置 devtool: 'source-map' 或等效选项

验证方式：在 Chrome DevTools 的 Sources 面板里，展开左侧面板，看能否看到你的原始 .ts/.jsx 文件 —— 如果看不到，SublimeWebInspector 也看不到，断点必然无效。

F8 / F10 / F11 快捷键依赖调试会话已建立且暂停中

这些快捷键不是全局可用的。它们只在调试会话处于“已连接 + 当前有暂停点”状态下才起作用。

常见误操作：

按 F8 想“开始调试”，但它实际是 Resume（继续执行），不是启动命令 —— 启动要用 SWI: Start Debugging 或 F9（Toggle Breakpoint）先打点再触发
F10（Step over）和 F11（Step in）在代码未暂停时按下无反应，也不会报错，容易误以为快捷键失灵
断点图标状态要留意：breakpoint_active.png（红色）才有效；灰色的是 breakpoint_inactive.png，点击一下就能激活
单步退出（Shift+F11）只在函数内部暂停时可用，跳出后自动停在调用处