debugging

📁 pluginagentmarketplace/custom-plugin-javascript 📅 Feb 7, 2026

总安装量

周安装量

#63195

全站排名

安装命令

npx skills add https://github.com/pluginagentmarketplace/custom-plugin-javascript --skill debugging

Agent 安装分布

trae 2

gemini-cli 2

replit 2

antigravity 2

claude-code 2

codex 2

Skill 文档

JavaScript Debugging Skill

Quick Reference Card

Console Methods

console.log('Basic log');
console.info('Info');
console.warn('Warning');
console.error('Error');

// Formatted output
console.table([{ a: 1 }, { a: 2 }]);
console.dir(object, { depth: null });

// Grouping
console.group('Group');
console.log('Inside group');
console.groupEnd();

// Timing
console.time('operation');
doSomething();
console.timeEnd('operation');

// Assertions
console.assert(condition, 'Failed message');

// Counting
console.count('label'); // label: 1, 2, 3...

Debugger

function processData(data) {
  debugger; // Pause here in DevTools
  const result = transform(data);
  return result;
}

DevTools Breakpoints

Type	Use Case
Line	Pause at specific line
Conditional	Pause when condition true
DOM	Pause when DOM changes
XHR/Fetch	Pause on network requests
Event	Pause on event listeners
Exception	Pause on errors

Node.js Debugging

# Start with inspector
node --inspect app.js
node --inspect-brk app.js  # Break at start

# Chrome: chrome://inspect
# VS Code: Use launch.json

VS Code launch.json

{
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "name": "Debug",
    "program": "${workspaceFolder}/src/index.js"
  }]
}

Troubleshooting Patterns

Async Debugging

async function debug() {
  console.log('1. Start');
  try {
    const result = await asyncOperation();
    console.log('2. Result:', result);
  } catch (error) {
    console.error('Error:', error);
    console.log('Stack:', error.stack);
  }
  console.log('3. End');
}

Event Debugging

// Log all events
element.addEventListener('click', (e) => {
  console.log('Event:', e.type);
  console.log('Target:', e.target);
  console.log('CurrentTarget:', e.currentTarget);
  console.log('Phase:', e.eventPhase);
});

// Monitor events (DevTools)
// monitorEvents(element, 'click')

Memory Debugging

// Check memory usage
if (performance.memory) {
  console.log('Heap:', performance.memory.usedJSHeapSize);
}

// Force garbage collection (DevTools)
// gc()

Network Debugging

// Log fetch requests
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  console.log('Fetch:', args[0]);
  const response = await originalFetch(...args);
  console.log('Response:', response.status);
  return response;
};

Common Issues

Problem	Debug Approach
undefined	Log typeof, check chain
NaN	Log operands, check types
Race condition	Add timestamps, sequence logs
Memory leak	Heap snapshot, check listeners
Event not firing	Log event, check delegation

Debug Checklist

Reproduce – Isolate the issue
Inspect – Check values and types
Trace – Follow execution flow
Compare – Working vs broken state
Fix – Apply smallest change
Verify – Test the fix

Production Patterns

Error Tracking

window.onerror = (msg, url, line, col, error) => {
  console.error('Error:', { msg, url, line, col });
  // Send to error tracking service
};

window.onunhandledrejection = (event) => {
  console.error('Unhandled rejection:', event.reason);
};

Performance Profiling

// Mark timing points
performance.mark('start');
doWork();
performance.mark('end');

performance.measure('work', 'start', 'end');
console.log(performance.getEntriesByName('work'));

Agent 08: Testing & Quality (detailed learning)
Skill: testing: Test debugging
Skill: performance: Performance profiling

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台