वास्तविक समय पूर्वावलोकन और चयनकर्ता स्थानीयकरण के साथ सीएसएस संपादक


9

शीर्षक सब कुछ कहता है कि मैं क्या देख रहा हूँ। मूल रूप से यह एक सॉफ्टवेयर होना चाहिए जो एक वेबसाइट की सभी शैलियों को इकट्ठा करता है ताकि मैं उन्हें संपादित कर सकूं और उन्हें बचा सकूं।

कृपया प्रश्न को ध्यान से पढ़ें, क्योंकि मैं चाहता हूं कि सभी उल्लिखित शर्तों को पूरा किया जाए।

संपादित करें: मैं यहाँ अधिक स्पष्ट होना चाहता हूँ या अपने इच्छित वर्कफ़्लो का वर्णन करना चाहता हूँ। प्रारंभिक स्थिति यह होगी कि आपके स्थानीय मशीन पर वेबसाइट के स्रोत हैं।
अब मैं अपने संपादक / आईडीई / जो भी (कोई WYSIWYG!) में सादे स्रोतों (HTML / CSS) को खोलना चाहता हूं। और मैं इसके ठीक बगल में या अलग विंडो में (दूसरे टैब में नहीं!) एक लाइव पूर्वावलोकन चाहता हूं, मैं इसे स्रोत को संपादित करते हुए देखना चाहता हूं। पूर्वावलोकन स्वचालित रूप से अपडेट किया जाना चाहिए (या जब मैं फ़ाइल को सहेजता हूं जो अनिवार्य रूप से एक ही होगा क्योंकि CTRL + S एक पलटा की तरह है:)।
इसके अतिरिक्त इसमें एक निरीक्षक होना चाहिए जो फायरबग या क्रोम (e | ium) की तरह काम करता है। जब मैं उस निरीक्षक में CSS चयनकर्ता पर क्लिक करता हूं, तो कर्सर को संबंधित स्रोत फ़ाइल में दाईं ओर कूदना चाहिए।

ANOTHER EDIT: यह https://stackoverflow.com/q/4680109/220652 मिला । लगभग यही समस्या है।


2
फायरबग और वेब डेवलपर टूलबार दोनों सीएसएस को सीधे संपादित कर सकते हैं, बाद वाला इसे भी बचा सकता है।
लेकेन्स्टाइन

1
@Lekensteyn: हां, लेकिन फायरबग नहीं बचा सकता है और वेब डेवलपर चयनकर्ताओं का पता नहीं लगा सकता है। इसलिए वे नहीं हैं जो मैं देख रहा हूं। माफ़ करना।
dAnjou

जवाबों:


12

कुछ विकल्प हैं।

वर्तमान में मैं केवल Google Chrome के डेवलपर टूल ( एक्शन वीडियो ) का उपयोग करता हूं क्योंकि यह निरीक्षण, विस्तृत रिपोर्टिंग और ओवर-राइडिंग की एक विस्तृत श्रृंखला के लिए अनुमति देता है। अपने बदलाव करने के बाद मैं सिर्फ अपडेटेड CSS को कॉपी करता हूं और CSS फाइल के संबंधित सेक्शन को लिखता हूं, रिफ्रेश करता हूं, प्लग इन करना जारी रखता हूं।

यहां मैंने क्रोम के डेवलपर टूल में एक परिभाषा संपादित की है

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

मैं फ़ाइल नाम और लाइन नंबर (परिवर्तनों को कॉपी करने के बाद) का पालन कर सकता हूं और उन्हें संपादक में पेस्ट कर सकता हूं

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

इसके अलावा हाल ही में WebPutty नाम का एक टूल लॉन्च किया गया है जो आपकी वर्णित समस्या को कम करने के लिए बनाया गया है। हालांकि मैंने इसे व्यक्तिगत रूप से उपयोग नहीं किया है लेकिन यह जोएल स्पोलस्की की कंपनी फॉग क्रीक सॉफ्टवेयर द्वारा विकसित किया गया है ( जोएल स्टैकओवरफ्लो का सह-संस्थापक भी है) इसलिए मैं शर्त लगा सकता हूं कि यह अपेक्षाकृत स्थिर, सरल और प्रभावी उत्पाद है।


आप सीएसएस की नकल कैसे करते हैं? और आप इसे प्रति फ़ाइल कर सकते हैं? WebPutty स्थानीय वेबसाइटों को संभालने में सक्षम नहीं लगती, लेकिन संकेत के लिए धन्यवाद।
dAnjou

1
@jAnjou मैंने आपको यह दिखाने के लिए कुछ स्क्रीनशॉट प्रदान करने की कोशिश की कि वर्कफ़्लो कैसे चलेगा।
मार्को Ceppi

आह अच्छा। तो यह वर्कफ़्लो स्टाइलबोट के साथ लगभग समान है। सबसे बड़ा अंतर: स्टाइलबोट सीएसएस को बचाता है ताकि आप पृष्ठ को फिर से लोड कर सकें या उस वेबसाइट पर अन्य पृष्ठों पर जा सकें। वैसे भी, यह एक उत्थान है।
dnnjou

5

यह प्रश्न पहले से ही चर्चा में है, लेकिन आप अधिक विशेष रूप से CSS संपादक के बारे में बात कर रहे हैं। और मुझे यकीन है कि उन्होंने आपके प्रश्न को डुप्लिकेट के रूप में चिह्नित नहीं किया है।

हालांकि, जो मैं आपको सुझाव दे सकता हूं वह कई उपकरणों का उपयोग है जो मैंने अन्य सवालों के जवाब में पोस्ट किया है, जैसे: ubuntu में ड्रीमवेवर विकल्प? , और यहां तक ​​कि जब मैं शर्त लगा सकता हूं कि आपने पहले ही इसे देख लिया है, तो मैं इसे आपकी सुविधा के लिए यहां ट्रांसक्रिप्ट करता हूं:

आपका प्रश्न थोड़ा अस्पष्ट सा लगता है।

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

आधिकारिक वेब से एक स्क्रीनशॉट आप इसे कार्रवाई में देख सकते हैं:

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

अगले लिंक पर क्लिक करके अतिरिक्त स्क्रीनशॉट तक पहुँचा जा सकता है: http://www.w3.org/Amaya/screenshots/Overview.html

आपको यह थोड़ा अस्थिर लग सकता है, या कम से कम यह मेरे लिए था, लेकिन यह आपकी आवश्यकताओं के अनुरूप भी हो सकता है।

WYSIWYG संपादकों के साथ खेलने के बाद, मैंने ब्लूफिश के साथ सीधे एन्कोडिंग को प्राथमिकता दी लेकिन यह WYSIWYG संपादक नहीं है।

और फ़ायरबग के साथ आपके मुद्दे के सुझावों के बारे में मैं कुछ भी नहीं कह सकता, क्षमा करें।

कृपया हमें बताएं कि अगर आपने अमाया को मौका दिया तो आपने कैसे किया?

सौभाग्य!

संपादित करें == अमाया को स्थापित करने के बाद, मैं इसे अभी तक स्थिर से दूर पाता हूं, लेकिन किसी भी तरह से यह अन्य अनुप्रयोगों की तुलना में बेहतर विशेषताएं है, अगर आप मानते हैं कि अन्य सॉफ़्टवेयर सरल पाठ संपादक हैं और अमाया एक WYSIWYG संपादक की तरह है।

मैंने आपकी टिप्पणी में कही गई बातों का परीक्षण किया और मैंने पाया कि अमाया ने यह भी ध्यान नहीं दिया है कि फाइलों / फ़ोल्डरों की संरचना / नाम में कुछ बदल गया है। जो इस से संबंधित आपकी आवश्यकताओं के अनुरूप नहीं होगा।

अगले स्क्रीनशॉट में आप देख सकते हैं कि मैंने "रिसोर्स" फोल्डर का नाम बदलकर "रिसोर्सस 1" कर दिया है और अमाया अभी तक इसे "रिसोर्स" के रूप में दिखा रहा है और इसे रिफ्रेश करने के लिए कोई तरीका नहीं है। सॉफ्टवेयर को पुनः आरंभ करने और परियोजना को फिर से लोड करने के बाद भी, अमाया इसे नोटिस नहीं करेगा।

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

मैं आपके सवाल का बारीकी से पालन करने जा रहा हूं और उम्मीद करता हूं कि कोई अच्छा विकल्प आएगा।

सौभाग्य!

इसके अलावा, अन्य उपयोगकर्ताओं के सवालों के जवाब में मुझे " ब्लू ग्रिफ़ॉन वेब एडिटर " मिला, जो केवल स्थिर वेब एडिटर लगता है, जो एक वास्तविक समय पूर्वावलोकन विंडो की सुविधा देता है, -btw- विभाजन मोड में नहीं देखा जा सकता है । आप केवल एक ही समय में कोड या WYSIWYG पूर्वावलोकन देख सकते हैं, दोनों नहीं।

आपकी सुविधा के लिए यहां रखा गया स्क्रीनशॉट:

पूर्वावलोकन स्क्रीन: यहां छवि विवरण दर्ज करें

कोड स्क्रीन: यहां छवि विवरण दर्ज करें

इस टूल में बहुत सारे उपयोगी टूल शामिल हैं लेकिन कुछ ऐड-ऑन या प्लग-इन नॉन-फ्री (सशुल्क) हो सकते हैं। जो इसके प्रति आकर्षण को कम करता है।

Aptana स्टूडियो 3 , जो मैं इस जवाब में की सिफारिश: Dreamweaver जैसी बुनियादी वेब विकास आईडीई / संपादक? मेरे लिए, प्रोग्रामिंग के लिए सबसे अच्छा उपकरण है, क्योंकि मैं अपने दोहरे दृश्य विस्तारित डेस्कटॉप में वेब ब्राउज़र का उपयोग करके पूर्वावलोकन कर सकता हूं। जो आपका मामला नहीं हो सकता है।

यही मैं सुझाव दे सकता हूं। क्षमा करें यदि यह आपकी आवश्यकताओं के अनुरूप नहीं है और ...

सौभाग्य!


5

ठीक है, कभी भी सुनो! Geany सिर्फ भयानक है! इसमें एक प्लगइन है जो एक ब्राउज़र पूर्वावलोकन जोड़ता है। आप इसे साइडबार में, "बॉटलबार" या एक अतिरिक्त विंडो में रख सकते हैं। और अब दो अतिरिक्त बोनस बुरा गधा हत्यारा सुविधाओं। 1. यह ब्राउज़र WebKit का उपयोग करता है। इसका मतलब है, यह इस भयानक निरीक्षक है! 2. जब आप एक खुले दस्तावेज़ को सहेजते हैं तो ब्राउज़र पुनः लोड हो जाता है।

इसके अलावा इसमें कई अन्य भयानक विशेषताएं हैं लेकिन आपको इसे स्वयं प्रयास करना चाहिए। मैं एक के लिए प्यार हो गया। यहाँ आपके पास एक स्क्रीनशॉट है:

Geany


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

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

मेरा प्रश्न पूछें देखें ububuntu.com/questions/60949/…
नेमो

आह ... हम्म। दुर्भाग्य से संपादक के टैब के बगल में एक टैब में ब्राउज़र पूर्वावलोकन (जो पूरी तरह से चित्रित ब्राउज़र है) का होना Geany में संभव नहीं है। लेकिन आप इसे एक अतिरिक्त विंडो में रख सकते हैं। तो आप इसे कई मॉनिटर के साथ या वाइडस्क्रीन मॉनिटर (एक आधा ब्राउज़र, एक आधा संपादक) के साथ उपयोग कर सकते हैं।
dnnjou

4

क्षमा करें दोस्तों, लेकिन मैं अपने प्रश्न का उत्तर दूंगा। मुझे सिर्फ स्टाइलबॉट मिला । यह मेरे पास लगभग सभी शर्तों को पूरा करता है। इसका कोई ऑटो पूरा नहीं है, लेकिन मैं इसके साथ रह सकता हूं।

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

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


2

फ़ायरफ़ॉक्स addon Firediff का प्रयास करें । यह फायरबग के साथ "परिवर्तन" टैब को एकीकृत करता है, जो कि ज़ेन जैसा नाम बताता है, सीएसएस या डोम में आपके द्वारा किए गए किसी भी बदलाव को दिखाता है।

"परिवर्तन" टैब में एक सीएसएस परिवर्तन पर राइट क्लिक करें ताकि आपके परिवर्तनों का एक या एक स्नैपशॉट बचाया जा सके।

निकाल दिया स्क्रीनशॉट

वहाँ भी cssUpdater है , हालांकि मैंने इसका उपयोग नहीं किया है।

"चयनकर्ता स्थानीयकरण" के रूप में, मुझे पूरी तरह से यकीन नहीं है कि आपका क्या मतलब है लेकिन चयनबग है , जिसे आप यहां डाउनलोड कर सकते हैं


Firediff Natty और Fx 6.0.2 पर यहां काम नहीं करता है। मैंने यहां और वहां कुछ बदलाव किए हैं लेकिन "परिवर्तन" टैब में कोई बदलाव नहीं हुए हैं। मुझे लगभग यकीन है कि cssUpdater वह होगा जो मैं देख रहा हूं लेकिन यह लिनक्स के लिए उपलब्ध नहीं है। "चयनकर्ता स्थान" से मेरा मतलब सीएसएस चयनकर्ताओं से है। जब मैं वेबसाइट पर सही क्लिक करता हूं और "इंस्पेक्ट एलिमेंट", फायरबग या क्रोम (ई | ium) पर क्लिक करता हूं, तो इंस्पेक्टर मुझे संबंधित तत्व और उसका सीएसएस दिखाता है।
dAnjou

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

ठीक है, अब Firediff अचानक काम करता है लेकिन यह थोड़ा गड़बड़ है और इसके साथ वर्कफ़्लो वास्तव में अच्छा नहीं है।
dnnjou

0

Aptana Studio एक बेहतरीन IDE है, लेकिन अगर मैं गलत नहीं हूँ, तो इसमें रियल-टाइम पूर्वावलोकन नहीं है। वैसे भी, अगर उर दिलचस्पी है: http://www.aptana.com/products/studio3

पुनश्च: इसमें पूर्वावलोकन के लिए एक हॉट-की सेट है, इसलिए यह एक बड़ी डील नहीं है।


मैं यह नहीं देखता कि अप्टाना मेरी किसी भी स्थिति (?) से कैसे मिलती है।
dAnjou

0

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


मुझे समझ नहीं आ रहा है। क्या यह चयनकर्ताओं का पता लगा सकता है?
dnnjou

0

कुछ हफ़्ते पहले एक नया खिलाड़ी इस मैदान पर उठा। मैं Adobe के खुले स्रोत कोड संपादक ब्रैकेट के बारे में बात कर रहा हूं। आपके लिए आवश्यक सभी जानकारी, यहां: https://github.com/adobe/brackets/wiki/Linux-Version

संस्करण स्प्रिंग 30 को कुछ दिनों पहले ही जारी किया गया था :) शुभकामनाएँ!

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