[{"data":1,"prerenderedAt":639},["ShallowReactive",2],{"navigation":3,"\u002Fskills-mcp\u002Fchrome-devtools-mcp":312,"\u002Fskills-mcp\u002Fchrome-devtools-mcp-surround":636},[4,21,54,95,153,169,188,251,280,292],{"title":5,"path":6,"stem":7,"children":8,"icon":20},"快速开始","\u002Fstart","1.start\u002F0.index",[9,11,15],{"title":5,"path":6,"stem":7,"icon":10},"i-lucide-house",{"title":12,"path":13,"stem":14,"icon":10},"使用 TokenResearch Docs","\u002Fstart\u002Felysia-code","1.start\u002F1.elysia-code",{"title":16,"path":17,"stem":18,"icon":19},"安装Node.js 和 Git","\u002Fstart\u002Fnode-git","1.start\u002F2.node-git","i-simple-icons-javascript",false,{"title":22,"path":23,"stem":24,"children":25,"icon":20},"基础教程","\u002Ftutorials","2.tutorials\u002F1.index",[26,29,34,39,44,49],{"title":27,"path":23,"stem":24,"icon":28},"教程路线图","i-lucide-route",{"title":30,"path":31,"stem":32,"icon":33},"环境准备","\u002Ftutorials\u002Fenvironment","2.tutorials\u002F2.environment","i-lucide-settings-2",{"title":35,"path":36,"stem":37,"icon":38},"Codex 首次运行","\u002Ftutorials\u002Fcodex-first-run","2.tutorials\u002F3.codex-first-run","i-lucide-terminal",{"title":40,"path":41,"stem":42,"icon":43},"Agent 规则","\u002Ftutorials\u002Fagent-rules","2.tutorials\u002F4.agent-rules","i-lucide-scroll-text",{"title":45,"path":46,"stem":47,"icon":48},"视觉验收","\u002Ftutorials\u002Fvisual-review","2.tutorials\u002F5.visual-review","i-lucide-monitor-check",{"title":50,"path":51,"stem":52,"icon":53},"质量门禁","\u002Ftutorials\u002Fquality-gates","2.tutorials\u002F6.quality-gates","i-lucide-shield-check",{"title":55,"path":56,"stem":57,"children":58,"icon":20},"Codex 配置文档","\u002Fcodex","3.codex\u002F0.index",[59,61,66,71,76,80,85,90],{"title":55,"path":56,"stem":57,"icon":60},"i-lucide-bot",{"title":62,"path":63,"stem":64,"icon":65},"安装Codex CLI","\u002Fcodex\u002Finstall-cli","3.codex\u002F1.install-cli","i-simple-icons-openai",{"title":67,"path":68,"stem":69,"icon":70},"安装 IDE 插件","\u002Fcodex\u002Finstall-ide","3.codex\u002F2.install-ide","i-lucide-puzzle",{"title":72,"path":73,"stem":74,"icon":75},"Codex App桌面端","\u002Fcodex\u002Fapp-desktop","3.codex\u002F3.app-desktop","i-lucide-flask-conical",{"title":77,"path":78,"stem":79,"icon":60},"Codex配置\u002F使用","\u002Fcodex\u002Fmodel","3.codex\u002F5.model",{"title":81,"path":82,"stem":83,"icon":84},"其他错误","\u002Fcodex\u002Fother-errors","3.codex\u002F6.other-errors","i-lucide-info",{"title":86,"path":87,"stem":88,"icon":89},"网络与代理","\u002Fcodex\u002Fnetwork-proxy","3.codex\u002F7.network-proxy","i-lucide-globe",{"title":91,"path":92,"stem":93,"icon":94},"Codex模型测试","\u002Fcodex\u002Fmodel-test","3.codex\u002F8.model-test","i-lucide-boxes",{"title":96,"path":97,"stem":98,"children":99,"icon":20},"模型中心","\u002Fmodels","4.models\u002F01.index",[100,102,106,111,116,121,125,129,134,139,144,149],{"title":96,"path":97,"stem":98,"icon":101},"i-lucide-store",{"title":103,"path":104,"stem":105,"icon":28},"任务路由建议","\u002Fmodels\u002Ftask-routing","4.models\u002F02.task-routing",{"title":107,"path":108,"stem":109,"icon":110},"推理等级评测","\u002Fmodels\u002Freasoning-levels","4.models\u002F03.reasoning-levels","i-lucide-brain",{"title":112,"path":113,"stem":114,"icon":115},"上下文与压缩","\u002Fmodels\u002Fcontext-compression","4.models\u002F04.context-compression","i-lucide-file-stack",{"title":117,"path":118,"stem":119,"icon":120},"评测记录模板","\u002Fmodels\u002Feval-template","4.models\u002F05.eval-template","i-lucide-clipboard-list",{"title":122,"path":123,"stem":124,"icon":48},"前端视觉评测","\u002Fmodels\u002Ffrontend-visual","4.models\u002F06.frontend-visual",{"title":126,"path":127,"stem":128,"icon":43},"研究写作评测","\u002Fmodels\u002Fresearch-writing","4.models\u002F07.research-writing",{"title":130,"path":131,"stem":132,"icon":133},"运维排查评测","\u002Fmodels\u002Fops-debug","4.models\u002F08.ops-debug","i-lucide-server-cog",{"title":135,"path":136,"stem":137,"icon":138},"成本与速度评测","\u002Fmodels\u002Fcost-speed","4.models\u002F09.cost-speed","i-lucide-timer",{"title":140,"path":141,"stem":142,"icon":143},"工具调用评测","\u002Fmodels\u002Ftool-use","4.models\u002F10.tool-use","i-lucide-terminal-square",{"title":145,"path":146,"stem":147,"icon":148},"样例评测记录","\u002Fmodels\u002Fsample-records","4.models\u002F11.sample-records","i-lucide-clipboard-check",{"title":150,"path":151,"stem":152,"icon":101},"模型广场","\u002Fmodels\u002Fmarket","4.models\u002F12.market",{"title":154,"path":155,"stem":156,"children":157,"icon":20},"OpenCode 配置文档","\u002Fopencode","5.opencode\u002F0.index",[158,160,165],{"title":154,"path":155,"stem":156,"icon":159},"i-lucide-code-xml",{"title":161,"path":162,"stem":163,"icon":164},"安装OpenCode","\u002Fopencode\u002Finstall-opencode","5.opencode\u002F1.install-opencode","i-lucide-code",{"title":166,"path":167,"stem":168,"icon":164},"配置模型","\u002Fopencode\u002Fmodel","5.opencode\u002F2.model",{"title":170,"path":171,"stem":172,"children":173,"icon":20},"Claude Code 配置文档","\u002Fclaude-code","6.claude-code\u002F0.index",[174,176,180,184],{"title":170,"path":171,"stem":172,"icon":175},"i-lucide-sparkles",{"title":177,"path":178,"stem":179,"icon":175},"安装Claude CLI","\u002Fclaude-code\u002Finstall-cli","6.claude-code\u002F1.install-cli",{"title":181,"path":182,"stem":183,"icon":70},"插件配置","\u002Fclaude-code\u002Fplugin","6.claude-code\u002F2.plugin",{"title":185,"path":186,"stem":187,"icon":94},"模型配置","\u002Fclaude-code\u002Fmodel","6.claude-code\u002F3.model",{"title":189,"path":190,"stem":191,"children":192,"icon":20},"Skill Gallery","\u002Fgallery","7.gallery\u002F01.index",[193,195,200,205,210,215,219,224,229,234,238,242,247],{"title":189,"path":190,"stem":191,"icon":194},"i-lucide-gallery-horizontal-end",{"title":196,"path":197,"stem":198,"icon":199},"Image Generation","\u002Fgallery\u002Fimagegen","7.gallery\u002F02.imagegen","i-lucide-image",{"title":201,"path":202,"stem":203,"icon":204},"Paper Analyze","\u002Fgallery\u002Fpaper-analyze","7.gallery\u002F03.paper-analyze","i-lucide-file-search",{"title":206,"path":207,"stem":208,"icon":209},"Presentation Builder","\u002Fgallery\u002Fpresentation","7.gallery\u002F04.presentation","i-lucide-presentation",{"title":211,"path":212,"stem":213,"icon":214},"Spreadsheet Analyst","\u002Fgallery\u002Fspreadsheet","7.gallery\u002F05.spreadsheet","i-lucide-table-properties",{"title":216,"path":217,"stem":218,"icon":48},"Browser Visual QA","\u002Fgallery\u002Fbrowser-visual-qa","7.gallery\u002F06.browser-visual-qa",{"title":220,"path":221,"stem":222,"icon":223},"Zotero Research","\u002Fgallery\u002Fzotero-research","7.gallery\u002F07.zotero-research","i-lucide-library",{"title":225,"path":226,"stem":227,"icon":228},"Research Loop","\u002Fgallery\u002Fresearch-loop","7.gallery\u002F08.research-loop","i-lucide-orbit",{"title":230,"path":231,"stem":232,"icon":233},"PDF and Docs","\u002Fgallery\u002Fpdf-docs","7.gallery\u002F09.pdf-docs","i-lucide-file-type",{"title":235,"path":236,"stem":237,"icon":133},"Ops Debug","\u002Fgallery\u002Fops-debug","7.gallery\u002F10.ops-debug",{"title":239,"path":240,"stem":241,"icon":43},"LaTeX Paper","\u002Fgallery\u002Flatex-paper","7.gallery\u002F11.latex-paper",{"title":243,"path":244,"stem":245,"icon":246},"Diagram Canvas","\u002Fgallery\u002Fdiagram-canvas","7.gallery\u002F12.diagram-canvas","i-lucide-git-compare-arrows",{"title":248,"path":249,"stem":250,"icon":175},"Hatch Pet","\u002Fgallery\u002Fhatch-pet","7.gallery\u002F13.hatch-pet",{"title":252,"path":253,"stem":254,"children":255,"icon":20},"场景路线","\u002Fworkflows","8.workflows\u002F01.index",[256,258,263,268,272,276],{"title":252,"path":253,"stem":254,"icon":257},"i-lucide-map",{"title":259,"path":260,"stem":261,"icon":262},"论文到汇报","\u002Fworkflows\u002Fpaper-to-slides","8.workflows\u002F02.paper-to-slides","i-lucide-file-chart-column",{"title":264,"path":265,"stem":266,"icon":267},"视觉复刻路线","\u002Fworkflows\u002Fvisual-replica","8.workflows\u002F03.visual-replica","i-lucide-monitor-dot",{"title":269,"path":270,"stem":271,"icon":28},"模型路由记录","\u002Fworkflows\u002Fmodel-routing","8.workflows\u002F04.model-routing",{"title":273,"path":274,"stem":275,"icon":194},"Skill 沉淀路线","\u002Fworkflows\u002Fskill-to-gallery","8.workflows\u002F05.skill-to-gallery",{"title":277,"path":278,"stem":279,"icon":133},"运维现场排查","\u002Fworkflows\u002Fops-live-debug","8.workflows\u002F06.ops-live-debug",{"title":281,"path":282,"stem":283,"children":284,"icon":20},"常见问题","\u002Ffaq","91.faq\u002F0.index",[285,288],{"title":286,"path":282,"stem":283,"icon":287},"FAQ","i-lucide-circle-help",{"title":289,"path":290,"stem":291,"icon":84},"通用问题","\u002Ffaq\u002Fcommon","91.faq\u002F1.common",{"title":293,"path":294,"stem":295,"children":296,"icon":20},"Skills 与 MCP","\u002Fskills-mcp","92.skills-mcp\u002F0.index",[297,299,304,308],{"title":293,"path":294,"stem":295,"icon":298},"i-lucide-plug",{"title":300,"path":301,"stem":302,"icon":303},"Skills 推荐","\u002Fskills-mcp\u002Fskills","92.skills-mcp\u002F1.skills","i-lucide-link",{"title":305,"path":306,"stem":307,"icon":298},"MCP 使用边界","\u002Fskills-mcp\u002Fmcp-overview","92.skills-mcp\u002F2.mcp-overview",{"title":309,"path":310,"stem":311,"icon":303},"chrome-devtools-mcp","\u002Fskills-mcp\u002Fchrome-devtools-mcp","92.skills-mcp\u002F3.chrome-devtools-mcp",{"id":313,"title":309,"body":314,"description":629,"extension":630,"links":631,"meta":632,"navigation":633,"path":310,"seo":634,"stem":311,"__hash__":635},"docs\u002F92.skills-mcp\u002F3.chrome-devtools-mcp.md",{"type":315,"value":316,"toc":619},"minimark",[317,321,325,328,380,383,386,389,392,515,518,522,554,557,603,606,609,612,615],[318,319,320],"h2",{"id":320},"浏览器调试",[322,323,324],"p",{},"chrome-devtools-mcp 适合让 AI 编码助手检查真实页面、DOM、样式和交互。",[318,326,327],{"id":327},"适用场景",[329,330,331,344],"table",{},[332,333,334],"thead",{},[335,336,337,341],"tr",{},[338,339,340],"th",{},"场景",[338,342,343],{},"价值",[345,346,347,356,364,372],"tbody",{},[335,348,349,353],{},[350,351,352],"td",{},"本地前端验收",[350,354,355],{},"直接查看 localhost 页面",[335,357,358,361],{},[350,359,360],{},"布局问题",[350,362,363],{},"检查元素尺寸、层级和溢出",[335,365,366,369],{},[350,367,368],{},"交互问题",[350,370,371],{},"点击、输入、切换状态后再检查",[335,373,374,377],{},[350,375,376],{},"性能问题",[350,378,379],{},"查看控制台错误和网络请求",[318,381,382],{"id":382},"与截图结合",[322,384,385],{},"浏览器 MCP 适合查 DOM 和实时状态，Playwright 截图适合保存证据。做视觉复刻时建议两者结合：先用浏览器定位问题，再用截图记录修复前后。",[318,387,388],{"id":388},"最小安装形态",[322,390,391],{},"不同客户端的 MCP 配置略有差异，核心都是让客户端能启动浏览器检查工具。记录时保留配置文件路径、命令和工具列表。",[393,394,399],"pre",{"className":395,"code":396,"language":397,"meta":398,"style":398},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"mcp\": {\n    \"chrome-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\"chrome-devtools-mcp@latest\"]\n    }\n  }\n}\n","json","",[400,401,402,411,430,446,472,497,503,509],"code",{"__ignoreMap":398},[403,404,407],"span",{"class":405,"line":406},"line",1,[403,408,410],{"class":409},"sMK4o","{\n",[403,412,414,417,421,424,427],{"class":405,"line":413},2,[403,415,416],{"class":409},"  \"",[403,418,420],{"class":419},"spNyl","mcp",[403,422,423],{"class":409},"\"",[403,425,426],{"class":409},":",[403,428,429],{"class":409}," {\n",[403,431,433,436,440,442,444],{"class":405,"line":432},3,[403,434,435],{"class":409},"    \"",[403,437,439],{"class":438},"sBMFI","chrome-devtools",[403,441,423],{"class":409},[403,443,426],{"class":409},[403,445,429],{"class":409},[403,447,449,452,456,458,460,463,467,469],{"class":405,"line":448},4,[403,450,451],{"class":409},"      \"",[403,453,455],{"class":454},"sbssI","command",[403,457,423],{"class":409},[403,459,426],{"class":409},[403,461,462],{"class":409}," \"",[403,464,466],{"class":465},"sfazB","npx",[403,468,423],{"class":409},[403,470,471],{"class":409},",\n",[403,473,475,477,480,482,484,487,489,492,494],{"class":405,"line":474},5,[403,476,451],{"class":409},[403,478,479],{"class":454},"args",[403,481,423],{"class":409},[403,483,426],{"class":409},[403,485,486],{"class":409}," [",[403,488,423],{"class":409},[403,490,491],{"class":465},"chrome-devtools-mcp@latest",[403,493,423],{"class":409},[403,495,496],{"class":409},"]\n",[403,498,500],{"class":405,"line":499},6,[403,501,502],{"class":409},"    }\n",[403,504,506],{"class":405,"line":505},7,[403,507,508],{"class":409},"  }\n",[403,510,512],{"class":405,"line":511},8,[403,513,514],{"class":409},"}\n",[322,516,517],{},"如果只是要保存截图，不一定要先接 MCP；可以直接用 Playwright 或浏览器插件完成。",[318,519,521],{"id":520},"本地-qa-工作流","本地 QA 工作流",[523,524,525,533,539,542,545,548,551],"ol",{},[526,527,528,529,532],"li",{},"启动本地站点，例如 ",[400,530,531],{},"pnpm dev --host 127.0.0.1 --port 3000","。",[526,534,535,536,532],{},"打开目标页面，例如 ",[400,537,538],{},"http:\u002F\u002F127.0.0.1:3000\u002Fcodex\u002Fmodel",[526,540,541],{},"检查 Console，确认没有 hydration、404、字体或图标加载错误。",[526,543,544],{},"查看核心容器尺寸，确认标题、导航、按钮和卡片没有溢出。",[526,546,547],{},"切到移动端视口，检查侧边栏、菜单、TOC 和长文本换行。",[526,549,550],{},"切换暗色模式，确认背景、边框、代码块和徽标对比度正常。",[526,552,553],{},"保存截图路径，并在最终记录中写明页面、视口和发现的问题。",[318,555,556],{"id":556},"检查清单",[329,558,559,569],{},[332,560,561],{},[335,562,563,566],{},[338,564,565],{},"检查项",[338,567,568],{},"说明",[345,570,571,579,587,595],{},[335,572,573,576],{},[350,574,575],{},"Console",[350,577,578],{},"是否有 hydration、资源加载或运行时错误",[335,580,581,584],{},[350,582,583],{},"Elements",[350,585,586],{},"目标元素尺寸、换行、overflow 和 z-index",[335,588,589,592],{},[350,590,591],{},"Network",[350,593,594],{},"图片、字体、接口是否失败",[335,596,597,600],{},[350,598,599],{},"Interaction",[350,601,602],{},"菜单、搜索、暗色模式、按钮点击是否可用",[318,604,605],{"id":605},"注意事项",[322,607,608],{},"不要让浏览器工具代替构建检查。前端任务结束前仍然需要运行 lint、typecheck、build，确保页面不是只在开发态可用。",[318,610,611],{"id":611},"交付格式",[322,613,614],{},"浏览器排查结束时，至少写清楚检查页面、视口尺寸、发现的问题、修复文件和复查截图路径。如果只是“看起来可以”，后续很难复盘。",[616,617,618],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":398,"searchDepth":406,"depth":413,"links":620},[621,622,623,624,625,626,627,628],{"id":320,"depth":413,"text":320},{"id":327,"depth":413,"text":327},{"id":382,"depth":413,"text":382},{"id":388,"depth":413,"text":388},{"id":520,"depth":413,"text":521},{"id":556,"depth":413,"text":556},{"id":605,"depth":413,"text":605},{"id":611,"depth":413,"text":611},"让 AI 编码助手检查真实页面、DOM、样式、性能和交互。","md",null,{},{"icon":303},{"title":309,"description":629},"5MGfmRMbl3fVHvcSI3mXFS2uvWUpunt0Uj4ezUcEvug",[637,631],{"title":305,"path":306,"stem":307,"description":638,"icon":298,"children":-1},"什么时候接 MCP，什么时候只需要 Skill、教程或普通脚本。",1783590602377]