जावास्क्रिप्ट/ReactJS त्रुटियों को डिबगिंग

Question

मैं ReactJS के साथ एक छोटा सा एप्लीकेशन बना रहा हूं और कभी-कभी इसे डीबग करना मुश्किल लगता है।

हर बार जब मैं कुछ Javascript error बनाने, नए चर के सामने let/var लापता, एक घटक है कि मैं बाद में उपयोग के लिए याद आ रही require की तरह, अपने आवेदन सिर्फ बंद हो जाता है काम कर (कोड लाइन से परे निष्पादित नहीं करता है, जहां त्रुटि है), लेकिन मुझे ब्राउज़र के कंसोल में कोई त्रुटि नहीं मिल रही है। ऐसा लगता है जैसे कुछ ReactJS कोड त्रुटियों को रोक रहा था, शायद उन्हें कुछ कस्टम तरीके से संभालना। क्या ReactJS में ऐसा कुछ है? मैं कंसोल में त्रुटियों को कैसे देख सकता हूं?

मैं आवेदन चलाने के लिए gulp/gulp-connect/browserify का उपयोग कर रहा हूं।

मुझे बताएं कि आपको कोई अतिरिक्त डेटा या कोड नमूने चाहिए, तो मैं सवाल अपडेट करूंगा।

Answer 1

आप जानते हैं कि एक त्रुटि फेंक दिया लेकिन कुछ अन्य कोड से निगल लिया है, तो आप निष्पादन को रोकने के लिए जब एक अपवाद फेंक दिया जाता है अपने ब्राउज़र की डीबगर में सक्षम कर सकते हैं, भले ही वह कहीं पकड़ा है:

ध्यान दें कि ब्राउज़र कभी-कभी जानबूझकर अपवादों को ट्रिगर करता है जबकि यह जांच करता है कि ब्राउज़र कुछ विशेषताओं का समर्थन करता है या नहीं। आपको उन पर कदम उठाना होगा।

Answer 2

React Hot Loader का उपयोग जो वेबपैक प्लगइन है, को विकास प्रक्रिया में आपके अधिकांश समस्याओं को हल करना चाहिए। मौजूदा प्रोजेक्ट में integrate के लिए आसान है और quite a few examples सभी चीजों को एक साथ कैसे रखा जाए।

परिणामस्वरूप:

• अपने कोड में परिवर्तन गलती की स्थिति में ब्राउज़र
• पर लाई जानी हैं आप ब्राउज़र कंसोल में सार्थक स्टैक ट्रेस करना होगा।

Answer 3

मेरा अनुमान है कि यह गलत जे एस वाक्य रचना अपने घूंट प्रक्रिया विफल जो आपके आवेदन बंडल नहीं किया जा रहा/बिल्कुल ब्राउज़र में तैनात में परिणाम होगा उत्पन्न कर रहा है।

ऐसा लगता है कि आपके सिस्टम कंसोल (जहां गल्प चल रहा है) में त्रुटियां होनी चाहिए - आपके ब्राउज़र कंसोल के विपरीत। संभवत: आपकी गलती प्रक्रिया तब भी दुर्घटनाग्रस्त हो जाती है जब यह भी होता है। अगर आपके कंसोल में कोई त्रुटि नहीं है, तो आपको उन्हें सुनना पड़ सकता है।

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 के माध्यम से अपने कोड को चलाने के लिए है: This post कैसे browserify से त्रुटियों लॉग इन करने का एक उदाहरण है।

चेतावनी: नहीं एक वर्तमान घूंट उपयोगकर्ता

Answer 4

react-slingshot एक स्टार्टर किट है और यह संकलन समय पर त्रुटि दिखाता है और ब्राउज़र पर स्टैक ट्रेस को दर्शाता है। इसमें परीक्षण की स्थापना भी है।

Answer 5

मुझे प्रतिक्रिया संदर्भ के अंदर लापता/var, आवश्यकता, और अन्य छोटी गलतियों की तरह इस तरह की समस्या से पीड़ित था। मेरे मामले में, कारण वादा कथन की गलती है। वादा किसी भी अपवाद को दबाता है जो इसे कहने के बाद होता है। मैं नीचे जैसे अपवाद को संभालने से समस्या का समाधान कर सकता हूं।

var Promise = require('es6-promise').Promise; 
var promise = new Promise(...) 
promise 
    .then(function(data){...}) 
    .catch(function(e) { 
    console.error(e.stack) 
}