Google Chrome में इनलाइन जावास्क्रिप्ट को ब्रेकपॉइंट कैसे सेट करें?

Question

जब मैं Google Chrome में डेवलपर टूल खोलता हूं, तो मुझे प्रोफ़ाइल, टाइमलाइन और ऑडिट जैसी सभी प्रकार की सुविधाएँ दिखाई देती हैं, लेकिन बुनियादी कार्यक्षमता जैसे कि js फ़ाइलों में और HTML और जावास्क्रिप्ट कोड दोनों में ही ब्रेकप्वाइंट सेट करने में सक्षम है! मैंने जावास्क्रिप्ट कंसोल का उपयोग करने की कोशिश की, जो खुद ही छोटी गाड़ी है - उदाहरण के लिए, एक बार जब यह एक जेएस त्रुटि का सामना करता है, तो मैं इससे बाहर नहीं निकल सकता जब तक कि मैं पूरे पृष्ठ को ताज़ा नहीं करता। क्या कोई मदद कर सकता है?

Comments

मैंने क्रोम के साथ हार मान ली। फ़ायरफ़ॉक्स के साथ कोशिश की और कुछ ही सेकंड में मेरा ब्रेकपॉइंट हिट हो गया। यह क्रोम के साथ संभव हो सकता है लेकिन यह निश्चित रूप से स्पष्ट नहीं है कि कैसे!

— ओलिवर पी

Answer 1

स्रोतों टैब का उपयोग करें, आप वहां जावास्क्रिप्ट में ब्रेकपॉइंट सेट कर सकते हैं। निर्देशिका ट्री में इसके नीचे (ऊपर और नीचे तीर के साथ), आप उस फ़ाइल का चयन कर सकते हैं जिसे आप डीबग करना चाहते हैं। आप एक ही टैब के दाईं ओर फिर से शुरू दबाकर एक त्रुटि से बाहर निकल सकते हैं।

Comments

किसी कारण से मुझे शामिल js फ़ाइलों की सूची दिखाई देती है, लेकिन मैं निष्पादन पृष्ठ को स्वयं नहीं चुन सकता, यह सूची में नहीं दिखता है। कोई विचार?

— Ulu

@ सुलु, मुझे भी यही समस्या थी। सुनिश्चित करें कि आपका प्रकार = "पाठ / जावास्क्रिप्ट" विशेषता आपके <script> तत्व पर सेट है।

— contactmatt 19

इसके अलावा HTML5 में यह विशेषता अनिवार्य नहीं है। मैं केवल डीबग करने के लिए स्रोत कोड नहीं बदल रहा हूँ!

— sashok_bg

मैं टाइप करने के बाद भी नहीं देख रहा हूं = "टेक्स्ट / जावास्क्रिप्ट"

— नितिन कुमार मिश्रा

यदि यह काम नहीं करता है, और आपके पास इनवाइट जावास्क्रिप्ट कोड है जैसे: <script> your code </script>एक नाम में जोड़ें जैसे: <script> your code //# sourceURL=somename.js </script> यह नीचे दिए गए उत्तर में बेहतर बताया गया है

— के.एम.

Answer 2

क्या आप <script>टैग के भीतर या HTML टैग विशेषताओं में कोड के बारे में बात कर रहे हैं , इस तरह से?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

किसी भी तरह से, इस तरह का debuggerकीवर्ड काम करेगा:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

debuggerयदि देव उपकरण खुले नहीं हैं तो NB Chrome विराम नहीं देगा ।

---

आप JS फाइल और <script>टैग में प्रॉपर्टी ब्रेकपॉइंट भी सेट कर सकते हैं :

1. स्रोत टैब पर क्लिक करें
2. शो नेविगेटर आइकन पर क्लिक करें और एक फ़ाइल चुनें
3. बाएँ हाथ के मार्जिन में एक लाइन नंबर पर डबल-क्लिक करें। ब्रेकपॉइंट पैनल (4) में एक संबंधित पंक्ति जोड़ी जाती है ।

Comments

कोई स्क्रिप्ट टैब नहीं है। मैं अन्य सभी टैब देखता हूं जो इस तस्वीर में हैं, लेकिन कोई लिपियों वाला टैब नहीं है।

— इक्का

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

— इक्का

स्क्रिप्स टैब के तहत ड्रॉप-डाउन में मैं केवल जेएस फाइलों को सूचीबद्ध देखता हूं, लेकिन उन HTML फाइलों को नहीं जिनमें <script> टैग है जिसे मैं डीबग करना चाहता हूं। FF पर Firebug में एक समान ड्रॉप-डाउन है, लेकिन उन HTML फ़ाइलों को भी सूचीबद्ध करता है जिनमें <script> टैग हैं। क्या यह बग है या इनबिल्ड जेएस कोड में ब्रेकपॉइंट सेट करने का एक और तरीका है?

— वोल्फ्राम अर्नोल्ड

अब के Sourcesबजाय टैब कहा जाता है Scripts।

— कोडरडेन

जब मैंने अपने html एम्बेडेड js को डीबग करने का प्रयास किया, तो मुझे अपने देव क्षेत्र में एक खाली पृष्ठ मिला। मुझे खाली करने के लिए इसे प्राप्त करने के लिए रिक्त स्रोत फ़ाइल को देखते हुए ताज़ा करना पड़ा।

— HappyCoder86

Answer 3

आप अपनी स्क्रिप्ट को एक नाम भी दे सकते हैं:

<script> ... (your code here) //# sourceURL=somename.js </script>

टोकेर किसी नाम से "somename" को प्रतिस्थापित करता है;) और फिर आप इसे सामान्य स्रोत के रूप में "स्रोत> शीर्ष> (कोई डोमेन)> somename.js" पर क्रोम डीबगर में देख पाएंगे और आप इसे अन्य स्क्रिप्ट्स की तरह डीबग कर पाएंगे

Comments

जाने का सबसे आसान और अचूक तरीका। लेकिन दूसरों के लिए ध्यान दें, इसे उत्पादन पर धकेलने से पहले इसे हटाना याद रखें।

— ज़मीर फौज़न

ओह माय गॉड आपको अंदाजा नहीं है कि इससे मुझे कितना फायदा हुआ। ओह माय गॉड यह शानदार है। मैं उम्र के लिए कुछ इस तरह की खोज कर रहा हूं।

— ग्रेगरोस

मैंने इस (ठीक) विचार का उपयोग किया, लेकिन नई फ़ाइल को स्रोत टैब में नहीं देखा जा सका, केवल html फ़ाइल। फिर मैंने कोड निष्पादित किया और अंत में, कंसोल में, स्क्रिप्ट से जो भी संदेश लिखा गया है, उसके दाईं ओर, आप कोड का लिंक देख सकते हैं। सबसे अच्छी बात यह है कि लिंक स्क्रिप्ट को दिए गए फ़ाइल नाम को दिखाता है (यानी, // # sourceURL = somename.js)।

— मैनुएल रिवेरा

अगर मैं कर सकता तो मैं आपको 1000

— अपवोट देता

Answer 4

स्क्रिप्ट टूल टैब पर डेवलपर टूल के खुलने के दौरान स्क्रिप्ट वाले पेज को रिफ्रेश करें। यह फ़ाइल सूची में एक (प्रोग्राम) प्रविष्टि जोड़ देगा जो स्क्रिप्ट सहित पृष्ठ का HTML दिखाता है। यहां से आप ब्रेकप्वाइंट जोड़ सकते हैं।

Comments

यह मेरे लिए काम नहीं किया। इसके बजाय, मैंने स्क्रिप्ट टैब में प्रोग्राम फ़ाइल खोलने के लिए नीचे दाईं ओर एक स्क्रिप्ट त्रुटि आइकन पर क्लिक किया।

— sanbikinoraion

धन्यवाद! Chrome 69 का उपयोग करते हुए, यह तब भी काम करता था, जब मैं स्रोत टैब में नहीं था। डेवलपर टूल के खुलने के दौरान पेज लोड होने की कुंजी प्रतीत होती है।

— सैम

यदि यह मेरा प्रश्न होता तो यह स्वीकृत उत्तर होता। धन्यवाद।

— प्लम्पनेशन

Chrome 83 में काम किया। मेरे env में, फ़ाइलनाम आपके ऐप के URL पर आधारित है। उदाहरण के लिए, यदि URL example.com/xxx/yyy है, तो फ़ाइल नाम "yyy" होगा।

— हेलिक्स क्वार

Answer 5

HTML के अंदर विशेष रूप से स्क्रिप्ट को डीबग करने के लिए एक और सहज सरल ट्रिक जो अजाक्स द्वारा लौटाया गया है, वह स्क्रिप्ट के अंदर कंसोल पुट.लॉग ("परीक्षण") है।

एक बार जब आपने ईवेंट को निकाल दिया है, तो डेवलपर टूल के अंदर कंसोल टैब खोलें। आपको "परीक्षण" डिबग प्रिंट विवरण के दाईं ओर दिखाया गया स्रोत फ़ाइल लिंक दिखाई देगा। बस स्रोत पर क्लिक करें (VM4xxx जैसा कुछ) और आप अब ब्रेक पॉइंट सेट कर सकते हैं।

पुनश्च: इसके अलावा, आप "डीबगर" स्टेटमेंट डालने पर विचार कर सकते हैं यदि आप क्रोम का उपयोग कर रहे हैं, जैसे @Matt बॉल द्वारा सुझाए जा रहे हैं

Answer 6

मेरी स्थिति और मैंने इसे ठीक करने के लिए क्या किया:
मेरे पास एक जावास्क्रिप्ट फ़ाइल शामिल है जो HTML पृष्ठ पर निम्नानुसार है:
पृष्ठ का नाम: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

अब क्रोम में जावास्क्रिप्ट डिबगर में प्रवेश करते हुए, मैं लिपियों टैब पर क्लिक करता हूं, और ऊपर दिखाए गए अनुसार सूची को नीचे गिरा देता हूं। मैं स्पष्ट रूप से देख सकते हैं लिपियों common.js / लेकिन मैं कर सकता है नहीं वर्तमान html पृष्ठ को देखने के test.html , ड्रॉप डाउन में इसलिए मैं एम्बेडेड जावास्क्रिप्ट डिबग नहीं कर सकता है:

<script type="text/javascript">
  document.write("something");
</script>

यह बहुत बुरा था। हालाँकि, जब मैंने अप्रचलित प्रकार = "पाठ / जावास्क्रिप्ट" को एम्बेडेड स्क्रिप्ट से हटा दिया था :

<script>
  document.write("something");
</script>

..और ताज़ा किया / पृष्ठ को पुनः लोड किया, वॉयला, यह ड्रॉप डाउन सूची में दिखाई दिया, और सब फिर से अच्छा था।
मुझे आशा है कि यह किसी के लिए उपयोगी है, जो html पेज पर एम्बेडेड जावास्क्रिप्ट को डिबग करने में समस्या है।

Comments

बहुत बढ़िया! क्रोम में क्रोम 20.0.1132.57 पर परीक्षण किया गया। 10.7.4 क्रोमियम परियोजना के लिए बग को प्रस्तुत किया गया।

— मंगल राबर्टसन

ध्यान रखें कि HTML 4 और XHTML, typeएक आवश्यक विशेषता है। HTML5 में, यह वैकल्पिक है।

— hotshot309

यह प्रकार के साथ कुछ नहीं करना है। वीएम द्वारा निष्पादन के बाद स्क्रिप्ट एकत्र की जाती है जब तक कि इस बिंदु पर निरीक्षक पहले से ही नहीं खोला जाता है। जब आप पृष्ठ को पुनः लोड करते हैं तो यह स्क्रिप्ट एकत्र नहीं करता था।

— vsevik 12

मैं अपना मामला हूँ, <div>मुझे डिबगर में कोड को देखने से रोक दिया गया था

— Ceztko

Answer 7

debugger;मेरी स्क्रिप्ट में शीर्ष पर जोड़ना मेरे लिए काम किया।

Answer 8

मुझे भी यही समस्या आ रही थी कि जावास्क्रिप्ट को <script>टैग के अंदर कैसे डिबग करें। लेकिन फिर मैंने इसे सोर्सेज टैब के तहत "इंडेक्स" कहा, जिसे कोष्ठक के साथ मिला। ब्रेकप्वाइंट सेट करने के लिए लाइन नंबर पर क्लिक करें।

यह क्रोम 71 है।

Answer 9

यदि आप "स्क्रिप्ट्स" टैब नहीं देख सकते हैं, तो सुनिश्चित करें कि आप सही तर्कों के साथ क्रोम लॉन्च कर रहे हैं। मुझे यह समस्या तब हुई जब मैंने तर्क के साथ सर्वर-साइड जावास्क्रिप्ट को डीबग करने के लिए क्रोम लॉन्च किया --remote-shell-port=9222। मुझे कोई समस्या नहीं है अगर मैं क्रोम को बिना किसी तर्क के लॉन्च करता हूं।

Comments

क्या आप कृपया विस्तार से बता सकते हैं? मुझे यह सटीक समस्या आ रही है - मैं स्क्रिप्ट टैब को बिल्कुल नहीं देख सकता। मैंने क्रोम का नवीनतम डेवलपर बिल्ड डाउनलोड किया।

— टॉम 16

Answer 10

मैं इस मुद्दे पर आया था, हालांकि मेरा इनलाइन फ़ंक्शन एक कोणीयजेएस दृश्य के साथ था। इसलिए लोड पर मैं डिबग को जोड़ने के लिए इनलाइन स्क्रिप्ट का उपयोग नहीं कर सका, क्योंकि डीबगर के स्रोत टैब में केवल index.html उपलब्ध था।

इसका मतलब यह था कि जब मैं अपनी इनलाइन के साथ विशेष दृश्य खोल रहा था (इस पर कोई विकल्प नहीं था) तो यह सुलभ नहीं था।

जिस तरह से मैं इसे हिट करने में सक्षम था, वह एक गलत फ़ंक्शन या इनलाइन जेएस फ़ंक्शन के अंदर कॉल करना था।

मेरे समाधान में शामिल हैं:

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

इसका मतलब है कि जब मैंने अपने बटन पर क्लिक किया, तब मुझे क्रोम कंसोल में संकेत दिया गया था।

Uncaught TypeError: undefined is not a function 

यहाँ महत्वपूर्ण बात इस का स्रोत था: VM5658:6 पर क्लिक करने से मुझे इनलाइन के माध्यम से कदम बढ़ाने की अनुमति मिली और बाद के लिए ब्रेक प्वाइंट को पकड़ लिया।

इस तक पहुँचने का बेहद जटिल तरीका .. लेकिन यह काम किया और एकल पृष्ठ ऐप्स से निपटने के लिए उपयोगी साबित हो सकता है जो आपके विचारों को गतिशील रूप से लोड करते हैं।

VM[n]कोई महत्वपूर्ण महत्व है, और nस्क्रिप्ट आईडी के बराबर पर। यह जानकारी यहां पाई जा सकती है: Chrome "[VM]"

Answer 11

विजुअल स्टूडियो (2012) का उपयोग करना मेरे पास एक ही मुद्दा था और IIS एक्सप्रेस में स्विच करने से समस्या हल हो गई!

scriptटैग की typeविशेषता इसे में कारक नहीं किया।

किसी कारण से Visual Studio डेवलपमेंट सर्वर सब कुछ प्रदान नहीं करता है जिससे Chrome को ब्रेकपॉइंट्स को सक्षम करने की आवश्यकता होती है।

Answer 12

मुझे पता है कि क्यू के बारे में नहीं है, Firefoxलेकिन मैं इस सवाल की एक प्रति नहीं जोड़ना चाहता था, ताकि मैं खुद इसका उत्तर दूं।

फ़ायरफ़ॉक्स के लिए आपको टैग के लिए सुझाए गए @ मैट-बॉलdebugger; को करने में सक्षम होना चाहिए ।script

तो अपने कोड पर, आप debuggerउस लाइन के ऊपर जोड़ दें जिसे आप डीबग करना चाहते हैं और फिर आप ब्रेकपॉइंट जोड़ सकते हैं। यदि आप ब्राउज़र पर ब्रेकप्वाइंट सेट करते हैं तो यह बंद नहीं होगा।

यदि यह फ़ायरफ़ॉक्स जवाब जोड़ने के लिए जगह नहीं है, तो यह सवाल क्रोम के बारे में है। नहीं :( जवाब नाबालिग बस मुझे बताएं कि मुझे इसे कहां पोस्ट करना चाहिए और मैं खुशी से पोस्ट को स्थानांतरित करूंगा। :)

Answer 13

यह ऊपर दिए गए रियान श्मिट के उत्तर का विस्तार है । मेरे मामले में, मेरे HTML कोड मेरे जावास्क्रिप्ट कोड में एम्बेडेड थे और मैं HTML कोड के अलावा कुछ भी नहीं देख सकता था। हो सकता है कि क्रोम डिबगिंग पिछले कुछ वर्षों में बदल गया हो, लेकिन स्रोत / स्रोत टैब पर राइट-क्लिक करने से मुझे कार्यक्षेत्र में ऐड फ़ोल्डर के साथ प्रस्तुत किया गया । मैं अपनी पूरी परियोजना को जोड़ने में सक्षम था, जिसने मुझे अपने सभी जावा स्क्रिप्ट में प्रवेश दिया। आप इस लिंक में अधिक विवरण पा सकते हैं । मुझे उम्मीद है कि इससे किसी को मदद मिलेगी।