क्रोम में कोड से जावास्क्रिप्ट ब्रेकपॉइंट कैसे सेट करें?


686

मैं क्रोम डीबगर को कोड के माध्यम से एक लाइन पर तोड़ने के लिए मजबूर करना चाहता हूं , या कुछ प्रकार के टिप्पणी टैग का उपयोग करके ऐसा कुछconsole.break()


46
क्या आपने debugger;डेवलपर टूलबार में नियमित ब्रेकपॉइंट्स का उपयोग करने की कोशिश की है या कर रहे हैं
दिनो

आप डेवलपर टूल में स्क्रिप्ट वॉचर का उपयोग करने के बजाय उन्हें कोड से ही ब्रेकप्वाइंट सेट करते हैं?
Faris M


9
नकल नहीं है। "क्रोम में" बनाम "कोड में" दो अलग-अलग चीजें हैं, और यह प्रश्न कई गैर-एक्सएचआर परिदृश्यों पर लागू होता है। हां, अन्य प्रश्नों में से 1 उत्तर इस प्रश्न का उत्तर देता है, लेकिन अन्य लागू नहीं होते हैं। मैंने सचमुच "कोड क्रोम से जावास्क्रिप्ट ब्रेकपॉइंट सेट" किया और यह पहला परिणाम है, और दूसरा सवाल पहले पृष्ठ पर भी नहीं है।
एरोनएलएस

जवाबों:


1158

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


8
कुछ सेकंड के बाद डिबगर को ट्रिगर करने के लिए एक अच्छी चाल है:setTimeout(function(){debugger;}, 3000);
शाहर

30
क्या टाइमर ट्रिक सामान्य अभ्यास है? सत्यापन / औचित्य?
जस्टस एपेन

4
यह बहुत मददगार है। नोट debugger;सभी प्रमुख ब्राउज़रों में भी समर्थित है। अधिक जानकारी के लिए: w3schools.com/jsref/jsref_debugger.asp
ScottyG

16
@ScottyG MDN कम चमकदार, अधिक उपयोगी है: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
jpaugh

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

27

एक बटन क्लिक श्रोता सेट करें और कॉल करें debugger;

उदाहरण

$("#myBtn").click(function() {
 debugger;   
});

डेमो

http://jsfiddle.net/hBCH5/

जावास्क्रिप्ट में डीबगिंग पर संसाधन


1
यह क्लिक हैंडलर में एक ब्रेकपॉइंट सेट करता है, शायद वह नहीं जो ओपी चाहता था
point

@PeterV मुझे उपयोगी लगेगा अगर मैं बस अपने कोड को एक जगह खोलने की कोशिश कर रहा था जो कोड के एक ब्लॉक के करीब था जिसे मैं डिबग कर रहा था ... लेकिन हर समय डिबग नहीं करना चाहता था ... लेकिन हाँ , अगर यह सिर्फ डिबगर खोलने के लिए है ... तो उसके लिए एक कुंजीपट है।
आर्मस्ट्रांगेस्ट

27

आप भी debug(function), जब तोड़ने के लिए उपयोग कर सकते हैंfunction कहा जाता है ।

कमांड लाइन एपीआई संदर्भ: डिबग


2
बहुत अच्छा - इस समय केवल Chrome प्रतीत होता है, लेकिन यह मेरा प्राथमिक प्लेटफ़ॉर्म वैसे भी है। अब मुझे सिर्फ अपने ग्लोबल डिबगिंग फ्लैग "डिबग" को रोकने के लिए याद रखने की ज़रूरत है ...
ब्रिचिन्स

Chrome डीबगर कमांड लाइन API संदर्भ में वास्तव में कुछ अन्य सहायक चीजें शामिल हैं जिनके बारे में मुझे जानकारी नहीं थी। धन्यवाद!
पीटर टी।

16

जैसा कि अन्य पहले ही कह चुके हैं, debugger;जाने का रास्ता है। मैंने एक छोटी स्क्रिप्ट लिखी है जिसे आप फ़ंक्शन कॉल से ठीक पहले ब्रेकपॉइंट को सेट और हटाने के लिए कमांड लाइन से उपयोग कर सकते हैं: http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/


8

"स्क्रिप्ट्स" टैब पर, अपना कोड कहाँ है पर जाएँ। पंक्ति संख्या के बाईं ओर, क्लिक करें। यह एक ब्रेकपॉइंट सेट करेगा।

स्क्रीनशॉट:

क्रोम में ब्रेकप्वाइंट का स्क्रीनशॉट

फिर आप अपने टैब को सही टैब के भीतर ट्रैक कर पाएंगे (जैसा कि स्क्रीनशॉट में दिखाया गया है)।


41
यह सवाल का जवाब नहीं देता है, वह
रोबर्टेक

39
xn .: "यहाँ मेरे जवाब की एक तस्वीर है, वापस जब यह सिर्फ 0 वोटों वाला एक छोटा बच्चा था। यह अब बड़ा हो गया है।"
एरोनल्स

3
यदि आप एक अजाक्स कॉल के साथ एक जेएस स्क्रिप्ट को लोड करते हैं, तो यह यहां नहीं दिखाई देगा, इसलिए कोड में एक ब्रेकप्वाइंट की आवश्यकता है।
पेट्रूजा

@FlorianMargaine, अब कोई स्क्रिप्ट टैब नहीं है। कृपया छवि को अपडेट करें।
पचेरियर

कुछ रूपरेखाओं में, द्रुपल की तरह, जेएस को कैश-बस्टिंग क्वेरी स्ट्रिंग प्रत्यय जोड़ा गया है। यदि आप कैश फ्लश करते हैं, तो यह अक्सर इस प्रत्यय को अपडेट करता है जो आपके द्वारा पिछले लोड पर निर्धारित किसी भी ब्रेकप्वाइंट को मिटा सकता है।
निक

7

debugger EcmaScript द्वारा एक आरक्षित कीवर्ड है और ES5 के बाद से वैकल्पिक शब्दार्थ दिया गया है

नतीजतन, इसका उपयोग न केवल क्रोम में किया जा सकता है, बल्कि फ़ायरफ़ॉक्स और Node.js के माध्यम से भी किया जा सकता हैnode debug myscript.js

मानक का कहना है :

वाक्य - विन्यास

DebuggerStatement :
    debugger ;

शब्दार्थ

डिबगरस्टैटमेंट उत्पादन का मूल्यांकन एक डिबगर के तहत चलने पर एक ब्रेकपॉइंट को लागू करने की अनुमति दे सकता है। यदि कोई डिबगर मौजूद नहीं है या सक्रिय नहीं है तो इस कथन का कोई प्रभाव नहीं है।

उत्पादन डिबगरस्टेमेंट: डीबगर; मूल्यांकन इस प्रकार है:

  1. यदि एक कार्यान्वयन परिभाषित डिबगिंग सुविधा उपलब्ध है और सक्षम है, तो
    1. एक कार्यान्वयन परिभाषित डिबगिंग कार्रवाई करें।
    2. परिणाम को एक कार्यान्वयन परिभाषित पूर्णता मान दें।
  2. अन्य
    1. परिणाम (सामान्य, खाली, खाली) होने दें।
  3. वापसी का परिणाम।

ईएस 6 में कोई बदलाव नहीं।


3

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

का अनुभाग 2 देखें

http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/

या केवल आवश्यक परीक्षण बिंदु पर अपने कोड में डिबगर शब्द युक्त एक पंक्ति जोड़ें।


3

ब्रेकपॉइंट: -

ब्रेकपॉइंट निष्पादित करना बंद कर देगा, और आपको जावास्क्रिप्ट मूल्यों की जांच करने देगा।

मूल्यों की जांच करने के बाद, आप कोड के निष्पादन (आमतौर पर एक प्ले बटन के साथ) को फिर से शुरू कर सकते हैं।

डिबगर: -

डिबगर; जावास्क्रिप्ट के निष्पादन को रोकता है, और कॉलस्टे डीबगिंग फ़ंक्शन।

डीबगर कथन निष्पादन को निलंबित करता है, लेकिन यह किसी भी फ़ाइल को बंद नहीं करता है और न ही किसी चर को साफ़ करता है।

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};


2

जावास्क्रिप्ट कोड को डीबग करने के कई तरीके हैं। जावास्क्रिप्ट के बाद कोड के माध्यम से डीबग करने के लिए दो दृष्टिकोणों का व्यापक रूप से उपयोग किया जाता है

  1. console.log()ब्राउज़र कंसोल में मानों को प्रिंट करने के लिए उपयोग करना । (इससे आपको अपने कोड के कुछ बिंदुओं पर मूल्यों को समझने में मदद मिलेगी)

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

अधिक उपकरणों और तरीकों के लिए जिसमें आप जावास्क्रिप्ट कोड को डीबग करते हैं, W3School द्वारा इस लिंक में दिए गए हैं ।


1
+1 और कंसोल का उपयोग करना। आपके कोड का पता लगाने के लिए भी सहायक है। क्योंकि आमतौर पर फ़ाइल / लाइन # संदेश के बगल में दिखाई जाती है, और आप डिबगर में अपना कोड खोलने के लिए इसे क्लिक कर सकते हैं, ब्रेकपॉइंट सेट कर सकते हैं, आदि
जॉन हेन्केल

0

मैं अनुशंसा नहीं करूंगा debugger;कि आप सिर्फ जावास्क्रिप्ट कोड को मारना और बंद करना चाहते हैं, क्योंकिdebugger; यह आपके जावास्क्रिप्ट कोड को अस्थायी रूप से फ्रीज कर देगा और इसे स्थायी रूप से बंद नहीं करेगा।

यदि आप अपने आदेश में जावास्क्रिप्ट कोड को ठीक से मारना और रोकना चाहते हैं, तो निम्नलिखित का उपयोग करें:

throw new Error("This error message appears because I placed it");

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.