इंस्पेक्टर (वेबकिट, फायरबग, आदि) से निर्यात सीएसएस परिवर्तन

104

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

फिर उन परिवर्तनों को लेना और CSS फ़ाइल में उन्हें लागू करना बहुत कठिन नहीं है, लेकिन यह अच्छा होगा यदि मैं निरीक्षक में चयनकर्ता पर ठीक क्लिक कर सकता हूं और "निर्यात" या "कॉपी" का चयन कर सकता हूं, और मेरे पास उपलब्ध सामग्री है क्लिपबोर्ड।

क्या ऐसा कुछ मौजूद है?

— hookedonwinter
स्रोत

इसके लिए सफारी / क्रोम एक्सटेंशन लिखना मुश्किल नहीं होना चाहिए। उपयोगकर्ता को किसी तत्व पर राइट क्लिक करने की अनुमति देने के लिए संदर्भ मेनू का उपयोग करें, फिर ऑब्जेक्ट की वर्तमान संपत्ति को पकड़ो, शायद क्लिपबोर्ड पर भेजें?

— tbeseda

शायद मुझे यहां टिप्पणी करने से पहले खोज करना चाहिए था। के संभावित डुप्लिकेट stackoverflow.com/questions/162644/...

— MiffTheFox

बहुत सुंदर। मुझे क्रोम / वेब-किट के लिए कुछ जवाब देखने में अच्छा लगेगा, लेकिन वे कुछ शानदार जवाब हैं। धन्यवाद @MiffTheFox

— हुक

Backfire देखें: blog.quplo.com/2010/08/… यह कोशिश नहीं की है, लेकिन आशाजनक लगता है।

— ब्रायन डाउनिंग

1

@BryanDowning हो गया! यह सुपर कमाल है। पिंग के लिए धन्यवाद।

— हुकडोनविन्टर

77

मुझे इसका उत्तर मिल गया है, कम से कम क्रोम v14 के रूप में।

एलिमेंट्स सेक्शन में, सीएसएस नियमों के आगे बस "फ़ाइलनाम: लिननम्बर" लिंक पर क्लिक करें। सीएसएस फ़ाइल जो दिखाती है उसमें सभी संशोधन होंगे।

यह जगह बिल्कुल:

— निकोलस ज़ियोग्रॉफ़
स्रोत

4

ध्यान दें कि यह नए CSS चयनकर्ताओं के लिए भी काम करता है जो कि इंस्पेक्टर में +आइकन के माध्यम से जोड़े जाते हैं

— जोनाथन डे

1

यह केवल उन परिवर्तनों के लिए काम करेगा जो इंस्पेक्टर स्टाइलशीट में जोड़े गए हैं। यह मौजूदा वर्ग चयनकर्ताओं के लिए नियमों में किए गए बदलावों के लिए काम नहीं करेगा।

— ian.pvd

49

Chrome में, आप स्रोत टैब में CSS फ़ाइल को राइट-क्लिक कर सकते हैं और "स्थानीय संशोधन" पर क्लिक कर सकते हैं

यह आपको आपके सभी स्थानीय परिवर्तनों को दिखाता है। प्रत्येक संशोधन टाइमस्टैम्प्ड है और आप किसी भी पिछले संशोधन में रोलबैक कर सकते हैं।

इस ट्यूटोरियल का लाइव संपादन और संशोधन इतिहास अनुभाग देखें ।

— क्रिस मैकडोनाल्ड
स्रोत

1

ऐसा लगता है कि आप केवल अपने अंतिम रेफ़रेश के रूप में रोलबैक कर सकते हैं। यदि आप गलती से ताज़ा / बंद टैब आदि

— tomblah

यह वेब बंडल जैसे आधुनिक बंडलों के साथ कैसे काम करता है जहां आपके सभी सीएसएस को एक फाइल में बांधा गया है?

— मैथबोरे

मैं इसे "स्थानीय संशोधन" नहीं देखता, क्या यह उत्तर पुराना है?

— ल्यूक पिगेटी

@LukePighetti मैं इसे v79 (12/2019) में देखता हूं, अगर मैं उस स्रोत फ़ाइल को खोलता हूं जिसे मैं> राइट क्लिक> स्थानीय संशोधनों में दिलचस्पी लेता हूं। यह "कंसोल दराज" शीर्षक पर एक टैब खोलता है जिसका शीर्षक "परिवर्तन" है जिसमें मेरी सभी परिवर्तित फ़ाइलों के साथ एक बाएं मेनू है। आप मेनू ellipsis> अधिक टूल> परिवर्तन पर क्लिक करके भी इसे प्राप्त कर सकते हैं।

— xr280xr

11

Firediff एक Firebug ऐड-ऑन है जो Firebug में किए गए परिवर्तनों को ट्रैक करता है । यह वह सब कुछ करता है जो आप HTML फलक (महान) में करते हैं, लेकिन वेब डेवलपर टूलबार एक्सटेंशन (इतना महान नहीं) का आपका संक्षिप्त उपयोग, px में फ़ॉन्ट-आकार की जानकारी प्राप्त करने के लिए Shift-Ctrl-F कहते हैं।

मैंने क्रोम में फ़ायरबग एक्सटेंशन देखा है, लेकिन इसका परीक्षण नहीं किया है, मैं फ़ायरफ़ॉक्स के साथ फ़ेयरडिफ का उपयोग करता हूं।

— FelipeAls
स्रोत

कूल प्लगइन। निश्चित रूप से मुझे जहां मैं चाहता हूं, वहां करीब ले जाता हूं। प्रतीक्षा करने और देखने के लिए कि क्या कुछ बेहतर आता है (क्लिप पर पूर्ण स्वरूपित सीएसएस क्लिपबोर्ड पर, उदाहरण के लिए)।

— हुकडोनविनर

7

मैंने एक Chrome एक्सटेंशन का निर्माण किया जो ठीक यही करता है।

इसे स्टाइलल कहा जाता है - यह क्रोम इंस्पेक्टर में आपके द्वारा किए गए सीएसएस में परिवर्तन करता है और वैध सीएसएस को इस रूप में मान्य करता है: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknnbanolhlnkmgp

यहाँ एक उदाहरण है जहाँ मैंने इस पृष्ठ पर "पैडिंग-बॉटम: 50px" जोड़ा है:

यह खुला-स्रोत है और GitHub पर भी: https://github.com/Jarred-Sumner/styleurl-extension

— जरीद सुमेर
स्रोत

बहुत आसान उपकरण!

— DanTheMann

2

सभी लिंक काम नहीं कर रहे हैं। कृपया अपडेट करें, आशाजनक लगता है

— Mirosław

यह प्रोजेक्ट अब छोड़ दिया गया है। यह शर्म की बात है :-(

— डेमन हिल

6

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

— एड्रियन बी
स्रोत

1

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

— ian.pvd

9 वर्षों के बाद इन उत्तरों में बहुत शोर है, लेकिन यह आसानी से सबसे अच्छा उत्तर है। केवल एक चीज गायब है, निर्यात को निर्यात करने का एक त्वरित तरीका है ताकि आप साइड-बाय-साइड करने के बजाय स्क्रिप्ट या IDE में परिवर्तनों को स्वचालित रूप से संसाधित कर सकें और मैन्युअल रूप से एक स्टाइल शीट को घुमा सकें।

— सामी फवाद

5

मैंने पहले एसओ पर इस उत्पाद का सुझाव दिया है (मैं किसी भी तरह से उनके साथ संबद्ध नहीं हूं)।

http://www.skybound.ca/

उत्कृष्ट उत्पाद। बिल्कुल वैसा ही लगता है जैसा आप देख रहे हैं और बहुत कुछ।

EDIT: यहां कई अन्य उत्तरों ने Google Chrome की आपकी स्थानीय फ़ाइलों से लिंक करने की क्षमता (जो बहुत ही शांत है) का उल्लेख किया है। अन्य उत्तरों की जाँच करें!

— ब्रायन डाउनिंग
स्रोत

बहुत कमाल का लग रहा है। बहुत बुरा यह $ 80 है। धन्यवाद @ ब्रायन, अच्छी खोज

— हुकडोनविन्टर

2

पिछले कुछ वर्षों में यहाँ उत्तर बदल गया है। Chrome DevTools अब आपको फ़ाइल में अपने परिवर्तन लिखने की अनुमति देता है । रोमांचक समय!

— बादल फटा

4

यदि आप बाहरी CSS को संपादित करते हैं, तो आप संसाधन पैनल के नवीनतम संशोधन को किसी भी पाठ संपादक में खींच सकते हैं, जो DnD का समर्थन करता है (देखें http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ ,) अधिक विवरण के लिए "बदलते परिवर्तन" अनुभाग। आप स्टाइलशीट संसाधन के किसी भी पुराने संस्करण में अपने CSS परिवर्तनों को वापस कर सकते हैं (किसी भी स्टाइलशीट संशोधन के राइट-क्लिक पॉपअप मेनू में।)

— अलेक्जेंडर पावलोव
स्रोत

4

जैसा कि क्लाउडवर्क्स ने उल्लेख किया है, इसका उत्तर बदल गया है। इसे अब Chrome DevTools Autosave एक्सटेंशन द्वारा अच्छी तरह से पूरा किया जा सकता है । यह टूल Chrome डेवलपर टूल कंसोल में किए गए CSS और JavaScript परिवर्तनों को ट्रैक करता है, और उन्हें स्थानीय फ़ाइलों में वापस सहेजता है। एक्सटेंशन को स्थापित करने और सेटअप करने के निर्देशों के लिए, कृपया अपने ब्लॉग पर @addyosmani द्वारा लिखित गाइड को देखें , यहां ।

यहां छवि विवरण दर्ज करें

एक आसान स्क्रैंकास्ट भी है जो विस्तार के बारे में अच्छी तरह से बताता है ।

— एंड्रयू Craswell
स्रोत

2

कार्यक्षेत्र के साथ आप अपने सीएसएस को बचा सकते हैं क्योंकि आप उन्हें अपने निरीक्षक में (क्रोम में) टाइप करते हैं। समस्या यह है कि प्रत्येक परिवर्तन स्वचालित रूप से सहेजा जाता है और इस सुविधा को अक्षम करने का कोई तरीका नहीं है, जैसा कि http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ में बताया गया है और Chrome डेवलपर टूल में सीएसएस परिवर्तनों की स्वचालित सहेजना अक्षम करें ।

— जियोर्जियो टेम्पस्टा
स्रोत

1

फ़ायरफ़ॉक्स और क्रोम दोनों अब इस सुविधा का समर्थन करते हैं, लेकिन ध्यान दें कि कुछ प्लेटफार्मों में यदि सभी क्रोम डिफ़ॉल्ट रूप से नहीं दिखाते हैं, तो आपको इसे देखने के लिए "परिवर्तन" दृश्य को सक्षम करने की आवश्यकता है (मेरे कुबंटू लिनक्स 20.04 में) डिफ़ॉल्ट रूप से), यहां बताया गया है कि आप इसे कैसे सक्षम कर सकते हैं: डेवलपर टूल बार> "अधिक उपकरण"> "परिवर्तन" में "कस्टमाइज़ एंड कंट्रोल देवटूल" बटन पर जाएं , फिर टैब बटन पर दिखाई देगा:

फ़ायरफ़ॉक्स में इसे सक्षम करने की आवश्यकता नहीं है, लेकिन अगर आप क्रोम * दुनिया से आते हैं तो इसे ढूंढना मुश्किल हो सकता है। बस "इंस्पेक्टर" टैब में दाईं ओर अंतिम अनुभाग देखें:

— मारियानो रुइज़
स्रोत

0

यदि आप फ़ायरफ़ॉक्स स्टॉक देव टूल्स का उपयोग कर रहे हैं, तो आप सीधे टूल डायल में सीएसएस संपादित कर सकते हैं - सीएसएस व्यूपोर्ट बटन पर क्लिक करें (जो कि {}प्रतीक के साथ सबसे ऊपर स्थित बटन है ) और सीधे अपने सीएसएस को संपादित करें। यह ब्राउज़र में रियलटाइम में अपडेट हो जाएगा और जब आप बस इसे कॉपी-पेस्ट करेंगे तो सीधे आपकी सीएसएस फाइल में। अच्छा!

— अब्राहम ब्रुक्स
स्रोत

0

विशेष रूप से सफारी के लिए एक उत्तर जोड़ने के लिए - यह संभव है।

जब आप किसी मौजूदा CSS फ़ाइल के लिए इंस्पेक्टर में स्टाइल्स अनुभाग में CSS संपादित करते हैं, तो आप हिट कर सकते हैं Cmd-S परिवर्तनों के साथ पूरी फाइल को फिर से सहेजने के लिए हैं। हालाँकि, यदि आप Sass / preprocessor जैसी मेटा भाषा का उपयोग कर रहे हैं / अपने CSS को बंडलिंग आदि के साथ जनरेट कर रहे हैं, तो मुझे नहीं लगता कि यह वास्तव में उस समस्या को हल करता है, हालाँकि यह CSS स्रोत के नक्शे के साथ संभव हो सकता है।

जब आप Style Attributeइनलाइन शैलियों (मौजूदा सीएसएस फ़ाइल से बंधे नहीं) को जोड़ने के तहत, शैलियाँ अनुभाग के शीर्ष पर CSS को संपादित करते हैं , तो उन सभी परिवर्तनों को आसानी से निर्यात करना संभव नहीं लगता है। अभी के लिए, मैं बस ओवरराइड्स को प्रत्येक तत्व के लिए मैन्युअल रूप से कॉपी और पेस्ट कर रहा हूं।

आधिकारिक Apple डॉक्स थोड़े दिनांकित हैं, लेकिन यहां मिलते हैं: वेब इंस्पेक्टर ट्यूटोरियल - आपका वेबपेज बदलने के लिए कोड का संपादन ।

— टेलर एड्मिस्टन
स्रोत

0

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

— फ्रेज़र किर्कमैन
स्रोत

-1

मेरा बीटा-जल्द ही उत्पाद LIVEditor बिल्कुल यही करता है।

आपको इसे आसानी से समझने के लिए, आप सोच सकते हैं कि फायरबग के इंस्पेक्टर को आपके टेक्स्ट एडिटर में एम्बेड किया गया है।

इस तरह आप परिवर्तन करने की आवश्यकता नहीं है मैन्युअल रूप से करने के बाद अपने कोड संपादक में फिर से फेरबदल Firebug या वेबकिट के डेवलपर उपकरण का उपयोग कर यह।

— एडविन यिप
स्रोत

8

बहुत अच्छा लगता है। यह विंडोज के लिए बहुत बुरा है।

— केपीएम

आमतौर पर, टूल या लाइब्रेरी के लिंक का उपयोग नोटों के साथ किया जाना चाहिए, समस्या के लिए लिंक किए गए संसाधन या कुछ नमूना कोड , या यदि संभव हो तो उपरोक्त का एक विशिष्ट विवरण ।

— शमूएल ल्यू