कैसे हैक और अपने फ़ायरफ़ॉक्स डेवलपर उपकरण थीम निजीकृत

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

अब, फ़ायरफ़ॉक्स अपने UI के लिए XUL और CSS के संयोजन का उपयोग करता है, जिसका अर्थ है कि इसका अधिकांश स्वरूप सिर्फ CSS का उपयोग करके ट्विक किया जा सकता है। मोज़िला उपयोगकर्ताओं को "userChrome.css" नामक सीएसएस फ़ाइल के साथ अपने उत्पादों की उपस्थिति को कॉन्फ़िगर करने का एक तरीका प्रदान करता है। आप ऐसा कर सकते हैं उस CSS फ़ाइल में कस्टम स्टाइल नियम जोड़ें और यह मोज़िला उत्पादों पर प्रतिबिंबित होगा.

इस पोस्ट में हम फ़ायरफ़ॉक्स में डेवलपर टूल को निजीकृत करने के लिए उसी CSS फ़ाइल का उपयोग कर रहे हैं.

सबसे पहले, हमें उस सीएसएस फ़ाइल को ढूंढना होगा, या एक बनाना होगा और उसे सही जगह पर रखना होगा। "UserChrome.css" को घर पर रखने वाले फ़ोल्डर को खोजने का एक त्वरित तरीका है के बारे में: समर्थन ब्राउज़र में और "प्रोफ़ाइल फ़ोल्डर" लेबल के आगे "शो फोल्डर" बटन पर क्लिक करना. यह फ़ायरफ़ॉक्स के वर्तमान प्रोफ़ाइल फ़ोल्डर को खोल देगा.

प्रोफ़ाइल फ़ोल्डर में, आपको "क्रोम" नाम का एक फ़ोल्डर दिखाई देगा। यदि यह नहीं है, तो एक बनाएं और उसमें "userChrome.css" बनाएं। अब जब फ़ाइल की स्थापना हो चुकी है, तो कोड पर चलते हैं.

: root.theme-Dark --theme-body-background: # 050607! महत्वपूर्ण! -थीम-साइडबार-पृष्ठभूमि: # 101416; महत्वपूर्ण; --थीम-टैब-टूलबार-पृष्ठभूमि: # 161A1E! महत्वपूर्ण; --थीम-टूलबार-पृष्ठभूमि: # 282E35; महत्वपूर्ण; -थीम-चयन-पृष्ठभूमि: # 478DAD! महत्वपूर्ण; -थीम-बॉडी-कलर: # D6D6D6; महत्वपूर्ण; -थीम-बॉडी-कलर-ऑल्ट: # D6D6D6! महत्वपूर्ण; -थीम-सामग्री-रंग 1: # D6D6D6! महत्वपूर्ण; -थीम-कंटेंट-कलर २: # डी ६ डी ६ डी ६; महत्वपूर्ण; -थीम-कंटेंट-कलर ३: # डी ६ डी ६ डी ६! महत्वपूर्ण; -थीम-हाइलाइट-ग्रीन: # 8BF9A6; महत्वपूर्ण; -थीम-हाइलाइट-ब्लू: # 00F9FF- महत्वपूर्ण; -थीम-हाइलाइट-ब्लूग्रे: व्हाइट! महत्वपूर्ण! -थीम-हाइलाइट-लाइटोरेंज: # FF5A2C! महत्वपूर्ण; -थीम-हाइलाइट-नारंगी: पीला महत्वपूर्ण! -थीम-हाइलाइट-रेड: # FF1247; महत्वपूर्ण; -थीम-हाइलाइट-गुलाबी: # F02898; महत्वपूर्ण; 

जो आप ऊपर देख रहे हैं वह वह कोड है जो मैंने अपने "userChrome.css" फ़ाइल में जोड़ा है ताकि इस से डेवलपर्स टूल्स की उपस्थिति बदल सके

इसके लिए:

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

कोड देवस्टूल के विभिन्न UI भागों को रंगने के लिए इस्तेमाल किए जाने वाले CSS रंग चर की एक सूची है। हमें एक फाइल में कोड मिला जिसका नाम "variables.css" था जिसे एक संपीड़ित फ़ाइल में नामित किया गया था “omni.ja”:

Windows में, फ़ाइल यहां स्थित है:

एफ: /firefox/browser/omni.ja. बदलो एफ: उस ड्राइव के साथ जहां आपने अपना फ़ायरफ़ॉक्स इंस्टॉल किया है.

OSX में, फ़ाइल यहां स्थित है:

~ / अनुप्रयोग / Firefox.app / सामग्री / संसाधन / ब्राउज़र / omni.ja.

ये Java फाइल्स को कंप्रेस किया जाता है। विंडोज में, आप का नाम बदल सकते हैं .ja के लिए विस्तार .ज़िप और इसके भीतर फाइलों को उतारने के लिए देशी विंडोज एक्सप्लोरर एक्सट्रैक्ट यूटिलिटी का उपयोग करें। OSX में, टर्मिनल पर जाएं और चलाएं unzip omni.ja. ऐसा करने से पहले किसी अन्य निर्देशिका में फ़ाइल की एक प्रतिलिपि बनाने के लिए ध्यान में रखें.

एक बार omni.ja को निकालने के बाद, आप फ़ाइल को यहां पा सकते हैं /chrome/devtools/skin/variables.css; हाँ, फ़ायरफ़ॉक्स DevTools त्वचा एक फ़ोल्डर नाम के तहत है क्रोम. में variables.css, आप प्रकाश और अंधेरे दोनों विषयों के लिए उपयोग किए जाने वाले रंग चर का एक गुच्छा देखेंगे

 : root.theme- light --theme-body-background: #fcfcfc; --थीम-साइडबार-पृष्ठभूमि: # f7f7f7; -थीम-कंट्रास्ट-बैकग्राउंड: # e6b064; --थीम-टैब-टूलबार-पृष्ठभूमि: #ebeced; --थीम-टूलबार-पृष्ठभूमि: # f0f1f2; -थीम-चयन-पृष्ठभूमि: # 4c9ed9; --थीम-सेलेक्शन-बैकग्राउंड-सेमीट्रांसपेरेंट: आरजीबीए (76, 158, 217, .23); -थीम-चयन-रंग: # f5f7fa; -थीम-फाड़नेवाला-रंग: # आआआआआआ; --थीम-टिप्पणी: # 757873; --थीम-बॉडी-कलर: # 18191 ए; -थीम-बॉडी-कलर-ऑल्ट: # 585959; --थीम-सामग्री-रंग 1: # 292e33; --थीम-कंटेंट-कलर 2: # 8fa1b2; --थीम-कंटेंट-कलर 3: # 667380; --थीम-हाइलाइट-ग्रीन: # 2cbb0f; --थीम-हाइलाइट-ब्लू: # 0088cc; --थीम-हाइलाइट-ब्लूग्रे: # 0072ab; --थीम-हाइलाइट-बैंगनी: # 5b5fff; --थीम-हाइलाइट-लाइटोरेंज: # d97e00; --थीम-हाइलाइट-ऑरेंज: # f13c00; --थीम-हाइलाइट-रेड: # ed2655; --थीम-हाइलाइट-गुलाबी: # b82ee5; प्रदर्शन उपकरणों की तरह, ग्राफ़ में इस्तेमाल किए जाने वाले रंग। क्रोम के टाइमलाइन के समान रंग। * / --theme- रेखांकन-हरा: # 85d175; --थीम-ग्राफ-ब्लू: # 83b7f6; -थीम-ग्राफ-ब्लूग्रे: # 0072ab; -थीम-ग्राफ-बैंगनी: # b693eb; -थीम-ग्राफ-पीला: # efc052; --थीम-ग्राफ्स-ऑरेंज: # d97e00; --थीम-ग्राफ-रेड: # e57180; -थीम-ग्राफ-ग्रे: #cccccc; --थीम-ग्राफ्स-फुल-रेड: # f00; -थीम-ग्राफ-पूर्ण-नीला: # 00f; : root.theme-Dark --theme-body-background: # 14171a; --थीम-साइडबार-पृष्ठभूमि: # 181d20; -थीम-कंट्रास्ट-बैकग्राउंड: # b28025; --थीम-टैब-टूलबार-पृष्ठभूमि: # 252c33; --थीम-टूलबार-पृष्ठभूमि: # 343c45; -थीम-चयन-पृष्ठभूमि: # 1d4f73; --थीम-सेलेक्शन-बैकग्राउंड-सेमीट्रांसपेरेंट: आरजीबीए (29, 79, 115, .5); -थीम-चयन-रंग: # f5f7fa; --थीम-स्प्लिटर-रंग: काला; --थीम-टिप्पणी: # 757873; -थीम-बॉडी-कलर: # 8fa1b2; -थीम-बॉडी-कलर-ऑल्ट: # b6babf; -थीम-सामग्री-रंग 1: # a9bacb; --थीम-कंटेंट-कलर 2: # 8fa1b2; --थीम-कंटेंट-कलर ३: # ५ एफ ;३ content content; --थीम-हाइलाइट-ग्रीन: # 70bf53; --थीम-हाइलाइट-ब्लू: # 46 कैफे 3; --थीम-हाइलाइट-ब्लूग्रे: # 5e88b0; --थीम-हाइलाइट-बैंगनी: # 6b7abb; --थीम-हाइलाइट-लाइटोरेंज: # d99b28; --थीम-हाइलाइट-ऑरेंज: # d96629; --थीम-हाइलाइट-रेड: # eb5368; --थीम-हाइलाइट-गुलाबी: # df80ff; प्रदर्शन उपकरणों की तरह, ग्राफ़ में इस्तेमाल किए जाने वाले रंग। ज्यादातर कुछ "हाइलाइट- *" रंगों के समान। * / --theme- रेखांकन-हरा: # 70bf53; --थीम-ग्राफ-ब्लू: # 46 कैफे 3; -थीम-ग्राफ-ब्लूग्रे: # 5e88b0; -थीम-ग्राफ-बैंगनी: # df80ff; -थीम-ग्राफ-पीला: # d99b28; --थीम-ग्राफ्स-ऑरेंज: # d96629; --थीम-ग्राफ-लाल: # eb5368; --थीम-ग्राफ-ग्रे: # 757873; --थीम-ग्राफ्स-फुल-रेड: # f00; -थीम-ग्राफ-पूर्ण-नीला: # 00f;  

जिस थीम और चर को आप लक्षित करना चाहते हैं, उन्हें चुनें और उन्हें अपने "userChrome.css" में जोड़ें।.

यहां मेरे डेवलपर टूल की विंडो के कुछ और स्क्रीनशॉट हैं.