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 🙏

© 2024 – Pkg Stats / Ryan Hefner

web-debug

v2.1.4

Published

A static web server with liveload for web develop

Downloads

7

Readme

#web-debug

一个用于辅助前端开发的轻量级调试工具。支持自动刷新远程调试

功能:

本工具会在页面被请求时动态插入livereload及weinre调试标签,同时在自动在后台开启文件watch及weinre后台服务。

  • 支持livereload
  • 支持在当前页面生成二维码(ctrl+shift+z)
  • 支持weinre调试(先前版本采用debuggap, 现弃用)
  • 支持动态数据mock, 此功能由tiny-http提供。
  • 实现类fiddler,chales全局代理,开启此模式可以在手机端调试任意页面

特点:

支持静态服务器模式代理模式。可以自动在任意页面注入script

安装:

npm install -g web-debug

使用:

> web-debug -r ./htdocs -p 8080 --autostart
;开启服务器模式

> web-debug -r ./htdocs -p 7777 --proxy
;开启全局代理模式,可以调式任意页面

参数说明:

-r, --root 静态服务器模式下为web根目录,代理模式下为watch目录
-p, --port 静态服务器模式下为web启动端口,代理模式下为代理监听端口
-A, --autostart 自动打开浏览器
-P, --proxy     启用代理模式,默认为静态服务器模式
-w, --weinre    启用weinre,默认使用debuggap

ctrl+shift+z可以显示二维码,方便手机应用(如微信)打开页面

局限性:

局限性主要针对代理模式:

  • 为了保证代理速度,目前只支持uff-8编码的页面,代理gbk页面时会出现乱码
  • 代理会直接放行https请求,所以暂不支持https页面标签动态注入

功能增强计划:

  • [ ] 增加对gbk编码的支持
  • [ ] 增加对自定义script的实时注入(目前仅支持livereload.js(实时刷新),qrcode.js(二维码),target.js(远程调试))
  • [ ] 支持https

Dependencies:

  • chokidar: ^1.3.0
  • livereload-server-spec: 0.2.3
  • portfinder: 0.4.0
  • tiny-http: >=2.0.0
  • weinre: *