मुझे हमेशा के लिए यह समस्या थी, और आखिरकार फैसला किया कि हमें वेब इंस्पेक्टर में चीजों को संपादित नहीं करना चाहिए और इसके लिए कुछ बनाया ( https://github.com/viatropos/design.io )।
एक बेहतर समाधान:
जब आप अपने टेक्स्ट एडिटर में सेव दबाते हैं तो ब्राउजर अपने आप बिना रीलोडिंग के सीएसएस में बदलाव को दर्शाता है ।
वेब इंस्पेक्टर में सीएसएस संपादित करने का मुख्य कारण (मैं वेबकिट का उपयोग करता हूं, लेकिन फायरबग उसी लाइनों के साथ है) क्योंकि हमें छोटे समायोजन करने की आवश्यकता है, और पृष्ठ को फिर से लोड करने में बहुत लंबा समय लगता है।
इस दृष्टिकोण के साथ 2 मुख्य समस्याएं हैं। सबसे पहले, आपको एक व्यक्तिगत तत्व को संपादित करने की अनुमति है जिसमें एक idचयनकर्ता नहीं हो सकता है । इसलिए, भले ही आप वेब इंस्पेक्टर से उत्पन्न सीएसएस को कॉपी / पेस्ट कर सकें, लेकिन इसे idसीएसएस को स्कोप करने के लिए उत्पन्न करना होगा । कुछ इस तरह:
#element-127 {
background: red;
}
इससे आपका सीएसएस गड़बड़ हो जाएगा।
आप एक मौजूदा चयनकर्ता ( .spaceनीचे वेबकिट इंस्पेक्टर छवि में वर्ग चयनकर्ता) के लिए केवल बदलती शैलियों के द्वारा इसे प्राप्त कर सकते हैं ।
हालांकि, दूसरी समस्या है। उस चीज़ के लिए इंटरफ़ेस बहुत कठिन है, बड़े बदलाव करना मुश्किल है - जैसे कि यदि आप इस स्थान पर सीएसएस के इस ब्लॉक को कॉपी करने की वास्तविक त्वरित कोशिश करना चाहते हैं, या जो भी हो।
मैं सिर्फ TextMate से रहना चाहता हूँ।
आदर्श सिर्फ अपने पाठ संपादक में सीएसएस लिखना होगा और ब्राउज़र को पृष्ठ को फिर से लोड किए बिना परिवर्तनों को प्रतिबिंबित करना होगा । इस तरह आप अपनी अंतिम सीएसएस लिख रहे हैं क्योंकि आप थोड़ा बदलाव कर रहे हैं।
अगला स्तर स्टाइलस सीएसएस लैंग्वेज में लिखना होगा, जैसे स्टाइलस, लेस, एससीएसएस, इत्यादि, और जेनरेट सीएसएस के साथ ब्राउजर को अपडेट करना होगा। इस तरह आप मिक्सिन्स बनाना शुरू कर सकते हैंbox-shadow() , कि वे जटिलताएं दूर हो जाती हैं, जो वेब इंस्पेक्टर निश्चित रूप से नहीं कर सकता।
वहाँ कुछ चीजें हैं जो इस तरह का करते हैं, लेकिन वास्तव में मेरी राय में इसे सुव्यवस्थित करने के लिए कुछ भी नहीं है।
- LiveReload : जब आप प्रेस को बचाते हैं, तो बिना रिफ्रेश किए css को ब्राउजर में धकेल देते हैं यह एक मैक ऐप है , इसलिए इसे कस्टमाइज करना मुश्किल होगा।
- CodeKit : एक मैक ऐप भी, लेकिन यह आपके द्वारा सेव किए जाने वाले ब्राउज़र को हर बार रिफ्रेश करता है।
इन कार्यों को आसानी से अनुकूलित करने की क्षमता नहीं होने का मुख्य कारण है कि मैंने उनका उपयोग नहीं किया।
मैं इस समस्या को हल करने के लिए विशेष रूप से https://github.com/viatropos/design.io को एक साथ रखता हूं , और इसे ऐसा करता हूं :
- ब्राउज़र सीएसएस / js / html / इत्यादि को दर्शाता है जब भी आप पृष्ठ को फिर से लोड किए बिना सहेजते हैं
- यह किसी भी टेम्पलेट / भाषा / रूपरेखा (स्टाइलस, कम, कॉफ़ीस्क्रिप्ट, जेड, हैमल, आदि) को संभाल सकता है।
- यह जावास्क्रिप्ट में लिखा गया है, और आप जावास्क्रिप्ट में वास्तविक त्वरित एक्सटेंशन को एक साथ कोड़ा कर सकते हैं।
इस तरह, जब आपको सीएसएस में उन छोटे बदलाव करने की आवश्यकता होती है, तो आप कह सकते हैं, पृष्ठभूमि का रंग सेट करें, प्रेस सहेजें, नोप देखें, काफी नहीं, ह्यू को 10 से समायोजित करें, सहेजें, नोप, 5 से समायोजित करें, सहेजें, अच्छा दिखता है।
जिस तरह से यह काम करता है, जब भी आप किसी फ़ाइल को सहेजते हैं (ओएस स्तर पर), तो फ़ाइल को संसाधित करना (यह वह जगह है जहां एक्सटेंशन काम करता है), और वेबस्केट्स के माध्यम से ब्राउज़र में डेटा को धक्का देता है, जो तब संभाला जाता है (क्लाइंट पक्ष) विस्तार)।
प्लग या कुछ भी नहीं करने के लिए, लेकिन मैं लंबे समय तक इस मुद्दे से जूझता रहा।
उम्मीद है की वो मदद करदे।
