Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add jpoutrin/product-forge --skill console-debugginggit clone --depth 1 https://github.com/jpoutrin/product-forgeWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/jpoutrin/product-forge/console-debugging)<a href="https://agentmods.dev/skills/jpoutrin/product-forge/console-debugging"><img src="https://agentmods.dev/badge/skills/jpoutrin/product-forge/console-debugging/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/jpoutrin/product-forge/console-debugging"><img src="https://agentmods.dev/badge/skills/jpoutrin/product-forge/console-debugging.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00037 | $0.01371 |
| Opus 5.5 | $0.00015 | $0.00548 |
| Sonnet 5.5 | $0.00007 | $0.00274 |
| Haiku 4.5 | $0.00004 | $0.00137 |
Grade A, and why
console-debugging scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 200 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Console Debugging Skill
Systematic approach to analyzing browser console messages using Chrome DevTools MCP.
Console Message Categories
Error Messages (Highest Priority)
| Type | Example | Typical Cause |
|---|---|---|
| JavaScript Error | Uncaught TypeError: Cannot read property 'x' of undefined |
Null reference |
| Network Error | Failed to load resource: net::ERR_CONNECTION_REFUSED |
API unavailable |
| CORS Error | Access-Control-Allow-Origin |
Backend configuration |
| CSP Error | Content Security Policy |
Security restriction |
| Syntax Error | SyntaxError: Unexpected token |
Invalid JavaScript |
| Reference Error | ReferenceError: x is not defined |
Undefined variable |
Warning Messages (Medium Priority)
| Type | Example | Action |
|---|---|---|
| Deprecation | 'componentWillMount' is deprecated |
Plan migration |
| Performance | Long task took 200ms |
Optimize |
| Security | Insecure form submission |
Fix HTTPS |
| Mixed Content | Mixed Content: loading HTTP on HTTPS |
Update resource URLs |
Info/Log Messages (Context)
| Type | Purpose |
|---|---|
| Debug output | Developer console.log statements |
| Library info | Framework initialization messages |
| Analytics | Tracking events |
| State changes | Application state updates |
Analysis Workflow
1. Collect Console Messages
Use Chrome DevTools MCP to list all console messages:
Tool: mcp__chrome-devtools__list_console_messages
Parameters: { "level": "error" } // or "warning", "info", "debug"
2. Filter by Severity
Start with errors, then warnings:
- Errors first - These break functionality
- Warnings second - These indicate problems
- Info last - These provide context
3. Group by Source
Categorize errors by their origin:
- Application code - Your own JavaScript
- Third-party libraries - External dependencies
- Browser/extension - Not your code
- Network - API/resource failures
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 200 lines · 37 tokens per session scan A b096ce06e119
console-debugging is a skill published in the GitHub repository jpoutrin/product-forge (16 stars, last pushed 7mo ago), licensed MIT. It adds 37 tokens to every session and 1,371 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
inspecting-hermes-desktop-dom
Read the live Hermes desktop DOM/CSS over CDP.
fixing-motion-performance
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
optimize-web-animations
Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations…
weapp-tailwindcss-troubleshoot
A troubleshooting guide for weapp-tailwindcss and its CLI when generated styles, class conversion, builds, or hot reload do not work as expected.
frontend-testing-debugging
Use when testing, debugging, or making targeted improvements to rendered frontend apps through the Frontend Design Skills or web dev plugin: local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA. Check whether the Browser plugin is available and use it first when it is…
Dark Mode Bug Finder
Detect dark mode rendering issues including contrast failures, missing theme tokens, image inversions, and transition glitches across components.