使用Browserify时是否可以对浏览器中的不同JS文件进行故障排除？

Question

我习惯于使用旧的方式处理JavaScript文件，其中每个JS文件都有自己的元素。例如：

<script src="foo.js"></script>
<script src="bar.js"></script>

旧方法的好处在于Chrome Dev Tools我可以分析特定的JS文件。例如，如果发生错误，我知道要查看bar.js。即使在生产中，因为我们没有捆绑。

我正在使用Browserify进行研究，但我找不到如何对使用Browserify捆绑的单个JS文件进行故障排除。

问题：使用Browserify时是否可以对浏览器中的不同JS文件进行故障排除？如果是，那怎么办？

Answer 1

这个问题的答案是肯定的。这是详细信息。假设您有2个JS文件：

// main.js
var unique = require('uniq');
var foo = require('./foo.js');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(foo(7));
console.log("works!");

console.log(unique(data));

和

// foo.js
module.exports = function (n) { return n * 111 }

使用以下命令生成捆绑文件及其映射文件：

browserify main.js --debug | exorcist bundle.js.map > bundle.js

在Dev Tools中你会看到这个（你可以看到2个文件是可调试的）：