javascript – 如何有效地调试webpack应用程序?

前端之家收集整理的这篇文章主要介绍了javascript – 如何有效地调试webpack应用程序?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试在我的项目中采用webpack dev服务器.我知道它被广泛采用,所以我很惊讶调试应用程序似乎很难.由于webpack默认生成一个巨型包,因此源映射是必须的.我有一个很大的问题:

根据devtool模式,源映射要么很难解析(eval),要么不用于映射某些堆栈跟踪(eval-source-map),例如,有时整个堆栈跟踪如下所示:
在eval(eval at< anonymous> http:// localhost:8082 / js / app.js:2004:2),< anonymous>:43:67).
此外,当您手动调用console.trace或console.error时,不会映射输出.所以你必须使用像sourcemapped-stacktrace这样的工具 – 这既缓慢又容易出错.

目前我使用require.js进行开发,因为它允许我非常容易地调试应用程序 – 每个堆栈跟踪指向正确的文件和行.

如何使用webpack实现相同的结果?

编辑:
谷歌浏览器中的相关问题:https://code.google.com/p/chromium/issues/detail?id=376409

firefox中的相关问题:
https://bugzilla.mozilla.org/show_bug.cgi?id=583083

最佳答案
你使用哪些devtools? Millage可能会有所不同,但Chrome(和IE / Edge,是的…… IE和Edge)倾向于最好地处理源图.虽然目前所有主流浏览器都支持它们,但我对Firefox的体验更糟糕.

我们有非常大的捆绑包和源图,并没有导致devtools的任何缓慢.你使用的是哪种模式?对于webpack,使用“eval”将执行映射文件但不是源的内联源映射(因此您可以看到生成代码,但与原始文件的比例为1:1).由于很多ES6,Typescript和Coffeescript构造都没有很好地映射(例如:生成器或理解),这通常是最简单的模式,也是最快的.使用eval可以确保它在Chrome devtools中“正常工作”而无需开发人员的任何操作(您的文件将位于webpack:// pseudo-folder下)

对于堆栈跟踪,我不知道它是特定于浏览器还是什么.我们使用Mocha进行单元测试,它看起来不像是对源图做了什么特别的事情,它捕获堆栈跟踪以正确地在测试运行器的webpack上呈现它们(它甚至包括webpack://前缀以及原始文件名)和正确的行号),那么该库的需求可能是浏览器特定的还是过时的?

原文链接:https://www.f2er.com/js/428911.html

猜你在找的JavaScript相关文章