199

मैं नॉकआउटJS टेम्प्लेट्स में डिबगिंग समस्याओं से परेशान हूं।

कहते हैं कि मैं " items" नामक एक संपत्ति से बंधना चाहता हूं, लेकिन टेम्पलेट में मैं एक टाइपो बनाता हूं और (गैर मौजूदा) संपत्ति " item" के लिए बाध्य करता हूं ।

Chrome डीबगर का उपयोग केवल मुझे बताता है:

"item" is not defined.

क्या उपकरण, तकनीक या कोडिंग शैली हैं जो मुझे बाध्यकारी समस्या के बारे में अधिक जानकारी प्राप्त करने में मदद करती हैं?

debugging knockout.js

— RogierBessem
स्रोत

344

एक चीज जो मैं अक्सर करता हूं, जब एक समस्या होती है कि डेटा एक निश्चित दायरे में उपलब्ध है, तो टेम्प्लेट / सेक्शन को किसी चीज़ से बदलना है:

<div data-bind="text: ko.toJSON($data)"></div>

या, यदि आप थोड़ा अधिक पठनीय संस्करण चाहते हैं:

<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

यह उस दायरे से बाहर हो रहे डेटा को थूक देगा और आपको यह सुनिश्चित करने देगा कि आप चीजों को उचित तरीके से समाप्त कर रहे हैं।

अद्यतन: KO 2.1 के रूप में , आप इसे सरल कर सकते हैं:

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

अब तर्कों को पारित किया जाता है JSON.stringify।

— आरपी नीमेयर
स्रोत

ओह। मुझे यह सवाल भी पूछना होगा। सांत्वना के जटिल कोड का उपयोग किया। अब यह बहुत आसान है।

— 15

3

मुझे डिबगिंग टिप्स के बारे में अधिक सोचना है और शायद एक ब्लॉग पोस्ट करना है। एक और जो मन में आता है, वे वेधशालाओं के प्रति मैन्युअल सदस्यताएँ या बदलते मूल्यों को देखने के लिए गणना की गई वेधशालाओं की तुलना करते हैं। जैसे अगर nameकोई अवलोकनीय कर रहा हैname.subscribe(function(newValue) { console.log("name", newValue); });

— आरपी नीमर

1

हो सकता है क्योंकि यह उत्तर अपेक्षाकृत पुराना है, लेकिन क्यों नहीं। कंसोल का उपयोग करें। ऑब्जेक्ट गुणों को देखने के लिए डीबगर की पूरी शक्ति का उपयोग करें? देखें: stackoverflow.com/a/16242988/647845

— डिर्क बोअर

1

@DirkBoer - कंसोल.लॉग का उपयोग करना भी एक शानदार तरीका हो सकता है। बहुत बार मैं अपने तत्वों के बगल में डेटा को एक foreachपरिदृश्य में देखना चाहता हूं, हालांकि मुझे कंसोल के माध्यम से प्रासंगिक प्रतिपादन मार्कअप के भीतर पृष्ठ पर देखना आसान लगता है। बस स्थिति पर निर्भर करता है। मेरे कुछ और विचार यहाँ: knmeout.net.net/2013/06/… । इसके अलावा, आप अपने बंधन में "स्वच्छ" संस्करण को लॉग इन करना चाह सकते हैं console.log(ko.toJS(valueAccessor())।

— आरपी नीमरियर

1

@RuneJeppesen - मुझे यकीन नहीं है कि आप किस तरह के डेटा को सिलसिलेवार कर रहे हैं, लेकिन कुछ इस तरह से मदद कर सकता है: knockmeout.net/2011/04/…

— RP Niemeyer

61

यदि आप क्रोम का उपयोग विकास के लिए कर रहे हैं, तो वास्तव में एक महान विस्तार है (जिसके साथ मैं संबद्ध नहीं हूं) जिसे नॉकटाउज संदर्भ डीबगर कहा जाता है जो आपको सीधे डेवलपर टूल के तत्वों के पैनल में बाध्यकारी संदर्भ दिखाता है।

— neverfox
स्रोत

3

काश फ़ायरफ़ॉक्स या फ़ायरबग के पास यह होता। किसी को भी ऐसी बात का पता है?

— पैट्रिक सज्जापस्की

अपील का समर्थन छोड़ दिया गया है। यदि आप किसी जटिल डेटा-बाइंड संरचना का उपयोग करते हैं तो क्रोम क्रैश होने का कारण बनता है। अब लगभग एक साल तक मेरी किसी भी परियोजना के लिए काम नहीं किया है।

— आर्कटिक

यह सुनने के लिए क्षमा करें, हालांकि मैं लंबे समय से KO से एम्बर में स्थानांतरित कर रहा हूं।

— कभी नहीं

1

यह मेरे लिए (ज्यादातर) ठीक काम करता है, और मेरे पास वास्तव में कुछ जटिल संरचनाएं हैं। मैंने इसे आज़माया नहीं है, लेकिन इसके विस्तार के विकल्प में, "यदि आप अनुभव करते हैं कि आपको क्रैश का अनुभव होता है, तो आपके पास एक गैर क्रमिक क्षमता है। आप क्रमांकन को बंद कर सकते हैं।" इस सुविधा को अक्षम करने के लिए संदेश के नीचे एक चेकबॉक्स है।

— 18

बेहद उपयोगी है, ty।

— एंड्रयू

37

अपने JavaScript लाइब्रेरी फ़ाइलों में एक बार बाइंडहैंडलर को परिभाषित करें ।

ko.bindingHandlers.debug = 
{
    init: function(element, valueAccessor) 
    {
        console.log( 'Knockoutbinding:' );
        console.log( element );
        console.log( ko.toJS(valueAccessor()) );
    }
};

बस इसका उपयोग करने से यह पसंद करता है:

<ul data-bind="debug: $data">

लाभ

Chrome पैनल में पूर्ण शक्ति का उपयोग करें, जैसे Reveal in Elements पैनल
आपको डीबग करने के लिए अपने DOM में कस्टम एलिमेंट नहीं जोड़ना है

यहां छवि विवरण दर्ज करें

— डर्क बोअर
स्रोत

32

मुझे एक और मिला जो सहायक हो सकता है। मैं कुछ बाइंडिंग को डिबग कर रहा था और रयन्स उदाहरण का उपयोग करने की कोशिश की। मुझे एक त्रुटि मिली कि JSON को एक गोलाकार लूप मिला।

<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
 <li>
   <pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
   <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
 </li>
</ul>

लेकिन, इस दृष्टिकोण का उपयोग करके डेटा-बाइंड मान को निम्न के साथ बदल दिया गया है:

  <ul class="list list-fix" data-bind="foreach: detailsView().tabs">
    <li>
      <pre data-bind="text: 'click me', click: function() {debugger}"></pre>
      <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
    </li>
  </ul>

अब अगर मैं क्रोम डिबग विंडो को खोलने के दौरान PRE तत्व पर क्लिक करता हूं, तो मुझे एक अच्छी तरह से भरा हुआ स्कोप वैरिएबल विंडो मिलता है।

इसके लिए थोड़ा बेहतर तरीका मिला:

<pre data-bind="text: ko.computed(function() { debugger; })"></pre>

— RogierBessem
स्रोत

वास्तव में उपयोगी। <पूर्व डेटा-बाइंड = "पाठ: ko.toJSON ($ डेटा, शून्य, 2)"> </ pre> का उपयोग करके नॉकआउट परिपत्र छोरों और रेजर मार्कअप मुद्दों का सामना कर रहा था। <Pre ... डीबगर> एक सही समाधान है। किसी कारण से @ Html.CheckBox की तरह RAZOR इनपुट ko.toJSON तोड़ रहा था।

— आर्कटिक

20

स्टेप बाय स्टेप गाइड

इस गाइड के लिए, हम आधिकारिक नॉकआउट जेएस उदाहरणों में से एक का उपयोग करेंगे ।
कहते हैं कि आप दूसरे संपर्क (Sensei मियागी) के पीछे डेटा देखना चाहते हैं।
दूसरे संपर्क के पहले इनपुट बॉक्स पर राइट-क्लिक करें (पाठ 'Sensei' के साथ एक)।
'निरीक्षण तत्व' का चयन करें। क्रोम डेवलपर टूलबार खुल जाएगा।
जावास्क्रिप्ट कंसोल विंडो खोलें। आप क्लिक करके कंसोल का उपयोग कर सकते >=में आइकन नीचे बाईं ओर Chrome डेवलपर टूलबार के, या, क्रोम डेवलपर टूलबार में "कंसोल" टैब खोलकर या दबाकर Ctrl+ Shift+J
निम्न कमांड टाइप करें और Enter दबाएँ: ko.dataFor($0)
अब आपको दूसरी पंक्ति से जुड़ा डेटा देखना चाहिए। आप ऑब्जेक्ट ट्री को नेविगेट करने के लिए ऑब्जेक्ट के छोटे त्रिकोण को दबाकर डेटा का विस्तार कर सकते हैं।
निम्न कमांड टाइप करें और Enter दबाएँ: ko.contextFor($0)
अब आपको एक जटिल ऑब्जेक्ट को देखना चाहिए जिसमें रूट और सभी माता-पिता सहित पूरे नॉकआउट संदर्भ शामिल हैं। यह तब उपयोगी होता है जब आप जटिल बाइंडिंग एक्सप्रेशन लिख रहे होते हैं और आप विभिन्न कंस्ट्रक्शन के साथ प्रयोग करना चाहते हैं।

ऊपर दिए गए गाइड का अनुसरण करते हुए उदाहरण आउटपुट

यह काला जादू क्या है?

यह ट्रिक क्रोम के $ 0- $ 4 फ़ीचर और नॉकआउट जेएस की उपयोगिता विधियों का एक संयोजन है । संक्षेप में, क्रोम याद है कि आप किन तत्वों Chrome डेवलपर टूलबार में चयन किया है और उर्फ तहत इन तत्वों को उजागर करता है $0, $1, $2, $3, $4। इसलिए जब आप अपने ब्राउज़र में किसी तत्व को राइट-क्लिक करते हैं और 'इंस्पेक्ट एलिमेंट' का चयन करते हैं, तो यह तत्व स्वचालित रूप से उपनाम के तहत उपलब्ध हो जाता है $0। आप इस ट्रिक को नॉकआउटJS, AngularJS, jQuery या किसी अन्य जावास्क्रिप्ट फ्रेमवर्क के साथ उपयोग कर सकते हैं।

चाल का दूसरा पहलू है नॉकआउट जेएस की उपयोगिता विधियाँ ko.dataFor और ko.contextFor:

ko.dataFor(element) - उस डेटा को लौटाता है जो तत्व के खिलाफ बाध्यकारी के लिए उपलब्ध था
ko.contextFor(element) - संपूर्ण बाध्यकारी संदर्भ देता है जो DOM तत्व के लिए उपलब्ध था।

याद रखें, क्रोम का जावास्क्रिप्ट कंसोल पूरी तरह कार्यात्मक जावास्क्रिप्ट रनटाइम वातावरण है। इसका मतलब है कि आप केवल चरों को देखने तक सीमित नहीं हैं। आप ko.contextForकंसोल से सीधे व्यूमॉडल के आउटपुट को स्टोर और मेनिपुलेट कर सकते हैं । कोशिश करो var root = ko.contextFor($0).$root; root.addContact();और देखो क्या होता है :-)

खुश डिबगिंग!

— मार्टिन डेविलर्स
स्रोत

7

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

function echo(whatever) { debugger; return whatever; }

या

function echo(whatever) { console.log(whatever); return whatever; }

फिर html में, कहें, आपके पास था:

<div data-bind="text: value"></div>

बस इसके साथ बदलें

<div data-bind="text: echo(value)"></div>

अधिक उन्नत:

function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }

<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>

का आनंद लें :)

अपडेट करें

एक और कष्टप्रद बात यह है कि जब आप एक अपरिभाषित मूल्य को बांधने की कोशिश कर रहे हैं। ऊपर दिए गए उदाहरण में कल्पना कीजिए कि डेटा ऑब्जेक्ट सिर्फ {} न {{मान: 'कुछ पाठ'} है। इस मामले में आप मुसीबत में होंगे, लेकिन निम्नलिखित ट्वीक के साथ आप ठीक हो जाएंगे:

<div data-bind="text: $data['value']"></div>

— त्रिशूल डी’गओ
स्रोत

5

मैंने इन त्रुटियों की कल्पना करने में मदद करने के लिए नॉकथ्रू नामक एक जीथब परियोजना बनाई।

https://github.com/JonKragh/knockthrough

यह बाध्यकारी त्रुटियों को उजागर करता है और उस नोड पर डेटाकोटेक्स्ट का एक डंप देता है।

आप यहां एक नमूने के साथ खेल सकते हैं: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm

यहां छवि विवरण दर्ज करें

इस बिंदु पर मुझे पाने के लिए एसओ पर अपने उत्कृष्ट नॉकआउट कोड के नमूने के लिए आरपी नीमरियर को श्रेय।

— जॉन क्रैघ
स्रोत

3

यह देखने का सबसे आसान तरीका है कि डेटा को बाइंड करने के लिए क्या पास किया गया है, यह डेटा को कंसोल में छोड़ने के लिए है:

<div data-bind="text: console.log($data)"></div>

नॉकआउट टेक्स्ट बाइंडिंग के लिए मूल्य का मूल्यांकन करेगा ( किसी भी बंधन को वास्तव में यहां इस्तेमाल किया जा सकता है ) और ब्राउज़र पैनल को सांत्वना देने के लिए $ डेटा फ्लश करता है।

— दिमित्री पावलोव
स्रोत

2

अन्य सभी उत्तर बहुत अच्छे होंगे, मैं सिर्फ वही जोड़ रहा हूँ जो मुझे करना पसंद है:

आपके विचार में (यह मानते हुए कि आप पहले से ही एक ViewModel बंध चुके हैं):

<div data-bind="debugger: $data"></div>

नॉकआउट कोड:

ko.bindingHandlers.debugger = {
    init: function (element, valueAccessor) {
        debugger;
    }
}

यह डीबगर में कोड को रोक देगा, और elementऔर valueAccessor()बहुमूल्य जानकारी होगी।

— आदित्य सांसद हैं
स्रोत

कस्टम बाइंडिंग की कोई आवश्यकता नहीं है। पर एक नजर डालें stackoverflow.com/documentation/knockout.js/5066/...

— एडम Wolski

1

हां, मैं मानता हूं कि इसे इस तरह करने की कोई निश्चित आवश्यकता नहीं है, मैं केवल यह बताना चाहता था कि यह एक डिबगिंग शैली है ... हर कोई इसे अपने तरीके से करना पसंद करता है :)

— आदित्य एमपी

1

यदि आप विजुअल स्टूडियो और IE में विकसित कर रहे हैं data-bind="somebinding:(function(){debugger; return bindvalue; })()", तो मुझे यह अधिक पसंद है, मुझे यह अधिक पसंद है, क्योंकि यह सभी बाइंडिंग के साथ स्क्रिप्ट पर जाएगा, बल्कि eval फ़ाइल और आप बस $ $ $ डेटा को देख सकते हैं (मैं उपयोग करता हूं) क्रोम में भी);

— फिलिप कॉर्डस
स्रोत

मुझे यकीन है कि इसका विजुअल स्टूडियो या IE से कोई लेना-देना नहीं है।

— सेरीह

@Serhiy क्रोम के साथ एक ही है, लेकिन क्रोम में मुझे लगता है कि आप इसके बिना फाइल को एक्सेस कर सकते हैं, मुझे नहीं लगता कि आप फाइल को एक्सेस कर सकते हैं।

— फिलिप कॉर्डस

0

यह मेरे लिए काम करता है:

<div data-bind="text: function(){ debugger; }()"></div>

— रॉबर्ट जे
स्रोत

KnockoutJS के लिए टेम्प्लेट बाइंडिंग त्रुटियों को कैसे डीबग करें?

स्टेप बाय स्टेप गाइड

यह काला जादू क्या है?