ChromeでReact Nativeを使用してES6インポートステートメントをデバッグする

Question

React Nativeの「Chromeでデバッグ」機能、したがってChromeのデバッガに大きく依存しています。しかし、私はこのシステムに大きな欠陥があることに気付きました。ES6-style importを使ってインポートしたモジュールは、コードが正常に実行されてもChromeのスコープには表示されません。これにより、これらのインポートステートメントを使用するデバッグコードが非常に困難になります。

importステートメントをvar MyModule = require(...)に置き換えた場合、モジュールはスコープ内に表示されます。

ES6 module import is not defined during debuggerを読んだ後、私は（私のブラウザでhttp://localhost:8081/index.ios.bundle?platform=ios&dev=trueをロードすることによって）ネイティブに反応によって生成transpiledソースコードを見ていたし、問題のモジュールが別の名前でロードされていることに気づい：

var _MyModule = require('MyApp/MyModule.js'); 
var _MyModule2 = babelHelpers.interopRequireDefault(_MyModule); 

と実際にはChromeで_MyModule2を使用できます。私はいくつかの関連する質問があります：

1. ソースマップは素晴らしい技術のようです！なぜ変数名のマッピングもサポートしていないのですか？
2. importステートメントでデバッグする方法は、ChromeでReact Nativeを使用すると簡単にできますか？たとえば、私は値を見るためにマウスの変数をChromeの変数に移動するだけでしたが、これらのインポートではこれ以上使用できません。 （Debugging with chrome with es6は、Chromeで#enable-javascript-harmonyを有効にして、ソースマップをオフにするが、私はこれがうまく機能することはないだろうフローコードとuglificationを与えられたことを示唆している。）

はありがとうございます。

Answer 1

私はChromeのフラグでChromeの実験機能を有効にしましたが、ES6形式のインポートを使用しても問題はありません。表示されていない場合は、アドレスバーにchrome://flagsと入力してExperimental JavaScriptを探してください。これはあなたの問題を解決するはずです。