【发布时间】：2016-04-27 21:21:02
【问题描述】：
我非常依赖 React Native 的“在 Chrome 中调试”功能，因此也依赖 Chrome 的调试器。但是我注意到这个系统有一个巨大的缺陷：我使用ES6-style import 导入的模块在 Chrome 的范围内是不可见的，即使代码执行得很好。这使得使用这些导入语句调试代码变得非常困难。
如果我用var MyModule = require(...) 替换import 语句，则模块在范围内可见。
阅读 ES6 module import is not defined during debugger 后，我查看了 React Native 生成的转译源代码（通过在我的浏览器中加载 http://localhost:8081/index.ios.bundle?platform=ios&dev=true）并注意到有问题的模块以不同的名称加载：
var _MyModule = require('MyApp/MyModule.js');
var _MyModule2 = babelHelpers.interopRequireDefault(_MyModule);
事实上我可以在 Chrome 中使用_MyModule2。我有几个相关的问题：
- 源地图似乎是一项了不起的技术！为什么它们也不支持映射变量名？
- 有没有什么方法可以让在带有 React Native 的 Chrome 中使用
import语句进行调试更容易？例如，我习惯于将鼠标移到 Chrome 中的变量上以查看值，但这些导入不再可能。 （Debugging with chrome with es6 建议在 Chrome 中启用#enable-javascript-harmony并关闭源映射，但考虑到 Flow 代码和丑化，我怀疑这是否能正常工作。）
谢谢。
【问题讨论】：
-
我还注意到
this变量在 Chrome 调试器和转译代码之间的行为有时会有所不同。如果我使用箭头函数，代码在调试器中看起来不错，但我偶尔会在运行代码时得到_this.<something> is not a function。这也是预期的吗？ -
我无法使用 _MyModule。例如，这是我在捆绑文件中看到的：
var _MainContainer=require(565 /* ./MainContainer */);var _MainContainer2=babelHelpers.interopRequireDefault(_MainContainer);但它在 chrome 控制台中不可用。通过检查window对象，我似乎也找不到任何东西。 -
我什至无法为
window.something = foo分配任何东西。我想了一段时间，但还是让它过去吧。这是一个问题，因为我以前一直在控制台中测试代码。 -
啊，你需要在 chrome 控制台的 'debuggerWorker.js' 框架中。我现在至少可以找到我分配给
window的内容。我相信我很快就能找到其他所有东西。 -
感谢 cmets 的帮助。是的，我认为
debuggerWorker.js的事情不久前发生了变化。
标签： javascript google-chrome debugging ecmascript-6 react-native