2015-09-17 36 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) 
}