2015-09-17 16 views
8

私はReactJSで小さなアプリケーションを構築しており、デバッグが難しい場合があります。Javascript/ReactJSエラーのデバッグ

私はいくつかのJavascript errorを作るたびに、新しい変数の前にlet/varを逃すように、私は後で使うコンポーネントのrequireを逃し、私のアプリケーションは、ちょうど(コードは、エラーがある行を超えて実行されません)動作を停止し、ブラウザのコンソールにエラーは表示されません。あたかもReactJSコードがエラーを傍受していたかのように思えます。 ReactJSのようなものはありますか?コンソールでエラーを表示するにはどうすればよいですか?

私はgulp/gulp-connect/browserifyを使用してアプリケーションを実行しています。

追加のデータやコードサンプルが必要な場合は、質問を更新してください。あなたは、エラーがスローされたが、いくつかの他のコードに飲み込まれることがわかっている場合は

+0

私はもう一度あなたの助けが必要です。あなたはここで見てみてください:http://stackoverflow.com/questions/34672098/pass-array-from-controller-to-view-laravel-5。私はあなたの答えにコメントしました。ありがとうございます –

答えて

6

、あなたはそれがどこかに引っ掛かった場合でも、例外がスローされたときに実行を一時停止するには、ブラウザのデバッガで有効にすることができます。

enter image description here

ただし、ライブラリが特定の機能をサポートしているかどうかをテストする際に、ライブラリが意図的に例外をトリガすることがあります。あなたはそれらを乗り越えなければならないでしょう。

+0

それは助けますが、アプリケーションをかなり複雑にしています - すべてのページをリロードした後、ライブラリがスローするいくつかの例外をクリックする必要があります。 ReactJSが例外を取り除く場合、私はいくつかのカスタムエラーハンドラまたはsthを介して、それらを表示する方法があると確信しています。エラーを隠し、それらにアクセス権を与えないことは理にかなっています。 –

1

WebpackプラグインであるReact Hot Loaderを使用すると、開発プロセスの多くの問題を解決できます。 integrateは既存のプロジェクトに簡単にあり、すべてのものをまとめて入れる方法はquite a few examplesです。

結果:

  • あなたのコードの変更は、ブラウザのコンソールに意味のあるスタックトレースを持つことになり、エラーの場合には、ブラウザ
  • にプッシュされます。
1

誤ったJS構文がgulpプロセスを失敗させ、アプリケーションがブラウザにまったくバンドルされない/展開されてしまうことが予想されます。

ブラウザコンソールではなく、システムコンソール(gulpが実行されている場所)にエラーがあるようです。これが起こったときに、おそらくあなたのギャルププロセスがクラッシュする可能性があります。あなたのコンソールにエラーがない場合、あなたはそれらを聞く必要があるかもしれません。 This postはbrowserifyからエラーを記録する方法の例があります。

gulp.task('browserify', function(){ 
    var b = browserify(); 
    b.add('./main.js'); 

    return b.bundle() 
    .on('error', function(err){ 
     console.log(err.message); // 
     this.end(); 
    }) 
    .pipe(source('main.out.js')) 
    .pipe(gulp.dest('./dist')); 
}); 

おそらく最良の解決策は、あなたが構文的に不正なコードをbrowserifyしようとしていないようbrowserify前jshintを通して、あなたのコードを実行することです。

警告:現在グッユーザ

0

react-slingshotはスターターキットであり、それはコンパイル時エラーを示し、ブラウザ上にスタックトレースを示していません。また、テストが設定されています。

1

私はlet/var、require、およびその他の些細な間違いが反応の文脈の中にないのと同様の問題を抱えていました。 私の場合、原因はPromiseの間違いです。 Promiseは、呼び出された後に発生する例外をすべて抑制するようです。 以下のように例外を処理することで問題を解決できます。

var Promise = require('es6-promise').Promise; 
var promise = new Promise(...) 
promise 
    .then(function(data){...}) 
    .catch(function(e) { 
    console.error(e.stack) 
} 
関連する問題