如何在browserify中调试js

Question

我在新项目中使用 browserify。到目前为止效果很好。

不过我有一个大问题。如何分别调试每个js文件。它将所有文件捆绑在一起，并在发生错误时指向 bundle。

我正在使用 chrome 和源映射，但它对调试没有真正帮助。

有什么想法吗？

更新：更多信息：

我在 package.json

中使用此命令

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

出现如上所示的错误，这并不理想。

我相信我的源地图是打开的？

Answer 1

我不确定你是如何在没有任何代码的情况下使用 browserify 的命令行工具的，但你应该能够利用 debug.

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

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

有关 CLI 工具的更多信息，您可以在此处查看 - https://github.com/substack/node-browserify#usage

Edit 在对此进行更多挖掘后 - 这里特别遇到的问题是 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 将再次开始按预期运行。

How to debug js in browserify