Loggy - Console + Network Log Collector EN
Kyubiware · Firefox
Capture and export Console & Network logs as structured Markdown for LLM debugging
截图
简介
Loggy is a browser DevTools extension that turns Console and Network activity into clean, structured Markdown — compiled for token efficiency so you can debug faster with AI coding agents.
Why Loggy?
Debugging with AI usually means copying logs, formatting them, and stripping out noise before pasting into a chat. Loggy does that work for you — no need to even open the DevTools panel.
Debug Android browsers without USB
Loggy works on Firefox for Android. Pair it with loggy-serve running on your dev machine and you can capture mobile browser logs over the network — no ADB, no USB cable, no remote debugging setup. Just open the page on your phone, reproduce the bug, and the logs land on your desktop ready to paste into your AI chat.
The AI Debugging Flow
This is the workflow Loggy was built for:
- Describe the bug to your AI coding agent (Claude Code, Cursor, etc.)
- Ask it to add strategic console logs to help diagnose the issue
- Reproduce the bug in your browser (desktop or Android)
- Copy Loggy's compiled output and paste it back into the AI chat
- Let the AI fix it with full context of exactly what happened
This loop is incredibly effective because the AI gets structured, filtered, token-efficient logs instead of raw noise.
Features
- One-click capture — Grab Console logs and Network requests from the current page instantly
- Android support — Capture logs from Firefox for Android via
loggy-serve— no USB debugging required - Smart filtering — Regex-based console filters plus include/exclude patterns for network requests (prefix with
-to exclude, e.g.api.v1 -*.png) - Automatic pruning — Removes binary payloads, base64 blobs, and oversized responses so the output stays readable and token-efficient
- Structured Markdown output — Clean tables with timestamps, log levels, request details, and response summaries
- Copy to clipboard — Export everything in one click, ready to paste
- Server export — Sync logs to your own
loggy-serveinstance for cross-device and mobile workflows
How to use (desktop)
- Open DevTools (
F12) on any page - Click the Loggy tab
- Apply filters if you want to narrow the output
- Click Copy to Clipboard
- Paste into your AI coding agent chat
How to use (Android)
- Start
loggy-serveon your dev machine:
npx loggy-serve --port 8743 - On your Android device, open Firefox and navigate to the page you want to debug
- Open Loggy from the browser menu and point it to your server (e.g.
http://192.168.1.100:8743) - Reproduce the issue, then export — logs land on your dev machine instantly
- Use
loggy printor checkhttp://localhost:8743/loggy/exportto grab the output
Using with loggy-serve
npm install -g loggy-serve
or
npx loggy-serve --port 8743
npm package: loggy-serve
Privacy
Loggy runs locally in your browser by default:
- No data sent to external servers
- No analytics or tracking
- Clipboard access only triggered by your explicit action
- Optional server export only runs when you connect it to your own
loggy-serveinstance
v1.5.0
- release(extension): v1.5.0 (e2f54b5)
- refactor(tests): improve test setup and Firefox compatibility (22c286f)
- refactor(background): simplify navigation detection by removing pendingNavigationByTab tracking (04817f8)
- refactor(background): replace poll count tracker with monotonic seq and dedup (0e05295)
- docs: update AGENTS.md files across project with build-time browser detection and CI improvements (635d23f)
- test(useCaptureData): update onNavigated mocking to use defineProperty (d9311e7)
- refactor(browser-apis): convert event properties to lazy getters (396663c)
- docs(agents): update architecture documentation across project (a6eed8b)
- refactor(extension): improve background services and browser APIs integration (1bea433)
- feat(network): capture and display request bodies in network logs (f63914a)
- feat(formatter): extract network 4xx/5xx failures to Debug Signals section (5353b70)
- feat(utils): improve network failure and polling response formatting with deduplication and request body visibility (df579dc)
- feat(formatter): add network 4xx/5xx failure signals to Debug Signals section (ae63609)
- feat(popup): move preview functionality to header and add markdown preview button (19da72c)
- feat(background): add panel lifecycle detection via runtime port connection (203a42b)
- feat(popup): add settings-aware refresh to usePopupData (655b574)
- feat(extension): improve navigation handling and logging state management (da8afae)
- feat(extension): add panel-to-background snapshot sync for devtools mode (4ba610f)
- feat(routes-filter): add routes filter toggle functionality (538f15e)
- feat(popup): preserve scroll position during refreshes (baf664a)</…
Loggy - Console + Network Log Collector 是做什么的
Loggy - Console + Network Log Collector 是一款面向 Firefox 的开发者工具类扩展,主要用来调试页面、查看样式与请求、测试接口、辅助前端开发。官方对它的介绍是:Capture and export Console & Network logs as structured Markdown for LLM debugging在Firefox 附加组件商店(AMO)上,它当前版本 1.5.0,约 64 名用户。
适合什么人用
从功能定位看,Loggy - Console + Network Log Collector 更适合前端工程师、测试与需要经常查看页面结构的用户。如果你平时只是偶尔遇到相关需求,用浏览器自带功能也能凑合;但如果这件事每天都发生,装一个专门处理它的扩展通常比手动操作省事得多。
怎么安装 Loggy - Console + Network Log Collector
- 打开Firefox 附加组件商店(AMO)上的官方页面;
- 点「添加到浏览器」并确认权限提示;
- 装好后在扩展列表里固定图标,方便随时开关。
本站只做索引与介绍,安装包来自官方商店。如果商店页面提示当前地区不可用,说明该扩展未在你所在区域上架。
常见问题
Loggy - Console + Network Log Collector 是免费的吗?
Loggy - Console + Network Log Collector 在Firefox 附加组件商店(AMO)免费提供下载。它是浏览器扩展,装上就能直接用,不需要注册账号。
Loggy - Console + Network Log Collector 安全吗?
它只申请了 0 项权限,范围比较克制,没有申请「读取所有网站数据」这种大权限。
Loggy - Console + Network Log Collector 支持哪些浏览器?
当前收录的版本来自Firefox 附加组件商店(AMO),适用于 Firefox。同一个扩展在其他商店可能有对应版本,但功能与版本号不一定相同。
怎么卸载 Loggy - Console + Network Log Collector?
在扩展管理页找到 Loggy - Console + Network Log Collector,点移除即可。它在本地保存的设置会一起清掉,不会残留数据。
权限清单 来自 manifest.json 原文
接口权限 6
activeTabalarmsdevtoolsplatform_infoscriptingstorage
