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

pug-loc-debugger

v1.0.2

Published

Program to highlight loc position on pug tokens/nodes

Downloads

11

Readme

pug-loc-debugger

Use this tool to visualize and debug loc properties on Pug tokens/nodes.

This tool relies on Pug's plugin system to grab tokens/nodes at each stage of the Pug compiler.

preview of pug-loc-debugger in action

Install

npm install -g pug-loc-debugger

Running

To run, simply cd to a Pug directory and run pug-loc-debugger. It should prompt you for a stage and a file. For the file input, hit enter to use the first file in the cases directory. Otherwise type in the file name you wish to jump to (.pug extension is optional).

Keys

I wanted to be able to quickly jump around so I designed the program to take single key input. After picking a stage and file, you should be presented with a screen showing the current token highlighted in the Pug source file. Use the following keys to work with the tokens:

Navigation

c) Next file
z) Previous file
s) Next token
w) Previous token
r) Run until a token does not match it's expected location value

Modes

j) Toggle JSON mode (default). When on, the line will be JSON.stringified() to better show what is going on with the whitespace (tabs at the start of the line as well as whitespace at the end of the line can be quite confusing otherwise).

Debugging

q) Move expected location start left one character
e) Move expected location start right one character
a) Move expected location end left one character
d) Move expected location end right one character
spacebar) Save the expected location of this token to disk

Save location

Hitting the spacebar will save the expected location to a file in the pug-loc-debugger install directory. If you used the -g flag, you can get the install folder by running npm config get prefix then going to node_modules/pug-loc-debugger/save to see the save folders.

This tool was designed to work with different repos/branches so the save location will look like:

save/jbsulli-pug/source-end-locations/parser

Where jbsulli is the GitHub user/organization, pug is the repo, source-end-locations is the branch, and parser is the stage. From there you should see files matching the Pug file you were debugging. If you don't see a file in there, you probably haven't saved any token locations for that file yet.