Chrome डेवलपर टूल की शैलियाँ पैनल के सीएसएस परिवर्तनों को कैसे बचाएं?

Question

Google Chrome डेवलपर टूल की शैलियाँ पैनल के सीएसएस परिवर्तनों को कैसे बचाएं ?

टूल की वेबसाइट पर यह उल्लेख किया गया है कि हम संसाधन पैनल में सभी परिवर्तन देख सकते हैं

लेकिन मैं एक सीएसएस फ़ाइल पर स्थानीय रूप से काम कर रहा हूं लेकिन मेरे लिए संसाधन पैनल में परिवर्तन दिखाई नहीं दे रहे हैं

वैसे क्या आप किसी भी ऐड-ऑन को जानते हैं, क्रोम डेवलपर टूल्स के सीएसएस परिवर्तन को बचाने के लिए उपकरण? मुझे पता है कि Firebug के लिए कई https://stackoverflow.com/search?q=firebug+CSS+changes+save हैं

Comments

अब परिवर्तित किए जा रहे संसाधनों पर सूचनाएं प्राप्त करने के लिए DevTools एक्सटेंशन के लिए एक API है - इसलिए आप एक ऐसा एक्सटेंशन बना सकते हैं जो आपकी पसंद की IDE के साथ एकीकृत होगा या संसाधन सामग्री को WebDAV सर्वर पर पोस्ट कर सकता है: developer.chrome.com/extensions/ …

— केस

मेरा मानना ​​है कि यह प्रश्न और इसके उत्तर अप्रचलित हैं, क्योंकि क्रोम ने अपनी संशोधित-सीएसएस-बचत कार्यक्षमता को "स्रोत" पैनल में स्थानांतरित कर दिया है । कार्यक्षमता काफी भ्रामक है, और कुछ भ्रामक है: मैंने इस संबंधित स्टैक ओवरफ्लो पोस्ट में कुछ विस्तार से क्रोम की संशोधित-सीएसएस-बचत कार्यक्षमता का पता लगाया: stackoverflow.com/questions/16005435/…

— ChaseMosci

के संभावित डुप्लिकेट निर्यात सीएसएस निरीक्षक (वेबकिट, फ़ायरबग, आदि) से बदल जाता है

— एमईएमएस

स्थानीय ओवरराइड्स ऐसा करने का एक नया तरीका है, जो क्रोम 65 में शुरू होता है। ओवरराइड्स वर्कस्पेस की तुलना में एक अलग विशेषता है।

— १

Answer 1

आप क्रोम देव टूल्स से अपने सीएसएस बदलावों को बचा सकते हैं। Chrome अब आपको अपने कार्यक्षेत्र में स्थानीय फ़ोल्डर जोड़ने की अनुमति देता है। क्रोम को फ़ोल्डर तक पहुंचने और स्थानीय कार्यक्षेत्र में फ़ोल्डर को जोड़ने की अनुमति देने के बाद, आप एक वेब संसाधन को स्थानीय संसाधन में मैप कर सकते हैं।

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

• फ़ोल्डर को जोड़ने के बाद, आपको फ़ोल्डर में क्रोम एक्सेस देना होगा।

• इसके बाद, आपको नेटवर्क संसाधन को स्थानीय संसाधन में मैप करना होगा।

• पृष्ठ को पुनः लोड करने के बाद, Chrome अब मैप की गई फ़ाइलों के लिए स्थानीय संसाधनों को लोड करता है। चीजों को सरल बनाने के लिए, Chrome आपको केवल स्थानीय संसाधन दिखाता है (ताकि आप इस बात पर भ्रमित न हों कि क्या आप स्थानीय या नेटवर्क संसाधन का संपादन कर रहे हैं)। अपने परिवर्तनों को सहेजने के लिए, CTRL + Sफ़ाइल को संपादित करते समय दबाएं ।

ps

Chrome का स्थानीय संस्करण (दिनांक 201604.12) लागू करने के लिए आपको मैप की गई फ़ाइल को खोलना होगा और संपादन शुरू करना होगा।

Comments

मैं केवल अपने विषय की शैली पत्रक के नीचे जोड़ना चाहता हूँ, जो भी सीएसएस मैं अपने सीएसएस संपादन रहते हुए आया हूँ, जो भी अलग है। बस। वहाँ एक 'diff' के साथ आने का एक तरीका है कि CSS मैं कॉपी और पेस्ट कर सकता हूं? यह अन्य प्रश्न देखें: stackoverflow.com/questions/21871535/… पृष्ठभूमि कहानी यह है कि मैं CSS का संपादन कर रहा हूं जो कि एक विषय से संबंधित है, मैं केवल स्टाइलशीट के तल पर CSS जोड़ सकता हूं, ऊपर कुछ भी संपादित नहीं कर सकता। यही बात लागू होती है यदि कोई व्यक्ति अपने CSS overrides वाली वेबसाइट पर केवल custom.css जोड़ सकता है।

— कैरोलीन श्नाप

पॉल-आयरिश, केवल स्थानीय परिवर्तन CSS (दूरस्थ परिवर्तनों के बिना) के अंतर / पैच बनाने के तरीके में रुचि रखते हैं। सेविंग्स वास्तव में लचीलेपन और त्वरण की समस्या को हल नहीं करते हैं ...

— डेनिस डेनिसोव

अब क्रोम स्वचालित रूप से स्थानीय फ़ाइलों को सहेज रहा है (CTRL + S को दबाए बिना) कि इसे कैसे रोका जाए?

— उज़ैर अली

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

— क्रिस्पी

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

— खस्ता

Answer 2

DevTools टेक लेखक और डेवलपर यहाँ की वकालत करते हैं।

Chrome 65 में शुरू, स्थानीय ओवरराइड्स ऐसा करने का एक नया, हल्का तरीका है। यह वर्कस्पेस की तुलना में एक अलग विशेषता है।

ओवरराइड को सेट करें

1. स्रोत पैनल पर जाएं ।
2. ओवरराइड्स टैब पर जाएं ।
3. ओवरराइड के लिए चयन फ़ोल्डर पर क्लिक करें ।
4. चुनें कि आप किस निर्देशिका को अपने परिवर्तनों को सहेजना चाहते हैं।
5. अपने व्यूपोर्ट के शीर्ष पर, DevTools को निर्देशिका में पढ़ने और लिखने के लिए अनुमति दें पर क्लिक करें ।
6. अपने बदलाव करें। नीचे दिए गए GIF में, आप देख सकते हैं कि background:rosybrownपरिवर्तन पूरे पेज लोड पर बना रहता है।

ओवरराइड कैसे काम करता है

जब आप DevTools में परिवर्तन करते हैं, तो DevTools आपके कंप्यूटर पर फ़ाइल की संशोधित प्रतिलिपि में परिवर्तन को सहेजता है। जब आप पृष्ठ को पुनः लोड करते हैं, तो नेटवर्क संसाधन के बजाय DevTools संशोधित फ़ाइल परोसता है।

ओवरराइड और वर्कस्पेस के बीच का अंतर

कार्यस्थानों को आपके IDE के रूप में DevTools का उपयोग करने के लिए डिज़ाइन किया गया है। यह स्रोत मानचित्र का उपयोग करके, नेटवर्क रिपॉजिटरी में आपके रिपॉजिटरी कोड को मैप करता है। असली लाभ यह है कि यदि आप अपने कोड का उपयोग कर रहे हैं, या उस कोड का उपयोग कर रहे हैं, जिसे SCSS की तरह ट्रांसप्‍लेड करने की आवश्‍यकता है, तो DevTools (आमतौर पर) में आपके द्वारा किए गए परिवर्तन आपके मूल स्रोत कोड में वापस मिल जाते हैं। दूसरी ओर, ओवरराइड्स आपको वेब पर किसी भी फाइल को संशोधित और सहेजने देते हैं। यह एक अच्छा समाधान है यदि आप केवल परिवर्तनों के साथ जल्दी से प्रयोग करना चाहते हैं, और उन परिवर्तनों को पृष्ठ भार में सहेजना चाहते हैं।

Comments

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

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

— कारल्स अल्कोली

क्षमा करें महोदय क्या liveSCSS को खाली नहीं किया गया है और अब विकसित नहीं किया गया है? stackoverflow.com/a/57622797/10189759 पर

— लुक एरन

@ के आधार पर क्रोम एक्सटेंशन विकसित करने के बारे में क्या? जब आप स्टाइलशीट (और js) इंजेक्ट कर रहे हैं, ये सभी सुविधाएँ काम नहीं कर रही हैं, है ना? उस तरह के विकास के लिए कोई समाधान (विस्तार के स्थानीय स्रोत फ़ाइलों के लिए क्रोम देव उपकरण से सीएसएस / जेएस अपडेट को गति देने के लिए)। साभार

— एंड्रयू 10

Answer 3

Chrome के नए संस्करणों में कार्यक्षेत्र नामक एक सुविधा है जो इस समस्या को संबोधित करती है। आप अपने वेबसर्वर पर किन रास्तों को परिभाषित कर सकते हैं कि आपके सिस्टम पर किन रास्तों के अनुरूप हैं, फिर सिर्फ ctrl-s के साथ संपादित करें और सहेजें।

देखें: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

Comments

मुझे लगता है कि ओपी एलीमेंट्स पैनल के स्टाइल्स टैब में किए गए बदलावों को देखना चाहता है। ये परिवर्तन आवश्यक रूप से एक विशिष्ट स्रोत फ़ाइल से बंधे नहीं हैं।

— रॉन इनबार

Answer 4

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन मैं इसे इस तरह से सहेजता हूं:

1. सूत्रों के फलक पर जाएं
2. शो नेविगेटर (बाईं ओर नाविक फलक दिखाने के लिए) पर क्लिक करें।
3. आपको चाहिए सीएसएस फ़ाइल पर क्लिक करें। (यह आपके द्वारा किए गए सभी परिवर्तनों के साथ संपादक में खुलेगा)
4. संपादक पर राइट क्लिक करें और अपने परिवर्तन सहेजें।

आप अपने संशोधन, बहुत दिलचस्प सुविधा को देखने के लिए स्थानीय संशोधन भी देख सकते हैं । स्क्रिप्ट के साथ भी काम करते हैं।

Comments

मैं "शो नेविगेटर" का पता नहीं लगा सका

— निकीलर्सन

@NickyLarson, मैंने अपने उत्तर को शामिल करने के लिए संपादित किया कि यह बटन कहां है।

— गिलहर्मे डे जीसस सैंटोस

मूल प्रश्न को फिर से पढ़ें। वह CSS फ़ाइल को संपादित नहीं कर रहा है। वह एलिमेंट्स पैनल के स्टाइल्स टैब में बदलाव कर रहा है।

— रॉन इनबार

Answer 5

आप "संसाधन" के गलत खंड में देख रहे हैं।

यह "लोकल स्टोरेज" के तहत नहीं है, यह "फ्रेम्स" के तहत है:

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

Comments

फ्रेम्स के अंदर भी कुछ नहीं, मेरे लिए। मैंने प्रश्न में एक और स्क्रीनशॉट जोड़ा

— जितेंद्र व्यास

मुझे यकीन नहीं है कि आपके "फ्रेम्स" कैसे खाली हो सकते हैं। जो टूट गया लगता है। कैनरी बिल्ड में इसे आज़माएं (आप इसे अपने वर्तमान संस्करण के साथ स्थापित कर सकते हैं): tools.google.com/dlpage/chromesxs

— तीस दिनांक

कैनरी खोलने में असमर्थ है। मुझे यह समाधान justin.my/2011/04/why-my-google-chrome-canary-cannot-run भी मिला लेकिन यह अभी भी काम नहीं कर रहा है। इंस्टालेशन के समाप्त होने पर मुझे यह संदेश मिला। k.min.us/iefbE2.jpg

— जितेन्द्र व्यास

इस सप्ताह के अंत में (5/21/2012), इस समाधान से अब मुझे विश्वास नहीं होता है। मैं वही काम करता था जो आप नई सीएसएस (पुराने नहीं, या संपादन) के बड़े हिस्से को लिखने के लिए दिखाते हैं । लेकिन अब, मेरे लिए कम से कम, उस HTML फ़ाइल पर क्लिक करने से नए CSS नियमों को दिखाए बिना केवल कच्चा HTML दिखाई देता है। क्या यह अभी भी आपके लिए काम कर रहा है, और यदि आपके पास इसे पूरा करने के लिए कोई नया उपाय नहीं है?

— न्यूक्लियॉन

यह मेरे लिए क्रोम 48 में भी काम नहीं कर रहा है। वैसे भी अभी भी ऐसा करने के लिए?

— DMTintner

Answer 6

Tincr Chrome एक्सटेंशन इंस्टॉल करना आसान है (नोड सर्वर को चलाने की कोई आवश्यकता नहीं है) और बॉक्स के बाहर कार्यक्षमता की तरह LiveReload भी आता है! द्वि-दिशात्मक संपादन के बारे में बात करें! :)

Tin.cr वेबसाइट

क्रोम वेब स्टोर लिंक

एंडीज ब्लॉग आलेख

Comments

Browserync.io जैसे ओपन-सोर्स टूल बहुत बेहतर हैं, सभी आधुनिक ब्राउज़रों का समर्थन करते हैं और बहुत कुछ प्रदान करते हैं

— जियानफ्रेंको पी।

Answer 7

अब जब क्रोम 18 को पिछले सप्ताह आवश्यक एपीआई के साथ रिलीज़ किया गया था, तो मैंने क्रोम वेब स्टोर में अपना क्रोम एक्सटेंशन प्रकाशित किया । विस्तार स्वचालित रूप से स्थानीय डिस्क में डेवलपर टूल में सीएसएस या जेएस में परिवर्तन बचाता है। जाओ इसकी जाँच करो।

Answer 8

FYI करें, यदि आप इनलाइन शैलियों का उपयोग कर रहे हैं या DOM को सीधे संशोधित कर रहे हैं (उदाहरण के लिए एक तत्व जोड़ने के लिए), कार्यस्थान इस समस्या का समाधान नहीं करते हैं। ऐसा इसलिए है क्योंकि DOM स्मृति में रह रहा है और DOM की सक्रिय स्थिति से जुड़ी वास्तविक फ़ाइल नहीं है।

उसके लिए, मुझे कंसोल से डोम के स्नैपशॉट के बाद "पहले" और "बाद में" लेना पसंद है: copy(document.getElementsByTagName('html')[0].outerHTML)

फिर मैंने इसे अपने परिवर्तनों को देखने के लिए एक अलग उपकरण में रखा।

पूरा लेख: https://medium.com/@theroccob/get-code-out-ch-chrome-devtools-and-into-your-editor-defaf5651b4a

Answer 9

किसी भी एक्सटेंशन के बारे में अपने प्रश्न के अंतिम भाग का उत्तर देने के लिए जो परिवर्तनों को सहेज सकता है, हॉटफ़िक्स है

यह आपको क्रोम देव टूल्स से सीधे GitHub में परिवर्तन सहेजने की अनुमति देता है। वहां से आप अपनी वेबसाइट को स्वचालित रूप से अपडेट करने के लिए GitHub पर एक पोस्ट-प्राप्त हुक सेट कर सकते हैं।

Answer 10

जब तक आप CSS को इसमें चिपका नहीं रहे हैं element.style:

1. आपके द्वारा जोड़ी गई शैली पर जाएं। इंस्पेक्टर-स्टाइलशीट कहते हुए एक लिंक होना चाहिए:

2. उस पर क्लिक करें, और यह सभी सीएसएस को खोलेगा जिसे आपने स्रोत पैनल में जोड़ा है

3. कॉपी और पेस्ट करें - याय!

आप तो है का उपयोग कर रहा element.style:

आप बस अपने HTML तत्व पर राइट-क्लिक कर सकते हैं, HTML के रूप में संपादित करें पर क्लिक करें और फिर इनलाइन शैलियों के साथ HTML को कॉपी और पेस्ट करें।

Comments

और अगर आप उस इंस्पेक्टर-स्टाइलशीट को नहीं ढूंढ सकते हैं क्योंकि आप डोम के माध्यम से खोज खो गए हैं, तो बस Ctrl + P (या CMD + P) जबकि DevTools केंद्रित है और "इंस्पेक" लिखना शुरू कर रहा है ... यह पॉप अप होगा, और उसके बाद ही प्रवेश करें। i.imgur.com/WSWcbh8.png

— Carles Alcolea

Answer 11

अद्यतन 2019: जैसा कि अन्य उत्तर थोड़े पुराने हैं, मैं यहां एक अद्यतन जोड़ दूंगा। नवीनतम संस्करण में फाइल सिस्टम के लिए क्रोम फोल्डर को मैप करने की कोई आवश्यकता नहीं है।

तो, मान लें कि मेरे पास एक वेब फ़ोल्डर है जिसमें HTML, CSS, JS फाइलें डेस्कटॉप में हैं, जिन्हें मैं क्रोम में परिवर्तन करते समय अद्यतन करना चाहता हूं: =

1) आपको नोड आदि जैसे एक रनिंग लोकल सर्वर की आवश्यकता होगी, वैकल्पिक रूप से यह vscode एक्सटेंशन आपके लिए सर्वर बनाता है: लाइव सर्वर VSCode एक्सटेंशन , इसे इंस्टॉल करें , सर्वर चलाएं ।

2) स्थानीय सर्वर को चलाने से क्रोम में HTML पेज लोड करें।

3) ओपन devTools-> स्रोत-> Filesystem-> कार्यक्षेत्र में फ़ोल्डर जोड़ें

4) उस फ़ोल्डर को जोड़ें जो स्थानीय सर्वर को चलाने में उपयोग किया जाता है। नवीनतम क्रोम में अतिरिक्त मानचित्रण की आवश्यकता नहीं है! टा-दा!

इस पर अधिक कार्यस्थानों के साथ फ़ाइलें संपादित करें

ध्यान दें कि शैलियों टैब पर किए गए परिवर्तन फ़ाइल सिस्टम फ़ाइलों पर प्रतिबिंबित नहीं करेंगे। इसके बजाय आपको devtools-> source-> your_folder पर जाने की आवश्यकता है और फिर वहां अपने परिवर्तन करें और प्रभाव को देखने के लिए पृष्ठ को पुनः लोड करें।

Comments

लेकिन ओपी ने विशेष रूप से स्टाइल्स टैब में किए गए बदलावों के बारे में पूछा ...

— रॉन इनबार