कैसे jsfiddle में जेएस डिबग करने के लिए

Question

मैं इस jsfiddle को देख रहा हूं: http://jsfiddle.net/carpasse/mcVfK/ यह ठीक काम करता है जो समस्या नहीं है, मैं सिर्फ यह जानना चाहता हूं कि जावास्क्रिप्ट के माध्यम से कैसे डिबग करना है। मैंने डिबगर कमांड का उपयोग करने की कोशिश की और मुझे यह स्रोत टैब में नहीं मिला? किसी भी विचार मैं यह कैसे डिबग कर सकते हैं?

फिडल से कुछ कोड:

angular.module('app', ['appServices'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
                when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
                when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
                when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
                otherwise({redirectTo: '/home'});
}]);

Comments

debugger;कोड में शब्द डालें । क्रोम और फ़ायरफ़ॉक्स स्वचालित रूप से एक स्टेप-थ्रू डीबगर खोलेगा! (मैं @ user3335908 के जवाब से इस टिप यह अधिक प्रमुख बनाने के लिए कॉपी किया है)

— विल शेपर्ड

Answer 1

जावास्क्रिप्ट को क्रोम के स्रोत टैब के fiddle.jshell.net फ़ोल्डर से निष्पादित किया जाता है। आप Chrome स्क्रीनशॉट में दिखाई गई अनुक्रमणिका फ़ाइल में ब्रेकप्वाइंट जोड़ सकते हैं।

Comments

यह मेरे लिए कुछ नहीं दिखाता है। मुझे एक खाली इंडेक्स फाइल मिलती है

— ओलिवर वाटकिंस

@OliverWatkins यह मेरे लिए भी खाली था, मैंने शीर्ष पर "अपडेट" पर क्लिक करके इसे ठीक किया, फिर मैंने देखा कि जब मैं फिर से दौड़ा, तो डेवलपर्स टूल पैनल में "टैब" के तहत "jsfiddle.net" के तहत, उसके नाम फ़ोल्डर में , एक अतिरिक्त सूचकांक फ़ाइल के साथ एक अतिरिक्त निर्देशिका थी जो कोड दिखाती थी। उम्मीद है की यह मदद करेगा!

— 19 मई को MilesMorales

मेरे पास fiddle.jshell.net के तहत एक 3 फ़ोल्डर है जिसमें (इंडेक्स) भी है। अगर मैं इसे खोलता हूं, तो इसमें html के साथ html फाइल निहित है। (लाइन ४ 48 पर जब मैंने यह लिखा था)

— जॉन मैकइंटायर

fiddle.jshell.netकेवल अंदर _displayसे (index)सम्‍मिलित है, जो लगभग खाली HTML पृष्ठ है <p>That page doesn't exist.</p>। मेरा js कोड नहीं है

— CygnusX1

Answer 2

debugger;कोड में स्टेटमेंट का उपयोग करें । इस कथन में ब्राउज़र एक विराम बिंदु सम्मिलित करता है, और आप ब्राउज़र के डीबगर में जारी रख सकते हैं।

यह क्रोम और फ़ायरफ़ॉक्स में कम से कम काम करना चाहिए। https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/debugger

angular.module('app', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
    // *** Debugger invoked here
    debugger;
    $routeProvider.
            when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
            when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
            when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
            when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
            otherwise({redirectTo: '/home'});
}]);

Comments

यह सबसे अच्छा जवाब है!

— vibs2006

Answer 3

कुछ ध्यान देने योग्य बात। अगर आप कभी chrome dev टूल्स का इस्तेमाल कर रहे हैं। प्रेस ctrl+ shift+ Fऔर आप स्रोत में सभी फ़ाइलों के माध्यम से खोज सकते हैं।

Comments

यह बहुत उपयोगी है, मैक पर यह Cmd + Alt + F

— जॉन डब्ल्यू। क्लार्क

यह एक बेहतर जवाब होगा, लेकिन इस तरह से कोड पर निर्धारित ब्रेकप्वाइंट आपको सम्मानित नहीं किया जाएगा।

— स्लैक्स

इस संकेत पर Thx मुझे एक फाइल में कोड मिल सकता है जो स्रोत ट्री में दिखाई नहीं दे रहा है ...

— गारफील्डकॉन

Answer 4

अन्य उत्तरों के अलावा।

बहुत बार यह सांत्वना में डिबग जानकारी लिखने के लिए उपयोगी होता है:

console.log("debug information here");

आउटपुट ब्राउज़र देव टूल्स कंसोल में उपलब्ध है। जैसे यह सामान्य जावास्क्रिप्ट कोड से लॉग किया गया था।
यह काफी सरल और प्रभावी है।

Answer 5

कोड में डिबगर स्टेटमेंट जोड़ना और बाउजर में "डेवलपर टूल" को सक्षम करना। तब जब आप JSFiddle में कोड चला रहे हों, तो डिबगर हिट हो जाएगा!

Answer 6

यहाँ एक और जगह है :)

Jsfiddle.netनोड के तहत ।

Comments

इस स्रोत कोड है कि, पेज पर दिखाया जाता है से घिरा हुआ cointain रहा है <pre>... </pre>। यह एक वास्तविक चलाने योग्य कोड नहीं है।

— CygnusX1

आप इस कोड को डीबग नहीं कर सकते हैं। एक संकेत जो आप नहीं कर सकते हैं वह गायब है ...

— गारफील्डकॉन

Answer 7

जावास्क्रिप्ट को एक्सप्लेनेटर टूल का उपयोग करते समय क्रोम के स्रोत टैब के ?editor_console=trueफ़ोल्डर result (fiddle.jshell.net)/fiddle.jshell.net/_displayफ़ोल्डर में फ़ाइल से निष्पादित किया जाता है । आप तब अपने कोड में ब्रेकप्वाइंट जोड़ सकते हैं और पेज को रिफ्रेश कर सकते हैं।

क्रोम में डिबगिंग जावास्क्रिप्ट पर क्रोम में डिबगर का उपयोग करने के बारे में अधिक जानकारी पाई जा सकती है