Awesome
trackingdog
Find the source location of a line/column in a generated file. Supports JavaScript and CSS, local files and http urls.
Installation:
npm install -g trackingdog
Usage example:
$ trackingdog http://charcod.es/static/bundle-44.0449b572b5.js:4:22208
http://charcod.es/js/app.js:95:0
Note that it is also possible to pipe a full stack trace over stdin:
$ pbpaste | trackingdog # paste from clipboard (macos only)
$ trackingdog < myStacktraceFile.txt # pipe in a file
You can map local folders in as workspaces (à la Chrome Dev Tools) and have the remote files mapped to paths local to your filesystem:
$ trackingdog --workspace http://charcod.es/js=./src http://charcod.es/static/bundle-44.0449b572b5.js:4:22208
./src/app.js:95:0
If the referenced source file can be retrieved, you'll get a bit of context:
$ trackingdog https://code.jquery.com/jquery-1.10.1.min.js:4:745
https://code.jquery.com/jquery-1.10.1.js:109:16
jQuery.ready();
}
},
// Clean-up method for dom ready events
detach = function() {
if ( document.addEventListener ) {
^
If the source asset is available as a local file, the output will be a CWD-relative path with :<line>:<column> appended:
$ trackingdog path/to/jquery-1.10.1.min.js:4:745
testdata/existingJavaScriptSourceMap/jquery-1.10.1.js:109:16
That means you can use it to build a command line to open an editor that supports that syntax for jumping directly to a specific line/column:
atom `trackingdog path/to/jquery-1.10.1.min.js:4:745`
code -g `trackingdog path/to/jquery-1.10.1.min.js:4:745`
Programmatic usage
The main export of the package is a TrackingDog
class that can be used
to track one or more source locations via the track
method. The assets
loaded and parsed as part of this effort are cached in the instance, so
it's cheaper to track more source locations in the same files.
Example usage:
const TrackingDog = require('trackingdog');
const dog = new TrackingDog();
const { url, line, column } = await dog.track({
url: 'https://code.jquery.com/jquery-1.10.1.min.js',
line: 4,
column: 19,
});
console.log(
`Yay, the location in the original source is ${url}:${line}:${column}`
);
Future ideas
- Recursively attempt to load the source file and see if it also has a source map reference (in case someone used a "dist" file in a bundle without using source-map-loader or equivalent)