[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C32A7BG3ZP3FQPSJDPEV74":3,"skill-same:01M6C32A7BG3ZP3FQPSJDPEV74":74},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":26,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":54,"repositoryHtmlUrl":55,"repositoryHomepageUrl":6,"ownerHtmlUrl":56,"ownerBlogUrl":57,"ownerDescription":58,"updatedAt":59,"install":60,"resources":73},"01M6C32A7BG3ZP3FQPSJDPEV74","debugger",null,"Systematic debugging and troubleshooting methodology for production applications. Covers error trace analysis, network debugging, memory profiling, reproducing intermittent bugs, bisecting regressions, stack trace interpretation, log analysis, performance bottleneck identification, and debugging strategies for Node.js, browser, React, and database issues. Use when debugging errors, investigating failures, or troubleshooting performance issues.","RaheesAhmed\u002FSajiCode","RaheesAhmed","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F48914925?v=4","01M6C31VY6EJ4N8QS30J585H9H","Rahees Ahmed","01M6C31W21ET706B6XTWHS52VC",68,"MIT","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fdebugger\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[5,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"applications","log analysis","use","bottleneck","node","profiling","stack","analysis","debugging strategies","memory","network","database","browser","issues","debugging","interpretation","systematic debugging","react","performance","2026-11-10 10:12:30",false,"---\nname: debugger\ndescription: Systematic debugging and troubleshooting methodology for production applications. Covers error trace analysis, network debugging, memory profiling, reproducing intermittent bugs, bisecting regressions, stack trace interpretation, log analysis, performance bottleneck identification, and debugging strategies for Node.js, browser, React, and database issues. Use when debugging errors, investigating failures, or troubleshooting performance issues.\n---\n\n# Advanced Debugging\n\n## Debugging Methodology\n\n### The Scientific Method for Bugs\n```\n1. OBSERVE    — What exactly is happening? (error message, behavior, repro steps)\n2. HYPOTHESIZE — What could cause this? (list 3+ possibilities)\n3. TEST       — How to verify\u002Feliminate each hypothesis?\n4. ISOLATE    — Create minimal reproduction\n5. FIX        — Make the smallest change that fixes the issue\n6. VERIFY     — Confirm fix, add regression test, check for side effects\n```\n\n### Priority: Read Before You Touch\n```\nALWAYS read in this order:\n1. The exact error message \u002F stack trace\n2. The file + line number from the stack trace\n3. The surrounding context (function, imports, state)\n4. Recent changes to the file (git log -5 --follow -- file.ts)\n5. Related tests (if they exist)\n\nTHEN form a hypothesis. NEVER change code before understanding the error.\n```\n\n## Error Analysis Patterns\n\n### Stack Trace Interpretation\n```\nTypeError: Cannot read properties of undefined (reading 'map')\n    at UserList (src\u002Fcomponents\u002FUserList.tsx:15:22)       ← WHERE (component + line)\n    at renderWithHooks (node_modules\u002Freact-dom\u002F...)       ← React internals (ignore)\n    at mountIndeterminateComponent (...)                   ← React internals (ignore)\n\nTranslation:\n- In UserList.tsx, line 15, something is undefined\n- .map() is called on undefined → an array is expected but not received\n- Check: What variable is on line 15? Where does it come from? (props? state? API?)\n```\n\n### Common Error Patterns\n\n| Error | Usually Means | Fix |\n|-------|--------------|-----|\n| `Cannot read property of undefined` | Accessing nested object without null check | Optional chaining `?.` or guard check |\n| `X is not a function` | Wrong import, stale reference, or wrong type | Check import path and export name |\n| `ECONNREFUSED` | Target server not running | Check if the service is running on the expected port |\n| `ENOENT: no such file` | File path is wrong | Check path construction, working directory |\n| `MODULE_NOT_FOUND` | Package not installed or wrong path | Run `npm install` or fix import path |\n| `Unhandled Promise Rejection` | Missing `.catch()` or try\u002Fcatch | Wrap in try\u002Fcatch, add error handler |\n| `CORS error` | Server doesn't allow origin | Configure CORS middleware on server |\n| `hydration mismatch` | Server\u002Fclient render different HTML | Check for browser-only APIs, use `useEffect` |\n\n## Network Debugging\n\n### API Issues\n```\n1. Check the request:\n   - Is the URL correct? (typos, wrong base URL, missing path segments)\n   - Are headers correct? (Content-Type, Authorization)\n   - Is the body correct? (JSON.stringify, form encoding)\n\n2. Check the response:\n   - What status code? (400 = your request is wrong, 500 = server bug)\n   - What's in the response body? (error message, validation details)\n   - Are there CORS headers? (Access-Control-Allow-Origin)\n\n3. Reproduce with curl:\n   curl -X POST https:\u002F\u002Fapi.example.com\u002Fendpoint \\\n     -H \"Content-Type: application\u002Fjson\" \\\n     -H \"Authorization: Bearer $TOKEN\" \\\n     -d '{\"key\": \"value\"}'\n```\n\n### WebSocket Debugging\n```ts\n\u002F\u002F Add connection lifecycle logging\nws.addEventListener(\"open\", () => console.log(\"[WS] Connected\"));\nws.addEventListener(\"close\", (e) => console.log(`[WS] Closed: code=${e.code} reason=${e.reason}`));\nws.addEventListener(\"error\", (e) => console.error(\"[WS] Error:\", e));\nws.addEventListener(\"message\", (e) => console.log(\"[WS] Received:\", e.data.slice(0, 200)));\n```\n\n## Node.js Debugging\n\n### Memory Leak Hunt\n```bash\n# Start with --inspect and use Chrome DevTools\nnode --inspect dist\u002Findex.js\n\n# Take heap snapshots via Chrome DevTools:\n# 1. Open chrome:\u002F\u002Finspect\n# 2. Click \"inspect\" on your Node process\n# 3. Go to Memory tab → Take heap snapshot\n# 4. Wait, take another snapshot\n# 5. Compare snapshots → find growing objects\n```\n\n### CPU Profiling\n```bash\n# Generate CPU profile\nnode --prof dist\u002Findex.js\n# Process the log\nnode --prof-process isolate-*.log > profile.txt\n# Look for \"ticks\" — functions that consumed the most CPU\n```\n\n### Event Loop Monitoring\n```ts\nconst THRESHOLD_MS = 100;\nlet lastCheck = Date.now();\n\nsetInterval(() => {\n  const now = Date.now();\n  const delay = now - lastCheck - 1000;\n  if (delay > THRESHOLD_MS) {\n    logger.warn(`Event loop blocked for ${delay}ms`);\n  }\n  lastCheck = now;\n}, 1000);\n```\n\n## React Debugging\n\n### Common React Issues\n```\nInfinite re-render:\n  → Check useEffect dependencies — missing dep causes stale closure,\n    adding object dep without useMemo causes infinite loop\n\nComponent not updating:\n  → Check if you're mutating state (arrays, objects) instead of creating new references\n  → obj.key = value (BAD) vs {...obj, key: value} (GOOD)\n\n\"Too many re-renders\":\n  → Calling setState during render, not in a handler\n  → onClick={doSomething()} vs onClick={() => doSomething()}\n```\n\n## Database Debugging\n\n### Slow Query Investigation\n```sql\n-- PostgreSQL: find slow queries\nSELECT query, calls, mean_exec_time, total_exec_time\nFROM pg_stat_statements\nORDER BY mean_exec_time DESC LIMIT 10;\n\n-- Explain any slow query\nEXPLAIN (ANALYZE, BUFFERS, FORMAT TEXT) SELECT ...;\n\n-- Check index usage\nSELECT schemaname, relname, seq_scan, idx_scan\nFROM pg_stat_user_tables\nWHERE seq_scan > idx_scan AND n_live_tup > 1000;\n```\n\n## Git Bisect (Finding Regression)\n```bash\n# Start bisect\ngit bisect start\ngit bisect bad           # Current commit is broken\ngit bisect good v1.2.0   # Last known good version\n\n# Git checks out a middle commit — test it\nnpm test\ngit bisect good  # or git bisect bad\n\n# Repeat until Git identifies the exact breaking commit\n# Then: git bisect reset\n```\n\n## Debugging Rules\n- NEVER change code before understanding the error\n- ALWAYS reproduce the bug before attempting a fix\n- Log MORE, not less — structured logging with context\n- One change at a time — verify after each change\n- If it takes > 30 min, step back and re-read the error message\n- Write a regression test BEFORE fixing the bug\n- Check if the bug exists in a fresh environment\n","# Advanced Debugging\n\n## Debugging Methodology\n\n### The Scientific Method for Bugs\n```\n1. OBSERVE    — What exactly is happening? (error message, behavior, repro steps)\n2. HYPOTHESIZE — What could cause this? (list 3+ possibilities)\n3. TEST       — How to verify\u002Feliminate each hypothesis?\n4. ISOLATE    — Create minimal reproduction\n5. FIX        — Make the smallest change that fixes the issue\n6. VERIFY     — Confirm fix, add regression test, check for side effects\n```\n\n### Priority: Read Before You Touch\n```\nALWAYS read in this order:\n1. The exact error message \u002F stack trace\n2. The file + line number from the stack trace\n3. The surrounding context (function, imports, state)\n4. Recent changes to the file (git log -5 --follow -- file.ts)\n5. Related tests (if they exist)\n\nTHEN form a hypothesis. NEVER change code before understanding the error.\n```\n\n## Error Analysis Patterns\n\n### Stack Trace Interpretation\n```\nTypeError: Cannot read properties of undefined (reading 'map')\n    at UserList (src\u002Fcomponents\u002FUserList.tsx:15:22)       ← WHERE (component + line)\n    at renderWithHooks (node_modules\u002Freact-dom\u002F...)       ← React internals (ignore)\n    at mountIndeterminateComponent (...)                   ← React internals (ignore)\n\nTranslation:\n- In UserList.tsx, line 15, something is undefined\n- .map() is called on undefined → an array is expected but not received\n- Check: What variable is on line 15? Where does it come from? (props? state? API?)\n```\n\n### Common Error Patterns\n\n| Error | Usually Means | Fix |\n|-------|--------------|-----|\n| `Cannot read property of undefined` | Accessing nested object without null check | Optional chaining `?.` or guard check |\n| `X is not a function` | Wrong import, stale reference, or wrong type | Check import path and export name |\n| `ECONNREFUSED` | Target server not running | Check if the service is running on the expected port |\n| `ENOENT: no such file` | File path is wrong | Check path construction, working directory |\n| `MODULE_NOT_FOUND` | Package not installed or wrong path | Run `npm install` or fix import path |\n| `Unhandled Promise Rejection` | Missing `.catch()` or try\u002Fcatch | Wrap in try\u002Fcatch, add error handler |\n| `CORS error` | Server doesn't allow origin | Configure CORS middleware on server |\n| `hydration mismatch` | Server\u002Fclient render different HTML | Check for browser-only APIs, use `useEffect` |\n\n## Network Debugging\n\n### API Issues\n```\n1. Check the request:\n   - Is the URL correct? (typos, wrong base URL, missing path segments)\n   - Are headers correct? (Content-Type, Authorization)\n   - Is the body correct? (JSON.stringify, form encoding)\n\n2. Check the response:\n   - What status code? (400 = your request is wrong, 500 = server bug)\n   - What's in the response body? (error message, validation details)\n   - Are there CORS headers? (Access-Control-Allow-Origin)\n\n3. Reproduce with curl:\n   curl -X POST https:\u002F\u002Fapi.example.com\u002Fendpoint \\\n     -H \"Content-Type: application\u002Fjson\" \\\n     -H \"Authorization: Bearer $TOKEN\" \\\n     -d '{\"key\": \"value\"}'\n```\n\n### WebSocket Debugging\n```ts\n\u002F\u002F Add connection lifecycle logging\nws.addEventListener(\"open\", () => console.log(\"[WS] Connected\"));\nws.addEventListener(\"close\", (e) => console.log(`[WS] Closed: code=${e.code} reason=${e.reason}`));\nws.addEventListener(\"error\", (e) => console.error(\"[WS] Error:\", e));\nws.addEventListener(\"message\", (e) => console.log(\"[WS] Received:\", e.data.slice(0, 200)));\n```\n\n## Node.js Debugging\n\n### Memory Leak Hunt\n```bash\n# Start with --inspect and use Chrome DevTools\nnode --inspect dist\u002Findex.js\n\n# Take heap snapshots via Chrome DevTools:\n# 1. Open chrome:\u002F\u002Finspect\n# 2. Click \"inspect\" on your Node process\n# 3. Go to Memory tab → Take heap snapshot\n# 4. Wait, take another snapshot\n# 5. Compare snapshots → find growing objects\n```\n\n### CPU Profiling\n```bash\n# Generate CPU profile\nnode --prof dist\u002Findex.js\n# Process the log\nnode --prof-process isolate-*.log > profile.txt\n# Look for \"ticks\" — functions that consumed the most CPU\n```\n\n### Event Loop Monitoring\n```ts\nconst THRESHOLD_MS = 100;\nlet lastCheck = Date.now();\n\nsetInterval(() => {\n  const now = Date.now();\n  const delay = now - lastCheck - 1000;\n  if (delay > THRESHOLD_MS) {\n    logger.warn(`Event loop blocked for ${delay}ms`);\n  }\n  lastCheck = now;\n}, 1000);\n```\n\n## React Debugging\n\n### Common React Issues\n```\nInfinite re-render:\n  → Check useEffect dependencies — missing dep causes stale closure,\n    adding object dep without useMemo causes infinite loop\n\nComponent not updating:\n  → Check if you're mutating state (arrays, objects) instead of creating new references\n  → obj.key = value (BAD) vs {...obj, key: value} (GOOD)\n\n\"Too many re-renders\":\n  → Calling setState during render, not in a handler\n  → onClick={doSomething()} vs onClick={() => doSomething()}\n```\n\n## Database Debugging\n\n### Slow Query Investigation\n```sql\n-- PostgreSQL: find slow queries\nSELECT query, calls, mean_exec_time, total_exec_time\nFROM pg_stat_statements\nORDER BY mean_exec_time DESC LIMIT 10;\n\n-- Explain any slow query\nEXPLAIN (ANALYZE, BUFFERS, FORMAT TEXT) SELECT ...;\n\n-- Check index usage\nSELECT schemaname, relname, seq_scan, idx_scan\nFROM pg_stat_user_tables\nWHERE seq_scan > idx_scan AND n_live_tup > 1000;\n```\n\n## Git Bisect (Finding Regression)\n```bash\n# Start bisect\ngit bisect start\ngit bisect bad           # Current commit is broken\ngit bisect good v1.2.0   # Last known good version\n\n# Git checks out a middle commit — test it\nnpm test\ngit bisect good  # or git bisect bad\n\n# Repeat until Git identifies the exact breaking commit\n# Then: git bisect reset\n```\n\n## Debugging Rules\n- NEVER change code before understanding the error\n- ALWAYS reproduce the bug before attempting a fix\n- Log MORE, not less — structured logging with context\n- One change at a time — verify after each change\n- If it takes > 30 min, step back and re-read the error message\n- Write a regression test BEFORE fixing the bug\n- Check if the bug exists in a fresh environment\n",{"name":5,"description":7},"main","791249e54ef4db28bf9af93993479d2e0c6a8a9d","skills\u002Fdebugger",15,"https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode","https:\u002F\u002Fgithub.com\u002FRaheesAhmed","https:\u002F\u002Fraheesahmed.vercel.app\u002F","Forward Deployed AI Engineer | AI Agents, MCP Servers & Business Automation","2026-09-14 17:21:11",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add RaheesAhmed\u002FSajiCode --skill debugger",{"tool":66,"command":67},"bunx","bunx skills add RaheesAhmed\u002FSajiCode --skill debugger",{"tool":69,"command":70},"pnpm","pnpm dlx skills add RaheesAhmed\u002FSajiCode --skill debugger","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fdebugger\u002FSKILL.md",true,[],[75,88,100,123,148,170],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":84,"publishedAt":46},"01M6C33MP48R5GWR13P2VFHWB0","demo-skill","Demo plugin skill for tests.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fdemo-plugin\u002Fskills\u002Fdemo-skill\u002FSKILL.md",[81],{"categoryNo":82,"categoryName":83,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[85,86,87],"demo skill","demo","plugin",{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":95,"publishedAt":46},"01M6C33JV7RMPM5AVS7SCCGDR8","write-a-skill","Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fwrite-a-skill\u002FSKILL.MD",[94],{"categoryNo":82,"categoryName":83,"taxonomyType":21,"taxonomyTypeDesc":22},[96,97,98,99,29],"write","write a skill","create","user",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":109,"publishedAt":46},"01M6C33G0SX1683HER40XB8047","web-research","Deep web research and data extraction skill. Systematically research ANY topic by fetching URLs, reading documentation, crawling API docs, evaluating npm\u002Fpypi packages, comparing technologies, and synthesizing findings into actionable recommendations. Use when researching libraries, frameworks, APIs, solutions, or any topic requiring web investigation.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fweb-research\u002FSKILL.md",[106],{"categoryNo":107,"categoryName":108,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[110,111,112,113,114,115,116,117,118,119,120,121,122,29],"research","web","web research","docs","documentation","libraries","packages","npm","extraction","pypi","data","investigation","api",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":132,"publishedAt":46},"01M6C33CRE3D30CHTTV1ZVR1ZM","testing","Design and implement comprehensive test suites. Covers unit testing, integration testing, E2E testing with Playwright, API testing, mocking strategies, test data factories, TDD workflow, snapshot testing, coverage targets, and CI integration. Use when writing tests, designing test architecture, or debugging test failures.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Ftesting\u002FSKILL.md",[129],{"categoryNo":130,"categoryName":131,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[125,133,29,134,135,136,122,137,120,138,139,140,141,142,41,143,144,145,146,147],"ci","playwright","snapshot","coverage","e2e","tdd","integration","test","architecture","writing tests","workflow","implement","writing","design","e2e testing",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":152,"categories":153,"keywords":154,"publishedAt":46},"01M6C33AER10BH236SAP89GJP6","superpowers","Core engineering workflow that activates on EVERY task. Enforces systematic plan-before-code methodology, multi-file refactoring safety, dependency-aware changes, pre-flight verification, and zero-placeholder quality standards. Use PROACTIVELY on all coding tasks.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers\u002FSKILL.md",[],[150,155,156,157,143,158,159,160,29,161,162,163,164,165,166,167,168,169],"core","tasks","placeholder","code","coding","dependency","quality","refactoring","plan","Safety","methodology","ZeRO","engineering","file","verification",{"skillNo":171,"name":172,"nameZh":6,"description":173,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":179,"publishedAt":46},"01M6C3380VVQHM6CCC843MH5S3","styling","Implement production styling systems with Tailwind CSS, vanilla CSS, or CSS-in-JS. Covers CSS architecture (BEM, utility-first, modules), design tokens, responsive patterns, animation systems, dark mode, container queries, print styles, and performance optimization. Use when implementing designs or building CSS architectures.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fstyling\u002FSKILL.md",[176],{"categoryNo":177,"categoryName":178,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",[172,180,181,29,182,183,184,185,186,187,141,144,45,188,146],"Tailwind","container","performance optimization","js","Animation","first","Production","Optimization","css"]