如何在Browserify中调试JavaScript

Question

我正在为新项目使用browserify，目前它的表现非常好。

但是有一个大问题，如何分别调试每个js文件。它将所有文件捆绑在一起，并在出错时指向bundle。

我正在使用Chrome和源代码映射，但在调试中并没有真正帮助。

有什么想法吗？

更新：更多信息：

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

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

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

我认为我的源代码映射是开启的？

- JS-JMS-WEB

---

description.js 的第 9 行为什么没有帮助？在构建文件之前，您是否会对其进行代码检查以捕获错误？您何时/在哪里使用 reactify？ - Kelly J Andrews

那个错误是一个标准的JS语法错误。通常是因为语法不正确或者有多余的内容。 - Kelly J Andrews

不，错误仍然在bundle.js文件中，浏览器对你的其他文件一无所知。这告诉你要查找哪个文件中的错误。它正在按预期工作。 - Kelly J Andrews

当你不使用--debug时，会出现相同的错误吗？ - Kelly J Andrews

没有使用--debug也没有任何区别。我在使用或不使用--debug时都会收到相同的错误。 - JS-JMS-WEB

Answer 1

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

我随后使用npm脚本，运行了watchify和browserify命令:

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

使用浏览器中的脚本，一切都很顺利——如预期地记录到控制台。然后我在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将再次按预期运行。

- Kelly J Andrews

---

此外，如果您的源映射在浏览器中无法正常工作，请检查浏览器开发工具设置以确保启用了源映射。我知道在Chrome中，我曾经关闭过它们，然后忘记重新启用它们。 - CodingWithSpike