browserify - 如何在 browserify 中调试 js

Question

我在新项目中使用了 browserify。到目前为止，它运行得非常好。

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

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

有任何想法吗？

更新:更多信息:

我在 package.json 中使用这个命令

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

并得到如上所示的错误，这并不理想。

我相信我的源 map 已开启？

Answer 1

我不确定你是如何在没有任何代码的情况下使用浏览器的命令行工具，但你应该可以使用 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

编辑 在对此进行更多挖掘之后 - 这里特别提到的问题是 ParseError - 这意味着 Browserify 从未真正进入正确的调试阶段。没有真正考虑过，但这完全有道理。

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

js

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

主文件

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

然后我跑了 browserify使用 watchify与 npm脚本:

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

在浏览器中使用脚本，一切都很好 - 它按预期记录到控制台。然后我编辑了 a.js有一个错字:

js

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

浏览器 和 watchify 抛出如上所示的错误: path/to/file/a.js:3 ParseError: Unexpected Token .

Browserify 无法正确编译文件，因此会引发错误。您应该在构建期间在控制台中看到这一点。

来测试一下 --debug标志按预期工作，我再次修改了代码:

js

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

这里的期望是 TypeError因为函数现在需要 a成为一个函数。

浏览器中的控制台现在显示:
Uncaught TypeError: a is not a function __________ a.js:2
修复您的解析问题，以及 browserify --debug将再次开始按预期行事。