一、基础配置与连接
1. 启动远程调试端口：找到Chrome安装路径（可在地址栏输入`chrome://version/`查看），运行命令`chrome.exe --remote-debugging-port=9222`。确保关闭其他Chrome窗口，避免端口冲突。记下终端显示的`webSocketDebuggerUrl`地址（如`ws://127.0.0.1:9222/devtools/browser/xxx`），后续用于连接。
2. 设置独立用户数据目录：添加参数`--user-data-dir="路径"`（如`D:\chrome_remote`），防止污染默认配置。此目录将存储远程调试产生的缓存、Cookie等数据。
二、开发工具使用与调试
1. 连接远程目标：在本地Chrome开发者工具（按`Ctrl+Shift+I`打开）中，点击“Remote Devices”面板，输入目标地址（如`ws://127.0.0.1:9222/devtools/browser/xxx`）并确认。若使用Puppeteer或Selenium，需在代码中配置`browserWSEndpoint`为相同地址。
2. 断点与日志调试：在“Sources”面板找到插件脚本文件，点击行号设置断点。使用`console.log()`输出关键变量，在“Console”面板查看日志。例如，调试内容脚本时，可注入`console.log('Content script loaded')`确认加载状态。
3. 监控网络请求：在“Network”面板刷新页面，查看插件发出的请求。检查状态码（如`500`表示服务器错误）、响应时间及数据格式。若请求失败，可复制URL到新标签页测试独立性。
三、高级功能与优化
1. 模拟移动设备：点击开发者工具左上角的“切换设备工具栏”，选择手机型号（如iPhone 14），测试插件在移动端的布局和性能。调整“Network”面板的网速模拟（如设置为3G），观察加载差异。
2. 性能分析与内存优化：在“Performance”面板录制操作，检查“Scripting”和“Rendering”耗时。若内存泄漏，使用“Memory”面板对比快照，清理未释放的全局变量（如`window.tempData = null`）。
3. 持久化存储调试：在“Application”面板查看`localStorage`或`IndexedDB`数据，验证插件的存储逻辑。例如，检查是否成功保存用户设置（如`chrome.storage.sync.set({key: value})`）。
四、常见问题解决
1. 端口被占用：若`9222`端口冲突，修改为其他未占用端口（如`9223`），并更新连接配置。
2. 跨域限制：远程调试时，部分跨域请求可能被拦截。在`manifest.json`中添加`"permissions": ["*://*/*"]`（谨慎使用），或通过服务器端设置CORS头解决。
3. 标签页管理：调试结束后，调用`await page.close()`关闭多余标签页，保留至少一个标签页防止浏览器自动退出。使用`browser.disconnect()`释放Puppeteer连接资源。