क्रोम डिबगर में संपादन

Question

मैं क्रोम डिबगर में जावास्क्रिप्ट कोड को "गतिशील रूप से" कैसे संपादित कर सकता हूं? यह मेरे लिए नहीं है, इसलिए मेरे पास स्रोत फ़ाइल तक पहुंच नहीं है। मैं कोड को संपादित करना चाहता हूं और यह देखना चाहता हूं कि पृष्ठ पर उनके क्या प्रभाव हैं, इस मामले में एक एनीमेशन को कई बार बंद करने से रोकना है।

Comments

आप ओपेरा का उपयोग कर सकते हैं। ओपेरा जेएस फाइलों के संपादन की अनुमति देता है। आपके द्वारा पृष्ठ को पुनः लोड करने के बाद, आपके परिवर्तन लागू हो जाएंगे। राइट क्लिक> स्रोत> परिवर्तन करें> परिवर्तन लागू करें।

— XP1

यह क्रोम डीबगर के लिए एक भयानक ट्यूटोरियल है। यह आपकी स्क्रिप्ट्स में इन-डीबगर परिवर्तन करने के लिए बहुत ही सरल चरणों को दिखाता है।

— सगनरिटिकल

आप सशर्त ब्रेकपॉइंट के माध्यम से "इंजेक्ट" कोड भी कर सकते हैं । दिए गए उदाहरण में फ़ंक्शन के num = 5, console.log(arguments[0], num), falseअंदर मान को अपडेट करने और लॉग करने के लिए उपयोग करें foo।

— एमईएमएस

कृपया इस stackoverflow.com/questions/66420/…

— stackinfostack

Answer 1

आप "लिपियों" टैब के तहत क्रोम डेवलपर टूल में अंतर्निहित जावास्क्रिप्ट डिबगर का उपयोग कर सकते हैं (बाद के संस्करणों में यह "स्रोत" टैब है), लेकिन आप कोड पर लागू होने वाले परिवर्तन केवल उस समय व्यक्त किए जाते हैं जब निष्पादन उनके माध्यम से गुजरता है। इसका मतलब है कि कोड में बदलाव जो पेज लोड होने के बाद नहीं चल रहा है, का प्रभाव नहीं पड़ेगा। उदाहरण के लिए माउसओवर हैंडलर में रहने वाले कोड में परिवर्तन , जिसे आप मक्खी पर परख सकते हैं।

Google I / O 2010 इवेंट से एक वीडियो क्रोम डेवलपर टूल्स की अन्य क्षमताओं को पेश करता है।

Comments

क्रोम के बाद के संस्करणों में टैब आइकन चले गए हैं और 'लिपियों' टैब का नाम बदलकर 'स्रोत' कर दिया गया है - इसलिए जावास्क्रिप्ट डिबगर को खोजने के लिए स्पष्ट नहीं हो सकता है। कुछ और जानकारी यहाँ stackoverflow.com/questions/12113769/…

— chrisjleu

ऐसी कोई विधि नहीं है। मैं भी स्रोत टैब के तहत कोड को संशोधित करने में असमर्थ हूं।

— मेलब

क्रोम डिबगर जावास्क्रिप्ट के स्थानीय संशोधन के लिए अनुमति नहीं देता है। असत्य।

— omikes

@oMiKeY झूठा क्या है? Chrome निश्चित रूप से स्क्रिप्ट को डीबगर में संशोधित करने की अनुमति देता है।

— JLRishe

@oMiKeY स्क्रिप्ट संशोधित नहीं होने पर आप संशोधित कर सकते हैं

— peterchaula

Answer 2

मैं आज इस पार आया, जब मैं किसी और की वेबसाइट के साथ खेल रहा था।

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

एक त्वरित काम के रूप में चारों ओर, और अगर यह आपकी स्थिति के साथ काम करता है:

1. स्क्रिप्ट में पहले वाले बिंदु पर ब्रेक-पॉइंट जोड़ें
2. पृष्ठ पुनः लोड करें
3. अपने परिवर्तनों को कोड में संपादित करें
4. CTRL+ s(परिवर्तन सहेजें)
5. डिबगर को अनपॉज़ करें

Comments

धन्यवाद! मुझे यह काम तब मिला जब पेज लोड के पास सही कहे जाने वाले एक स्व-निष्पादित अनाम फ़ंक्शन में परिवर्तन करने की आवश्यकता थी।

— पीटर

अर्घ, क्योंकि मैंने पहले भी यह कोशिश की थी और यह काम नहीं किया था और हालांकि ओह यार, मुझे यह कैसे याद आया। लेकिन हाँ, मेरे लिए काम नहीं करता है।

— बजे जेमी हटबर

मेरे लिए महत्वपूर्ण यह जानना था कि परिवर्तनों को बचाया जाना चाहिए (चरण 4)। धन्यवाद!

— सेर्गेई Goliney

मेरे लिए HTML फ़ाइलों के अंदर जावास्क्रिप्ट पर काम नहीं करता है । इसके अलावा, यदि आपने कार्यस्थान में कोई फ़ोल्डर जोड़ा है, तो स्थानीय js फ़ाइल, राइट-क्लिक करें और उस फ़ाइल को नेटवर्क dito में चुनें।

— oo

तो HTML फ़ाइलों में स्क्रिप्ट को संशोधित करने का कोई तरीका नहीं है?

— वारियर

Answer 3

यह वही है जो आप देख रहे हैं:

1.- स्रोत टैब पर नेविगेट करें और जावास्क्रिप्ट फ़ाइल खोलें

2.- फ़ाइल को संपादित करें, इसे राइट-क्लिक करें और एक मेनू दिखाई देगा: सहेजें पर क्लिक करें और इसे स्थानीय रूप से सहेजें ।

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

अधिक विस्तृत जानकारी यहाँ: http://www.sitepoint.com/edit-source-files-in-chrome/

Answer 4

बहुत आसान है, 'स्क्रिप्ट' टैब पर जाएं। और इच्छित स्रोत फ़ाइल का चयन करें और इसे संपादित करने के लिए किसी भी लाइन पर डबल-क्लिक करें।

Comments

यदि आप फ़ाइल के मामले में डिस्क में परिवर्तन सहेज सकते हैं तो यह बहुत बढ़िया होगा: // URL

— जिम ब्लैकलर

जैसा मैंने किया था वैसा ही हुआ, लेकिन परिवर्तन पृष्ठ पर नहीं दिखे, जैसा कि कोई उम्मीद करेगा। मुझे $ (चयनकर्ता) .fadeIn () ... से $ (चयनकर्ता) .stop (सत्य, सत्य) .fadeIn () ... Y'know बदलने की आवश्यकता है? और मैं यह देखना चाहता हूं कि यह पृष्ठ पर हो।

— टॉम

अरे धिक्कार है, तुम सही हो। अब मुझे आश्चर्य है कि क्रोम हमें कुछ भी संपादित करने की अनुमति देता है अगर इसका कोई प्रभाव नहीं होता है ..

— gnur

"इस रूप में सहेजें ..." केवल आपके कंप्यूटर पर फ़ाइल सहेजता है। यह पृष्ठ को पुनः लोड किए जाने के बाद परिवर्तनों को लागू नहीं करता है। यदि आप डीबगिंग के लिए JS फ़ाइलों में परिवर्तन लागू करना चाहते हैं, तो आप ओपेरा का उपयोग कर सकते हैं।

— XP1

और इसे एक tincr: chrome.google.com/webstore/detail/…

— JustGoscha

Answer 5

जैसा कि यह काफी लोकप्रिय प्रश्न है जो जेएस के लाइव-संपादन से संबंधित है, मैं एक और उपयोगी विकल्प को इंगित करना चाहता हूं। जैसा कि svjacob ने अपने उत्तर में बताया है:

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

उपरोक्त समाधान मेरे लिए काफी बड़े जेएस (वेबपैक बंडल - 3.21 एमबी के मिनिमाइज्ड वर्जन, कोड के 130k लाइनों को प्रीटीफाइड वर्जन में) के लिए काम नहीं आया - क्रोम क्रैश हो गया और पेज री-लोडिंग के लिए कहा गया जो किसी भी सहेजे गए परिवर्तनों को वापस करता है। इस मामले में जाने का तरीका फ़िडलर था जहां आप अपने कंप्यूटर से किसी भी स्थानीय फ़ाइल के साथ किसी भी दूरस्थ संसाधन को बदलने के लिए ऑटोरस्पोंड विकल्प सेट कर सकते हैं - विवरण के लिए इस SO प्रश्न को देखें ।

मेरे मामले में मुझे भी सफलतापूर्वक प्रतिक्रिया का मजाक उड़ाने के लिए कॉर्ड हेडर को फ़िडलर में जोड़ना पड़ा।

Answer 6

यदि इसकी जावास्क्रिप्ट जो एक बटन क्लिक पर चलती है, तो स्रोत> स्रोत (क्रोम में डेवलपर टूल में) के तहत परिवर्तन करना और सहेजने के लिए Ctrl + S दबा देना, पर्याप्त है । मेरे द्वारा हमेशा ऐसा ही किया जाता है।

यदि आप पृष्ठ को ताज़ा करते हैं, तो आपके जावास्क्रिप्ट परिवर्तन हो जाएंगे, लेकिन क्रोम को आपके ब्रेक पॉइंट अभी भी याद होंगे।

Answer 7

अब google chrome ने नया फीचर पेश किया है। इस सुविधा का उपयोग करके आप क्रोम ब्राउज़ में कोड को संपादित कर सकते हैं। (कोड स्थान पर स्थायी परिवर्तन)

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

धन्यवाद

Answer 8

@मार्क के उत्तर की तरह, हम overrideडिफ़ॉल्ट जावास्क्रिप्ट के लिए, क्रोम DevTools में एक स्निपेट बना सकते हैं । अंत में, हम देख सकते हैं कि पृष्ठ पर उनके क्या प्रभाव हैं।

Answer 9

यहाँ क्रोम में js डीबगर के लिए एक सौम्य परिचय है जो मैंने लिखा था। शायद यह दूसरों को इस बारे में जानकारी पाने में मदद करेगा: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

Comments

यह एक अच्छा लेखन है। दुर्भाग्य से, यह डीबगर में जेएस को संपादित करने के बारे में कुछ नहीं कहता है जो कि प्रश्न में कार्य है।

— ब्रूनो ब्रॉन्स्की

सहमत नहीं हैं। आप अंत में देखते हैं कि मैं विशेष रूप से उदाहरण देता हूं कि "डायनामिक रूप से क्रोम डीबगर में जावास्क्रिप्ट कोड को कैसे संपादित करें" जो सवाल का हिस्सा है।

— मेक

मेरे भाषण, जब तक मैं आपको गलत नहीं समझ रहा हूं, आप कंसोल में जेएस का मूल्यांकन करने का तरीका प्रदर्शित करते हैं। यह एक फ़ंक्शन को संपादित करने से अलग है ताकि जब भविष्य में फ़ंक्शन को कॉल किया जाए, तो यह अलग तरह से व्यवहार करता है।

— ब्रूनो ब्रोंस्की

काफी उचित। मैं समझ गया कि लाइव पेज के मूल्यों के इर्द-गिर्द परिवर्तन हो सकता है, और सोचा कि लिखने से मदद मिलेगी, क्योंकि एक बार जब आपके पास यह कंसोल में होगा, तो आप मानों के साथ खेल सकते हैं, और निष्पादन संदर्भ में कोई भी चीज js।

— मेक

हाँ, भाषण, मैंने वही किया जो आप कई वर्षों से करते हैं। मैं अंत में निराश हो गया कि इवेंट हैंडलर्स को बदलने के लिए एक अच्छी प्रतिक्रिया पाश प्राप्त करने में सक्षम नहीं होने के कारण। विशेष रूप से उन है कि पृष्ठ लोड के दौरान ट्रिगर। जैसा कि आरोनएलएलएस और मैंने gnur के उत्तर की टिप्पणियों में चर्चा की, कभी-कभी DevTools> Sources> स्रोत में काम करता है और अन्य बार यह संपादित नहीं होता है। लेकिन जब यह काम करता है, यह बहुत प्यारा है!

— बजे ब्रूनो ब्रोंस्की

Answer 10

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

Comments

आपको कंसोल को खुला रखना है ताकि क्रोम ब्रेकपॉइंट में बंद हो जाए, अन्यथा क्रोम ब्रेकप्वाइंट्स को अनदेखा कर देगा

— Seif Tamallah

काम नहीं कर रहा। मैं F5 का उपयोग करके पुनः लोड करता हूं और यह बंद हो जाता है, मैं फाइल को बदल देता हूं, फिर मैं दौड़ना जारी रखता हूं और मुझे वही त्रुटि मिलती है जो मैंने अभी तय की है। यह मुख्य पृष्ठ के बगल में एक js फ़ाइल है,

— darkgaze

Answer 11

मैं स्क्रिप्ट को बदलने और उस नई स्क्रिप्ट को डीबग करने का एक तरीका ढूंढ रहा था। जिस तरह से मैं ऐसा करने में कामयाब रहा:

1. उस स्क्रिप्ट की पहली पंक्ति में ब्रेकपॉइंट सेट करें जिसे आप बदलना और डीबग करना चाहते हैं।

2. पृष्ठ को पुनः लोड करें ताकि ब्रेकपॉइंट मारा जा रहा है

3. अपनी नई स्क्रिप्ट पेस्ट करें और उसमें वांछित ब्रेकप्वाइंट सेट करें

4. Ctrl + s, और पृष्ठ ताज़ा हो जाएगा, जिससे पहली पंक्ति में उस ब्रेकपॉइंट को हिट किया जाएगा।

5. जारी रखने के लिए F8, और अब आपकी नई चिपकाई गई स्क्रिप्ट मूल को बदल देती है जब तक कि कोई पुनर्निर्देशन और पुनः लोड नहीं किया जाता है।

Answer 12

Chrome DevTools में एक स्निपेट पैनल है, जहाँ आप जावास्क्रिप्ट कोड बना सकते हैं और संपादित कर सकते हैं जैसा कि आप एक संपादक में करेंगे, और इसे निष्पादित करेंगे। DevTools खोलें, फिर स्रोत पैनल चुनें, फिर स्निपेट्स टैब चुनें।

https://developers.google.com/web/tools/chrome-devtools/snippets

Answer 13

आप क्रोम में "ओवरराइड्स" का उपयोग पेज लोड के बीच जावास्क्रिप्ट परिवर्तन को बनाए रखने के लिए कर सकते हैं, यहां तक ​​कि जहां आप मूल स्रोत की मेजबानी नहीं कर रहे हैं।

1. डेवलपर टूल> स्रोत> ओवरराइड के अंतर्गत एक फ़ोल्डर बनाएँ
2. Chrome फ़ोल्डर से अनुमति मांगेगा, अनुमति दें पर क्लिक करें
3. फ़ाइल को स्रोत> पृष्ठ में संपादित करें फिर सहेजें (ctrl-s)। एक बैंगनी बिंदु इंगित करेगा कि फ़ाइल स्थानीय रूप से सहेजी गई है।