Google Chrome के साथ HTML स्रोत कोड का संपादन


34

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

मैं Google Chrome के साथ ऐसा कैसे कर सकता हूं?

क्या मेरे पास। Notepad में .html फ़ाइल खुली हो सकती है? (मुझे नोटपैड पसंद है क्योंकि यह वास्तव में तेज़ है।)

जवाबों:


27

Ctrl+Shift+I or F12-> तत्व, यह आपके स्रोत को दिखाना चाहिए। किसी भी तत्व पर राइट क्लिक करें और क्लिक करेंEdit as HTML

संपादित करें:

कुछ एक्सटेंशन हैं जो आप चाहते हैं जैसे दिखते हैं: https://chrome.google.com/extensions/search?itemlang=&q=ititor

ChromeEditorऔर Live WebSite Editorआशाजनक देखो।

बार्लॉप द्वारा जोड़ा गया
मैं यह देखता हूं कि (ctrl-shift-I / F12 के बाद), <HTML..> or </HTML>टैग को क्लिक करने और "html के माध्यम से संपादित करें" पर क्लिक करें। मुझे इसके भीतर कहीं भी संपादित करने की अनुमति देता है। शुरुआती टैग को चुनने का मतलब है कि संपादन के लिए पॉपअप बस वहाँ मौजूद सभी HTML स्रोत को कवर करता है - जो संपादन के दौरान अंतरिक्ष के मामले में बहुत साफ है। समापन टैग चुनना उपयोगी हो सकता है क्योंकि पॉपअप तब html के अंतर्गत आता है ताकि आप पहले / बाद में देखें। या बेहतर है, जैसा कि बेंजामिन कहते हैं, F2 को संपादित करने के लिए, ctrl-enter करने के लिए।


1
उदाहरण के लिए टैग नाम पर बिल्कुल क्लिक करने का प्रयास करें<body>
कैजुअल कोडर

1
यह डीबगिंग टूल है। यह संपादन उपकरण नहीं है। पेज बनाने के लिए Aptana, Netbeans या अन्य अधिक उपयुक्त IDE जैसे कुछ का उपयोग करें। टैग पूरा होने के साथ, संदर्भ, जावास्क्रिप्ट पूरा होने आदि। वेब पेज बनाने के लिए यह बहुत अधिक उत्पादक तरीका है। यदि आप अपने HTML संपादक के रूप में Chrome डेवलपर टूल का उपयोग करने पर जोर दे रहे हैं, तो copy as htmlसंदर्भ मेनू विकल्प है। तो आप इसे अपने मुख्य टेक्स्ट एडिटर की पसंद या अन्य टूल पर वापस पेस्ट कर सकते हैं।
कैजुअल कोडर

1
आप के बारे में जो मैं बात कर रहा हूं, उसके सबसे करीब, फ़ायरफ़ॉक्स में फ़ायरबग एडऑन है। कई विभिन्न जावास्क्रिप्ट / सीएसएस / डोम डीबगिंग टूल के बीच यह आपको पृष्ठ Open with Editorविकल्प पर संदर्भ मेनू में देता है। आप कई संपादकों को जोड़ सकते हैं। बेशक आप इसे नोटपैड का उपयोग करने के लिए कॉन्फ़िगर कर सकते हैं।
कैजुअल कोडर

2
यह संपादित करने के लिए F2 और Ctrl + Enter करने के लिए F2 का उपयोग करके थोड़ा तेज़ है
बेंजामिन

1
F2 और F2 फिर से वही काम करते हैं जो Ctrl + Enter के रूप में करते हैं।
फ्रैंक नॉक

23
  1. DevTools खोलें।
  2. एलिमेंट्स पैनल खोलें।
  3. HTML या बॉडी या कोई अन्य तत्व जो आप चाहते हैं, चुनें।
  4. Esc द्वारा खुला कंसोल।
  5. $ 0.contentEditable = true लिखें

अब आप पृष्ठ पर पाठ संपादित कर सकते हैं और चित्र स्थानांतरित कर सकते हैं लेकिन ऐसा नहीं है कि आप वास्तव में चाहते हैं :)


4
वास्तव में मैं क्या चाहता हूँ, लेकिन यह एक बहुत ही मनोरंजक सुविधा है!
बार्लॉप सिप

क्या मैं सही हूं कि यह वर्तमान क्रोम संस्करणों में डिफ़ॉल्ट रूप से है? मेरा मतलब है, मैं पहले ही एलिमेंट्स टैब में एडिट कर सकता हूं।
एलेक्स

मैंने अभी आपको इस सुविधा का उपयोग करके +100 दिए हैं।
बेंजामिन

वास्तव में अद्भुत विशेषता
iroel

@ बैंजामिन क्या आप +100 के बारे में गंभीर हैं (यानी आपने उसे अपनी स्थानीय प्रति में अतिरिक्त वोट दिए हैं, जाहिर है कि साइट पर ही नहीं, लेकिन फिर भी इसका कोई असर नहीं होगा), यह दिलचस्प होगा .. आपने ऐसा कैसे किया? या आप बहुत बुरा और भ्रामक मजाक कर रहे थे?
बार्लोप 16


1

यदि आप फ़ाइल को html स्रोत के रूप में संपादित करना चाहते हैं (और व्यक्तिगत तत्व नहीं) तो आप निम्नलिखित कार्य कर सकते हैं:

  1. बाईं ओर 'स्रोत' टैब चुनें
  2. 'स्रोत' फलक में राइट क्लिक करें और 'कार्यस्थान में फ़ोल्डर जोड़ें' का चयन करें और स्रोत HTML फ़ाइल के साथ फ़ोल्डर जोड़ें
  3. उस एचटीएमएल फ़ाइल पर राइट क्लिक करें जिसे आप संपादित करना चाहते हैं और 'नेटवर्क संसाधन के लिए मानचित्र' चुनें।

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