npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

ai-auto-web-debug

v1.0.2

Published

Static HTTP server that auto-injects browser console errors into server logs, for AI-assisted debugging.

Readme

ai-auto-web-debug

让 AI 调试网页时,也能看到浏览器控制台的报错。

ai-auto-web-debug 是一个零依赖的静态 HTTP 服务。它在任意目录启动后,会自动向所有 HTML 页面注入一段客户端脚本,把浏览器里的 console.error / console.warn / window.onerror / unhandledrejection 实时回传到服务端日志。这样在命令行里跑着大模型调试时,模型就能像看到 HTTP 日志一样直接看到页面里抛出的报错。

特性

  • 零依赖(只使用 Node 内置模块)
  • 自动注入到 HTML <head> 末尾,使用标记防重复注入
  • 捕获 console.errorconsole.warn、未捕获异常、未处理 Promise 拒绝
  • 使用 navigator.sendBeacon 发送,页面刷新 / 跳转时也不丢日志
  • 错误日志带时间戳、级别、URL、行号、堆栈,并附带 ANSI 颜色
  • 支持自定义端口、绑定地址、托管目录

安装

npm install -g ai-auto-web-debug

使用

进入要调试的目录并启动:

cd /Users/Downloads/miniworld
webdebug

或显式指定目录和端口:

webdebug ./ -p 8080
webdebug /Users/Downloads/miniworld -p 9000

命令行选项:

webdebug [dir] [options]

  dir         要托管的目录(默认:当前目录)

  -p, --port  监听端口(默认:8080)
  -h, --host  绑定地址(默认:127.0.0.1)
  --no-open   不打印访问链接
  -v, --version
  --help

启动后用浏览器打开 http://127.0.0.1:8080/,页面里的报错会立刻打印到终端:

2026-07-25T10:02:06.950Z [INFO]  http://127.0.0.1:8080/
  webdebug client installed
2026-07-25T10:02:06.959Z [ERROR] http://127.0.0.1:8080/
  at http://127.0.0.1:8080/:0:0
  Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
  TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

Ctrl+C 停止。

工作原理

  1. bin/webdebug.js 解析参数并调用 lib/server.js 启动一个 Node 原生 http 服务。
  2. 对所有 .html / .htm 响应,读取文件后在 </head> 之前注入客户端脚本与标记 <!-- http-bug-injected -->,避免重复注入。
  3. 客户端脚本 hook 浏览器 4 类错误信号,统一通过 navigator.sendBeacon(回退到 fetch keepalive)发到 POST /__http_bug_log__
  4. 服务端把日志格式化成带颜色与堆栈的多行文本,写到 stdout。

不做什么

  • 不做热更新 / 文件监听。需要改文件后刷新浏览器即可。
  • 不做 HTTPS。需要 HTTPS 时请在前面套一层 ngrok / cloudflared
  • 不注入到 application/javascript 文件里,避免影响模块导入顺序。错误仍会通过 window.onerror 等回传。

开发

仓库结构:

.
├── bin/
│   └── webdebug.js      # CLI 入口
├── lib/
│   └── server.js        # HTTP 服务 + 注入逻辑
└── package.json

直接运行:

node ./bin/webdebug.js ./ -p 8080

License

MIT