2015-09-17 33 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吞下異常,我敢肯定有一種方法可以通過一些自定義的錯誤處理程序或某物來顯示它們。隱藏錯誤並且不允許訪問它們是沒有意義的。 –

1

使用React Hot Loader這是一個Webpack插件,可以解決您在開發過程中遇到的大多數問題。將integrate轉化爲現有項目很容易,並有quite a few examples如何將所有的東西放在一起。

結果:

  • 您的代碼更改將在錯誤的情況下被推到瀏覽器
  • ,你將在瀏覽器控制檯有意義的堆棧跟蹤。
1

我猜測,不正確的JS語法導致你的吞嚥過程失敗,這將導致你的應用程序沒有被捆綁/部署在瀏覽器中。

看起來你的系統控制檯(其中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')); 
}); 

也許是最好的解決辦法就是通過jshint browserify之前運行代碼,這樣你是不是想browserify語法上是無效的代碼。

警告:不是當前吞用戶

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) 
}