Chrome DevTools 协议、扩展 Manifest V3 与防止常见自动化失败的调试模式。
Chrome DevTools 协议 (CDP). 获取标签 WebSocket URL 首先: 永远不要直接连接到 ws://localhost:9222/d
功能概述
Chrome DevTools 协议 (CDP). 获取标签 WebSocket URL 首先: 永远不要直接连接到 ws://localhost:9222/d是一项面向实际任务的技能，主要用于Fetch http://localhost:9222/json/list 并使用webSocketDebuggerUr。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
- 实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；
使用与执行
若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；
结果检查与注意事项
涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。
Chrome DevTools 协议（CDP）
首先获取标签页的 WebSocket URL：切勿直接连接 ws://localhost:9222/devtools/browser。应请求 http://localhost:9222/json/list，并从活跃标签页中提取 webSocketDebuggerUrl。
使用前需启用对应域（Domain）：在调用任何 Runtime.evaluate 或 Page.navigate 命令前，必须先调用 Runtime.enable 和 Page.enable。
CDP 是异步的：发送下一条命令前，须等待上一条命令的响应。建议使用基于 Promise 的封装，并通过响应 ID 进行追踪。
高 DPI 屏幕截屏：在 Page.captureScreenshot 参数中添加 fromSurface: true 和 scale: 2，以适配 Retina 显示屏。
响应体需单独获取：Network.responseReceived 事件不包含响应体内容。应在响应完成之后，使用该响应的 requestId 调用 Network.getResponseBody 获取响应体。
Chrome 扩展清单文件（Manifest V3）
权限拆分：使用 permissions 声明 API 权限，使用 host_permissions 声明主机（URL）权限。切勿在 permissions 中使用 http://*/*。
服务工作线程（Service Worker）会终止：无法维持持久状态。请使用 chrome.storage.local 替代全局变量；使用 chrome.alarms 替代 setInterval。
内容脚本（Content Script）隔离：无法访问页面全局对象。如需在页面上下文中执行代码，请使用 chrome.scripting.executeScript 并传入 func；如需内容脚本与页面间通信，请使用 window.postMessage。
存储操作是异步的：chrome.storage.local.get() 返回的是 Promise 而非原始数据，务必使用 await；同时需妥善处理 QUOTA_EXCEEDED 错误。
上下文检测
准确识别 Chrome 浏览器（而非 Edge/Brave）：检查 window.chrome && navigator.vendor === "Google Inc."，并排除 Opera 和 Edge。
扩展上下文类型判断：
chrome.runtime.id存在 → 内容脚本（content script）chrome.runtime.getManifest存在 → 弹出页（popup）、后台页（background）或选项页（options）chrome.loadTimes存在但无 runtime 对象 → 普通 Chrome 网页
清单版本检测：将 chrome.runtime.getManifest() 包裹在 try-catch 中调用；Manifest V3 使用 chrome.action，V2 使用 chrome.browserAction。
性能调试
内存 API 的条件检查：访问 performance.memory.usedJSHeapSize 前，需先确认 'memory' in performance 为真。
使用性能标记（Performance Marks）：通过 performance.mark() 和 performance.measure() 实现子帧级计时；使用后应及时清除标记，防止内存泄漏。
布局抖动（Layout Thrashing）检测：使用 PerformanceObserver，监听类型设为 entryTypes: ['measure', 'paint', 'largest-contentful-paint']；对耗时超过 16.67ms 的条目进行标记。
网络调试
导航前拦截资源：应在调用 Page.navigate 之前 调用 Network.setBlockedURLs，而非之后。
请求拦截：使用 Network.setRequestInterception 并设置 requestStage: 'Request' 以实现细粒度控制；返回 errorReason: 'BlockedByClient' 即可阻断请求。
安全上下文
混合内容（Mixed Content）：HTTPS 页面不可加载 HTTP 资源。请比对 location.protocol 与资源 URL 的协议是否一致。
CORS 错误：跨域 fetch 抛出 TypeError 通常表示 CORS 问题。请在 DevTools 的 Network 标签页中查看具体错误详情。
需处于安全上下文：文件系统访问 API（File System Access API）、剪贴板 API（Clipboard API）等要求 window.isSecureContext === true，且操作需由用户手势触发。
热门AI工具
相关专题
本专题介绍Gradle插件开发的基本流程，涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法，帮助你理解插件如何组织构建逻辑，减少多个项目之间的重复配置。
0
2026.10.22
本专题介绍Gradle Wrapper的基本作用，涵盖文件组成、生成方法、版本配置和任务调用，帮助你理解项目如何使用指定的Gradle版本，减少不同开发环境带来的构建差异。
0
2026.10.22
本专题整理Golangci-lint常用Linters的用途与配置方法，覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查，帮助项目合理选规则。
0
2026.10.22
本专题介绍Gradle Java项目构建方法，涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查，帮助你理解各阶段的任务关系，逐步完成项目构建。
0
2026.10.22
本专题汇总PHP常见时间戳漏洞，包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等，并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案，帮助开发者快速排查和加固时间相关代码。
0
2026.10.22
本专题聚焦Golangci-lint YAML配置文件，讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置，便于团队统一检查标准。
0
2026.10.22
本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查，覆盖本地环境、Docker及多平台用法，帮助Go开发者快速上手。
0
2026.10.22
PHP2Shell漏洞是什么，哪些PHP版本和运行环境会受到影响，服务器应该如何检测与修复？本专题提供版本自查脚本、Linux与Docker升级命令、PHP-FPM和Apache排查步骤，以及修复验证、临时缓解和应急响应方案。
0
2026.10.22
热门下载
精品课程
共6课时 | 12.1万人学习
共79课时 | 161.5万人学习
共6课时 | 54.7万人学习
