How to debug js in browserify

Question

I have using browserify for new project. It works really well so far.

I have one big issue though. How can I debug each js file separately. It bundles all the files together and points to bundle if error occurs.

I am using chrome and source maps but it doesn't really help in debugging.

Any ideas?

Update: More info:

I'm using this command in package.json

"start": "watchify scripts/main.js -o scripts/bundle.js --debug",

and getting errors as shown above which is not ideal.

I believe my source maps are on?

Answer 1

I'm not exactly sure how you are using the command line tool for browserify without any code, but you you should be able to utilize debug.

--debug -d Enable source maps that allow you to debug your files separately.

browserify main.js -o bundle.js --debug

For more info on the CLI tool you can look here - https://github.com/substack/node-browserify#usage

Edit After a bit more digging on this - the issue specifically being hit here is a ParseError - which means that Browserify is never actually getting to the proper debug stage. Hadn't really thought it through, but this made perfect sense.

In order to test this - I create two simple files:

a.js

module.exports = function(a) {
    return a;
}

main.js

var a = require('./a.js');
console.log(a("something"));

I then ran browserify using watchify with an npm script:

"start": "watchify main.js -o bundle.js --debug"

Using the script in a browser, and everything worked great - it logged to console as expected. I then edited a.js with a typo:

a.js

module.exports = function(a) {
    return a---
}

The browser and watchify threw the error shown above: path/to/file/a.js:3 ParseError: Unexpected Token.

Browserify is not able to compile the file properly, so it's throwing an error. You should be seeing this in the console during the build.

To test that the --debug flag works as expected, I modified the code again:

a.js

module.exports = function(a) {
    return a('something');
}

The expectation here would be a TypeError since the function now expects a to be a function.

The console in the browser now displays: Uncaught TypeError: a is not a function __________ a.js:2

Fix your parse issues, and browserify --debug will once again start behaving as expected.