断点调试最小化/损坏/编译变量

Question

在我的工作流程中构建JavaScript源代码地图，我一直在寻找一些关于调试源代码映射的特定部分的文档。在下面的图片中，我运行的是压缩的Javascript代码，但是通过源代码映射的魔力，Chrome调试器能够重建看似未压缩的代码，让我调试：

​

​

但是，如果查看局部变量，则没有定义someNumber和someOtherNumber。相反，我们有a和r，它们是为这个函数编译的变量名。这对于和Chrome来说都是一样的。

我试着在源代码地图上查看Chrome DevTools文档，但是我没有看到任何关于这个的文章。它是否是当前源代码地图调试的一个限制，有什么解决办法吗？

更新

从那时起，我就在铬项目中发现了这条线。它看起来不像是已经或正在实现的。随着团队开始在构建系统中实现Babel来编写ES2015代码，这正成为一个越来越重要的问题。有没有团队找到办法绕过这件事？

Answer 1

看起来它已经被寻址，并将成为可用的在下一次铬更新中

Answer 2

在右手边使用Watch Expressions，通常可以解决这个问题。展开菜单，并使用加号按钮添加变量。您可以使用someNumber和someOtherNumber，甚至someNumber + someOtherNumber。

Answer 3

在Javascript源代码映射中仍然没有映射变量名的解决方案，但是Babel 6有一个解决方案。由于我们已经采用了ES2015，错误的导入名称成为开发过程中的一个主要难点。因此，我创建了一个替代CommonJS模块转换的方法，它不更改名为babel-plugin-transform-es2015-modules-commonjs-simple的导入名。

只要您不编写依赖于导出动态绑定的模块，它就是默认babel模块转换的替代：

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs-simple

和.babelrc

"plugins": ["transform-es2015-modules-commonjs-simple"]

这将将ES2015模块编译为CommonJS，而不会更改导入模块的任何符号名。自述中对此作了说明。

不过，这无助于缩小/丑化，因此最好的解决方案似乎是在开发过程中不要使用小型化。那么，至少这只是一个问题，如果你必须调试一个生产网站上的东西。