2010-04-01 19 views
38

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

मुझे समझ में नहीं आता कि ब्राउज़र डेवलपर टूल संपादन की अनुमति क्यों नहीं देते हैं। क्या इसे करने का कोई तरीका है?

[अपडेट]: 2015 में एक नया उत्तर के रूप में चिह्नित

त्वरित संकेत:

  • आईई अब सबसे अच्छा देव/डीबगिंग अनुभव
  • क्रोम IntelliSense प्रदान करता है में से एक जावास्क्रिप्ट, लिखते समय प्रदान करता है जो ठंडा है
  • एफएफ 2010 के समान ही काम करता है ..!

एक एक मौजूदा समारोह अद्यतन करने के लिए सभी तीन (फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर, और क्रोम) ब्राउज़र को शान्ति का उपयोग कर सकते हैं: कहते हैं कि मैं एक समारोह a() जो console.log ('एक') करते थे होता, तो मैं जा सकते हैं कंसोल करने के लिए, को alert('a') के रूप में फ़ंक्शन को फिर से परिभाषित करें और एक अलर्ट बॉक्स देखने के लिए इसे फिर से निष्पादित करें।

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

उत्तर

34

क्रोम में: ओपन Chrome DevTools -> स्रोत पैनल, बाएं नेविगेशन में ब्राउज़ करें, या Ctrl प्रेस + हे फ़ाइलों को खोलने के पेज में शामिल थे।

तो आप फ़ाइल को संपादित कर सकते हैं और परिवर्तन को बचाने के लिए Ctrl +एस दबाते हैं, और देखते हैं कि नए कोड के साथ होता है। मैं आमतौर पर इसे ब्रेक पॉइंट की सहायता से करता हूं।

आप डिबगिंग और अपने स्थानीय फाइल सिस्टम के लिए परिवर्तनों को सहेजना चाहते हैं, तो आप सही नेविगेशन पर क्लिक कर सकते हैं, और चयन करें फ़ोल्डर कार्यस्थान:

enter image description here

ऐसे मामले में, यदि आप DevTools में अपने परिवर्तनों को सहेजते हैं, तो आपके फाइल सिस्टम में प्रासंगिक फ़ाइल भी अपडेट की जाएगी।


उदाहरण के लिए मैं कार्यक्षेत्र के लिए एक फ़ोल्डर जोड़ने के लिए, यह है कि वहाँ एक 1.js:

enter image description here

तब मैं DevTools में जे एस फ़ाइल को संपादित, परिवर्तन में अद्यतन किया जाता है तुरंत स्थानीय फाइल सिस्टम:

enter image description here

+0

क्या आपको पता है कि वेब पर फिर से जाने पर हर बार उन परिवर्तनों को स्वचालित रूप से लोड करना संभव है पृष्ठ? –

+0

जहां तक ​​दृढ़ता है, आपको संभवतः साइट को स्थानीय रूप से अपने सिस्टम पर क्लोन करना होगा और वहां से जाना होगा। – kpie

10

ज़रूर, मैं निष्पादित जे एस (Firefox के लिए) समय पर उपयोगी हो पाया है, और मुझे लगता है कि यह आप के लिए क्या देख रहे हैं:

https://addons.mozilla.org/en-US/firefox/addon/1729

यह आप देख सकते हैं और अपने पृष्ठ पर जावास्क्रिप्ट को बदल सकता है ।

+0

का उल्लेख करने के लिए प्रकट होता है ओह ..! मैंने उस यूआरएल earler का दौरा किया था ... यह FIrefox 3.6 के साथ काम नहीं करेगा .. :( – Amit

+0

यह उद्देश्य प्रदान करता है .. मुझे अगले संस्करण के लिए इंतजार करना होगा .. – Amit

+0

दिलचस्प, काफी कुछ एक्सटेंशन काम नहीं कर रहे हैं फ़ायरफ़ॉक्स के नवीनतम संस्करण (0) के साथ ... –

7

क्रोम में जेएस कोड में बदलाव करने के लिए एक बहुत ही मजबूत सुविधा है। आप मूल रूप से कुछ ब्रेकपॉइंट्स सेट करते हैं और एक बार जब आप अपनी इच्छानुसार जेएस संपादित करते हैं। More info and demo - जहां पॉल आयरिश एक टूटे हुए पृष्ठ को ठीक करता है।


एफएफ के मामले में आप Developer Edition उपयोग कर सकते हैं:

JavaScript डीबगर बंद करो, के माध्यम से कदम, की जांच करने और जावास्क्रिप्ट एक पेज में चल रहे बदलाव लाते हैं।

+0

कोई विचार क्यों फ़ायरफ़ॉक्स उस सुविधा की पेशकश नहीं करता है? मैं उपयोग करने के लिए तैयार हूं क्रोम लेकिन चूंकि मैं मुख्य रूप से फ़ायरफ़ॉक्स का उपयोग करता हूं, इसके लिए एक समाधान अच्छा होगा। –

+0

@static_rtti देख रहे हैं https://developer.mozilla.org/en-US/docs/ FF डेवलपर संस्करण पर टूल: 'जावास्क्रिप्ट डीबगर रोकें, चरणबद्ध करें, किसी पृष्ठ में चल रहे जावास्क्रिप्ट को जांचें और संशोधित करें। लेकिन मैं मुख्य रूप से क्रोम का उपयोग करता हूं। –

0

क्रोम संस्करण 42.0.2311 में मैं कंसोल पर क्लिक करके एन डेवलपर टूल आप विंडो प्राप्त कर सकते हैं जहां आप जावास्क्रिप्ट संपादित कर सकते हैं और प्रेस एंटर के बाद ब्राउज़र में इसका प्रभाव देख सकते हैं।

enter image description here

सांत्वना संपादित करें पर क्लिक करके खुले डेवलपर उपकरण उपकरण विंडो के दाईं ओर पर और ब्राउज़र में अपने जावा स्क्रिप्ट कोड का परीक्षण करने के चलाने पर खत्म संपादन क्लिक के बाद आपकी जावा स्क्रिप्ट कोड के बाद मोज़िला संस्करण 37.0.1 में।

enter image description here

1

बनाने/ब्राउज़र में जावास्क्रिप्ट मैं firebug (Firefox के लिए प्लगइन) या फ़ायरफ़ॉक्स डेवलपर उपकरण पट्टी में बनाया गया (सबसे अच्छा developer version of firefox साथ प्रयुक्त) का उपयोग करेंगे संपादित करने के लिए।

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

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

3

क्रोम ब्राउज़र में जावास्क्रिप्ट को संपादित करने के लिए एक उत्कृष्ट सुविधा प्रदान करता है

चरण 1: विकास उपकरण ओपन क्रोम लॉन्च, से अपने स्थानीय फाइल सिस्टम/सर्वर और खुले डेवलपर टूल से एक पृष्ठ लोड टूल्स मेनू या Ctrl + Shift + I/Cmd + Shift + I दबाएं। स्रोत टैब पर नेविगेट करें या तो स्रोत आइकन पर क्लिक करें या अपनी जावास्क्रिप्ट फ़ाइल का चयन करने के लिए Ctrl + O दबाएं

setp2: संपादित करें अब आप सीधे कोड में कूद सकते हैं और अपना कोड संपादित कर सकते हैं। क्रोम सही लाइन का पता लगाने में आपकी सहायता के लिए एक उपयोगी फ़ंक्शन सूची भी प्रदान करता है - Ctrl + Shift + O/Cmd + Shift + O

चरण 3: सहेजें अपने परिवर्तनों को सहेजने के लिए Ctrl + S/Cmd + S दबाएं। यह फ़ाइल को स्मृति में अद्यतन करता है और तुरंत परिवर्तनों को लागू करता है।नोट हालांकि, वह कोड फिर से शुरू नहीं होगा, इसलिए प्रारंभिक चर में परिवर्तन प्रभावित नहीं होंगे।

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

चरण 4: पूर्ववत करें आपके अपडेट का कारण क्या था? संपादक पर राइट-क्लिक करें और स्थानीय संशोधन का चयन करें ...। निचला फलक सभी हालिया परिवर्तन प्रदर्शित करता है और आपको वापस लौटने की अनुमति देता है।


फ़ायरफ़ॉक्स ब्राउज़र में जावास्क्रिप्ट को संपादित करने की एक और उपकरण प्रदान करता है

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

चरण 2: संपादित करें फ़ाइल मेनू जावास्क्रिप्ट कोड स्निपेट को सहेजने और लोड करने के विकल्प प्रदान करता है, ताकि आप चाहें तो बाद में कोड का पुन: उपयोग कर सकते हैं। कोड पूर्ण होने और टाइप जानकारी केवल फ़ायरफ़ॉक्स 32 के बाद उपलब्ध है। स्वत: पूर्ण सुझावों को सूचीबद्ध करने के लिए, Ctrl स्पेस दबाएं। पॉपअप दिखाने के लिए, फ़ायरफ़ॉक्स 32 में Shift स्पेस दबाएं या फ़ायरफ़ॉक्स 33+ में Ctrl Shift Space दबाएं।

चरण 3: निष्पादन एक बार जब आप अपना कोड लिख लेते हैं, तो उस कोड का चयन करें जिसे आप चलाना चाहते हैं। यदि आप कुछ भी नहीं चुनते हैं, तो विंडो में सभी कोड चलाए जाएंगे। फिर निष्पादन मेनू का उपयोग करके, या संदर्भ मेनू का उपयोग करके शीर्ष पर दिए गए बटनों का उपयोग करके कोड को चलाने के तरीके को चुनें। कोड वर्तमान में चयनित टैब के दायरे में निष्पादित किया गया है। किसी फ़ंक्शन के बाहर घोषित किए गए किसी भी चर को उस टैब के लिए वैश्विक ऑब्जेक्ट में जोड़ा जाएगा।

चार निष्पादन विकल्प उपलब्ध हैं।

  1. भागो
  2. निरीक्षण
  3. प्रदर्शन
  4. पुनः लोड और भागो
1

यह वर्तमान में Firefox ओटीबी में संभव नहीं है। 737743 और 486546 बग देखें।

संदर्भ में @artur-grzesiak के लिए, "बंद करो, के माध्यम से, चरण की जांच करने और संशोधित" variables

संबंधित मुद्दे

 संबंधित मुद्दे