skills.rest
bdbch
bdbchCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

browser-debug

Diagnose console errors, network issues, and performance bottlenecks using Chrome DevTools.

2|Updated May 15, 2026
Search Tags:#accessibility#web performance#Chrome DevTools#console errors#browser debugging
One-click install
npx skills add https://github.com/bdbch/ai-dotfiles --skill browser-debug
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-debug
Source: https://github.com/bdbch/ai-dotfiles/tree/main/skills/browser-debug
Command: npx skills add https://github.com/bdbch/ai-dotfiles --skill browser-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill helps diagnose and fix console errors, network issues, performance problems, and accessibility issues in live web applications.

Core Features & Use Cases

  • Console Errors: Identify and understand JavaScript exceptions, runtime errors, and deprecation warnings.
  • Network Issues: Diagnose network request failures, slow API calls, and resource mismatches.
  • Performance Issues: Analyze page load speed, layout shifts, long tasks, and memory leaks.
  • Accessibility Issues: Check for missing alt text, low contrast, and ARIA label violations.
  • Rendering Issues: Resolve FOUC, broken layouts, and font loading issues.
  • Use Case: Quickly identify and fix issues on a web application being developed or maintained.

Quick Start

Debug console errors and network issues in your web application 'example.com'.

Frequently Asked Questions about browser-debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug console errors and network request failures in a live web application?▼

Debug console errors in a live web application by utilizing Chrome DevTools to identify JavaScript exceptions, runtime errors, and deprecation warnings, and diagnose network request failures and slow API calls.

What is the best way to analyze web performance bottlenecks and memory leaks?▼

Analyzing web performance bottlenecks involves using Chrome DevTools to inspect page load speed, layout shifts, long tasks, and memory leaks to resolve performance issues in web development.

How do I check for accessibility violations like missing alt text and low contrast?▼

Check for accessibility violations like missing alt text, low contrast, and ARIA label violations by utilizing Chrome DevTools to audit live web applications for compliance issues.

Can I use Chrome DevTools to resolve visual rendering problems and broken layouts?▼

You can use Chrome DevTools to resolve visual rendering problems like FOUC, broken layouts, and font loading issues by inspecting the visual rendering layer of live web applications.

What do I need to diagnose and fix issues on a web application being developed?▼

To diagnose and fix issues on a web application being developed, you need access to Chrome DevTools and web development skills to analyze console errors, network requests, and performance bottlenecks.

Related Skills

Explore More Software Engineering Skills→
Partners-in-BizPartners-in-Biz

browser-testing-with-devtools

Inspect DOM, console, network, and performance via Chrome DevTools.

Community
Advanced
docaohieu2808docaohieu2808

web-design-guidelines

Reviews HTML, CSS, and JavaScript UI code for Web Interface Guidelines compliance.

Community
Intermediate
danieldev24danieldev24

browser-testing-with-devtools

Automates web application testing and debugging using Chrome DevTools.

Community
Advanced
charl-krugercharl-kruger
5

web-perf

Measure Core Web Vitals and profile resource timing with Chrome DevTools MCP.

Community
Advanced