skills.rest
francanete
francaneteCOMMUNITY
Explore all skills by this author →
Website𝕏@francanetecomGitHub

debugging-guide

Diagnose Chrome Extension issues across DevTools, service workers, and content scripts.

1|Updated Dec 4, 2025
Search Tags:#debugging#service worker#network#DevTools#storage#content script#Chrome extension
One-click install
npx skills add https://github.com/francanete/fran-marketplace --skill debugging-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debugging-guide
Source: https://github.com/francanete/fran-marketplace/tree/main/chrome-extension-expert/skills/debugging-guide
Command: npx skills add https://github.com/francanete/fran-marketplace --skill debugging-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive, structured guide for diagnosing and fixing Chrome Extension debugging issues.

Core Features & Use Cases

  • DevTools-based debugging workflows for multiple extension contexts (Service Worker, Popup, Content Script, Options)
  • Lifecycle insights and practical tips for troubleshooting common extension problems, including storage, network, and performance
  • Real-world use cases and step-by-step guidance to reproduce and resolve issues across DevTools, manifest, and permissions

Quick Start

Open Chrome, navigate to chrome://extensions, enable Developer mode, and consult the sections on Service Worker debugging, Content Script debugging, Storage, and Network to diagnose and fix issues.

Frequently Asked Questions about debugging-guide

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

FAQPage Schema
How do I debug a Chrome extension service worker lifecycle issue?▼

To debug a Chrome extension service worker lifecycle issue, use Chrome DevTools via chrome://extensions to inspect the service worker context, applying structured steps to diagnose and fix state, event, and termination problems.

Why does my content script not inject into the page?▼

Content script injection failures often stem from manifest permissions or matching patterns. This guide provides structured troubleshooting steps to diagnose and resolve injection, storage, and network issues across extension contexts.

Can I use Chrome DevTools to inspect extension storage and network requests?▼

Yes, you can use Chrome DevTools to inspect extension storage and network requests. The guide covers DevTools-based debugging workflows for tracking storage states and monitoring network activity across multiple extension contexts.

What is the best way to troubleshoot Chrome extension performance problems?▼

The best way to troubleshoot Chrome extension performance problems is to apply structured lifecycle insights and practical DevTools tips. This guide helps reproduce and resolve performance, storage, and network issues across manifest-based extensions.

How do I debug a popup or options page in a manifest-based extension?▼

To debug a popup or options page in a manifest-based extension, open Chrome DevTools for that specific context. This guide provides step-by-step guidance to diagnose and fix issues across all extension contexts including popup and options.

Related Skills

Explore More Software Engineering Skills→
nihaoshinihaoshi
27

browser-cdp-mimo

Automate Chrome browser operations via Chrome DevTools Protocol.

Community
Advanced
nuttyccnuttycc

wxt-browser-extensions

Optimize WXT browser extension performance across service workers, content scripts, and messaging.

Community
Advanced
MohammedSaudAlsahliMohammedSaudAlsahli

web-perf

Audit web performance using Chrome DevTools profiling tools and Core Web Vitals.

Community
Advanced
cloud-native-toolscloud-native-tools

extension-e2e-test

Automate Chrome Manifest V3 extension end-to-end tests with Playwright.

Official
Advanced