229 个 · 按相关度排序
Capture an entire web page as a full-page screenshot using Chrome DevTools Protocol, Chrome's developer control interface. The workflow needs no additional dependencies and provides page images for portfolios, case studies, and audit reports.
中文简介正在准备中。当前显示英语简介。
Audit web images that are larger than their displayed size and help serve suitable versions for different screens. Review image dimensions, responsive image settings, and Lighthouse findings, then provide updated HTML and steps to verify the changes.
中文简介正在准备中。当前显示英语简介。
Review early connections to third-party services such as fonts and APIs. Use loading measurements to identify essential domains, recommend preconnect hints that prepare connections in advance, and remove unnecessary hints that add overhead.
中文简介正在准备中。当前显示英语简介。
Audit a page’s HTTP requests to find unnecessary network activity behind slow loading. Confirm bottlenecks with performance measurements, then suggest changes such as combining files, grouping icons, or embedding resources needed for the initial display.
中文简介正在准备中。当前显示英语简介。
Measure how quickly a webpage updates after user interactions using INP, a responsiveness metric. Identify confirmed bottlenecks and improve event handlers, split long tasks, or move heavy computation to web workers.
中文简介正在准备中。当前显示英语简介。
Investigate slow page loads and check whether resources use HTTP/2 or HTTP/3. Measure the actual bottleneck, then recommend server or CDN changes where appropriate, explaining how shared connections and compressed headers affect loading.
中文简介正在准备中。当前显示英语简介。
Audit page speed in a real browser to find delays in loading, script execution, and layout. Use measured results to identify bottlenecks, compare device and connection conditions, and guide performance improvements.
中文简介正在准备中。当前显示英语简介。
Audit slow page loads by measuring how static files, such as images and scripts, are delivered. Check CDN usage, a network of distributed servers, and identify caching or delivery settings that need improvement.
中文简介正在准备中。当前显示英语简介。
Find broken or fragile image references in markup, styles, and components. Correct paths, restore missing assets, and add fallback images, then verify how the page behaves when image requests fail.
中文简介正在准备中。当前显示英语简介。
Investigate growing memory usage in Qwen Code CLI by comparing heap snapshots, records of objects in memory. Trace what keeps objects alive, identify likely causes, and repeat the workload to verify a fix.
中文简介正在准备中。当前显示英语简介。
Debug json-render interfaces with an inspector panel that shows screen specifications, editable runtime state, action history, and streamed updates. Select a rendered page element to locate its definition and investigate display or interaction problems.
中文简介正在准备中。当前显示英语简介。
Plan, implement, or review chrome devtools work in an existing codebase with compatibility, security, and verification controls. Use when the user explicitly requests chrome devtools work.
中文简介正在准备中。当前显示原文说明。
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
中文简介正在准备中。当前显示原文说明。
Verify web apps with browser DevTools—DOM, console, network, performance, and accessibility at runtime. Use with Chrome DevTools MCP or headless browser tools.
中文简介正在准备中。当前显示原文说明。
This skill provides guidance for using Chrome DevTools MCP for browser debugging and automation. Use when debugging web pages, analyzing performance, inspecting network requests, viewing console messages, or interacting with Chrome DevTools features programmatically.
中文简介正在准备中。当前显示原文说明。
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
中文简介正在准备中。当前显示原文说明。
Uses the chrome-devtools-axi CLI for browser automation, accessibility-tree snapshots, console and network inspection, screenshots, Lighthouse audits, and performance traces. Use when interacting with Chrome from the shell, especially when the user mentions chrome-devtools-axi, AX snapshots, browser debugging, or DevTools automation from the command line.
中文简介正在准备中。当前显示原文说明。
Guide users through browser automation setup using Chrome DevTools MCP only. Use when the user asks to set up browser automation, Chrome DevTools MCP, browser MCP, or runs the browser-setup command.
中文简介正在准备中。当前显示原文说明。
通过暂停Node.js执行、检查变量和跟踪执行路径，调查异步任务停滞、测试偶发失败等问题，也可分析内存持续增长和CPU负载的原因。
Build web animations with GSAP plugins for text, SVG graphics, dragging, scrolling, and layout changes. It guides plugin selection, registration, configuration, and cleanup, with examples for implementing effects and reviewing existing animation code.
中文简介正在准备中。当前显示英语简介。
Find CSS and JavaScript that delay a page’s first visible content. Confirm the bottleneck with browser tools or performance data, then adjust loading behavior and inline essential styles to help the page start rendering sooner.
中文简介正在准备中。当前显示英语简介。
Measure page loading speed and identify what prevents a page from loading in under three seconds. Use performance measurements to guide improvements such as lazy loading, caching, CDN delivery, and reducing resource costs.
中文简介正在准备中。当前显示英语简介。
Review slow page loads and choose resource hints, browser instructions that start loading or connecting earlier. Use measurements to identify bottlenecks, then recommend preload, preconnect, prefetch, or dns-prefetch for important assets and likely next-page resources.
中文简介正在准备中。当前显示英语简介。
Measure the total size of a web page and its resources, identify what slows loading, and reduce unnecessary weight. Use a 1500KB limit to guide image optimization, code compression, and removal of unused resources.
中文简介正在准备中。当前显示英语简介。