如何在browserify中调试js

Question

我使用browserify进行新项目.到目前为止它确实很好用.

我有一个大问题.如何单独调试每个js文件.它将所有文件捆绑在一起,如果发生错误则指向捆绑.

我正在使用chrome和源映射,但它在调试方面并没有真正帮助.

有任何想法吗？

更新:更多信息:

我在package.json中使用此命令

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

并获得如上所示的错误,这是不理想的.

我相信我的源地图已开启？

Answer 1

我不确定你是如何在没有任何代码的情况下使用命令行工具进行浏览器化的,但是你应该能够使用它debug.

--debug -d启用源映射,允许您单独调试文件.

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

有关CLI工具的更多信息,请查看此处 - https://github.com/substack/node-browserify#usage

编辑经过多一点挖掘 - 这里特别受到关注的问题是ParseError- 这意味着Browserify实际上从未进入正确的调试阶段.没有真正想过,但这完全有道理.

为了测试这个 - 我创建了两个简单的文件:

a.js

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

main.js

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

我然后跑browserify使用watchify带有npm脚本:

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

在浏览器中使用该脚本,一切都运行良好 - 它按预期登录到控制台.然后我a.js用错字编辑了:

a.js

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

的浏览器和watchify投掷上述错误:path/to/file/a.js:3 ParseError: Unexpected Token.

Browserify无法正确编译文件,因此它会抛出错误.您应该在构建期间在控制台中看到这一点.

为了测试该--debug标志是否按预期工作,我再次修改了代码:

a.js

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

这里的期望是TypeError因为函数现在期望a是一个函数.

浏览器中的控制台现在显示: Uncaught TypeError: a is not a function __________ a.js:2

修复您的解析问题,并browserify --debug再次开始按预期运行.