'devtools' 검색 결과

Connect Solid Table v9 tables to Devtools and troubleshoot missing inspection targets. This skill guides table registration, unique keys, conditional activation, automatic cleanup, and the distinction between development exports and explicit production imports.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Connect a Solid Table instance to Devtools
• Investigate tables missing from Devtools
• Check registration keys and lifecycle cleanup

Connect Vue Table v9 to Devtools and troubleshoot missing tables. Covers unique table keys, reactive references that track table replacement, cleanup when targets change, and the development settings that determine whether the integration runs.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Connect a Vue table to Devtools
• Investigate a missing table target
• Keep registration updated when a table reference changes

Connect React Table v9 to Devtools, a development inspection interface. Configure table registration, unique keys, and enabled settings, and diagnose missing panels while understanding registration cleanup and the separate entrypoint for explicit production use.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding Devtools to React tables
• Diagnosing missing Table panels
• Controlling registration with enabled

Connect Preact Table v9 to Devtools, a development inspection interface. This skill guides package selection, unique table keys, registration settings, and development-only behavior to help diagnose tables that do not appear.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Connecting Preact tables to Devtools
• Diagnosing missing table targets
• Checking duplicate keys across tables

Register Angular TanStack Table v9 instances with Devtools, a tool for developers. The skill covers unique table keys, registration that responds to changes, automatic cleanup, and the different setup rules for development and production.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Register an Angular table with Devtools
• Investigate a table that fails to register
• Enable or remove registration as conditions change

Add and troubleshoot a developer panel in Svelte 5 json-render apps. Inspect JSON screen definitions, edit application state, review action and streaming timelines, browse component catalogs, and select elements directly from the page.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add a developer panel to a Svelte app
• Inspect screen definitions and edit application state
• Review action and streaming timelines

Set up an inspection panel in React json-render apps to examine UI definitions, edit state, and review action and stream timelines. The skill also covers opening or toggling the panel and recording events from React code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding an inspection panel to a React app
• Inspecting UI definitions, state, and action history
• Opening or toggling the panel from React code

Add and troubleshoot the json-render inspection panel in SolidJS applications. This skill covers panel setup for examining specifications, editing state, reviewing action and stream timelines, browsing component catalogs, and selecting page elements for inspection.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add an inspection panel to a SolidJS app
• Inspect JSON specifications and edit application state
• Review action and stream timelines

Add and configure an inspection panel for Vue json-render apps. This skill guides setup and troubleshooting so you can inspect UI definitions, edit state, review action and stream timelines, browse catalogs, and select page elements.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding an inspection panel to a Vue app
• Inspecting UI definitions and editing state
• Reviewing action and stream timelines

Test browser interfaces through Chrome DevTools MCP, a connection that lets an agent inspect a live browser. Check screenshots, errors, network traffic, accessibility, and performance to diagnose problems and verify fixes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Diagnosing layout and styling problems
• Investigating browser errors and failed API requests
• Comparing screenshots before and after a fix

Connect TanStack Table instances to developer tools for inspecting options, state, features, columns, rows, and row models. Diagnose missing connections, assign unique table keys, and manage registration replacement and cleanup.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Inspect table options, state, columns, and rows
• Diagnose tables missing from developer tools
• Assign distinct keys to multiple tables

Review website images and reduce file sizes while limiting visible quality changes. Check compression, formats, display dimensions, loading behavior, and delivery settings, then recommend suitable tools or build automation and verification in browser DevTools.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Find oversized images on web pages
• Choose compression methods for photos and graphics
• Automate image compression during builds

Control and inspect a live Chrome browser through Chrome DevTools MCP. Automate page interactions, capture screenshots, inspect errors and network requests, and record performance data to investigate slow loading and unexpected layout changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Automating navigation and form entry
• Capturing page screenshots and text snapshots
• Investigating console errors and failed requests

Verify desktop UI changes through the Chrome DevTools Protocol, a connection for controlling the running app. Reproduce the user’s actual steps and compare screenshots, measured state, and console errors to establish evidence before and after a fix.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reproducing reported bugs in the running app
• Comparing UI behavior before and after a fix
• Checking state across navigation and reopening

Audit page loading speed with Chrome DevTools MCP, a tool connection for browser inspection. Measure performance indicators, investigate network delays and layout shifts, check accessibility gaps, and produce prioritized fixes with estimated impact and relevant code findings.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigate slow page loads
• Find causes of layout shifts
• Identify improvements related to Lighthouse scores

Find and fix JavaScript memory leaks that accumulate as people use a web app. Review event listeners, timers, retained page elements, and outdated asynchronous tasks, then explain how to verify cleanup in the browser.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating rising memory use during long sessions
• Reviewing cleanup when components are removed
• Canceling outdated requests after view changes

Measure how Google Tag Manager affects page loading and rendering. Identify costly tags, triggers, and requests, then guide cleanup, asynchronous loading, or a move to server-side processing based on observed performance problems.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigate slow pages using GTM
• Review unused tags and triggers
• Check asynchronous script loading

Measure the size and nesting of a page's DOM, the tree of HTML elements. Identify unnecessary wrappers and oversized lists, then simplify the structure or render only visible list items to reduce confirmed rendering costs.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating pages with slow rendering or interactions
• Measuring HTML element counts and nesting depth
• Removing unnecessary wrapper elements

Review how a website behaves when images fail to load and add fallback images or meaningful placeholder content. Check loading behavior, consider loading placeholders, and use error logging and browser developer tools to investigate and verify fixes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding fallback images for broken image links
• Reviewing placeholders shown while images load
• Investigating image loading failures with logs and DevTools

Review images needed when a page first opens, checking file size, display dimensions, and loading priority. Identify changes to preload settings and lazy loading that help the main visual content appear sooner.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing hero image loading priority
• Finding lazy-loaded images in the initial viewport
• Checking image fixes in DevTools

Review how pages return from the browser’s back/forward cache, which restores them from memory. Identify event handlers that block restoration, fix lifecycle assumptions, and refresh time-sensitive information when a cached page resumes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating slow back and forward navigation
• Finding event handlers that block cache restoration
• Fixing stale information after a page resumes

Inspect and control live Chrome pages to investigate display problems, console errors, failed requests, and slow loading. Capture screenshots, automate page interactions, and record performance traces to identify where delays or layout shifts occur.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating page errors and failed network requests
• Finding causes of slow loading and layout shifts
• Capturing screenshots of pages or individual elements

chrome-devtools-mcp の CLI (`chrome-devtools`) を使ったブラウザ操作の総合スキル。既存ブラウザへの attach / 使い捨てテストブラウザ / ログイン状態を保持する永続プロファイルのいずれかをユーザーに必ず確認した上でサーバを立ち上げ、スナップショット取得・クリック・入力・ナビゲーション・スクショ・ネットワーク監視などを行う。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Test and debug browser UIs using Chrome DevTools MCP — DOM inspection, console errors, network requests, performance traces, and visual verification. Load when building or debugging anything that renders in a browser, verifying a UI fix, profiling Core Web Vitals in a real page, or the user asks for browser testing with DevTools. Requires chrome-devtools MCP configured. Not for backend-only or CLI work. Pairs with frontend-design and performance-optimization.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.