10 उपयोगी फ़ायरफ़ॉक्स डेवलपर उपकरण आपको पता होना चाहिए
फ़ायरफ़ॉक्स "डेवलपर का ब्राउज़र" हमारे काम को आसान बनाने में मदद करने के लिए कई बेहतरीन उपकरण हैं। आप फ़ायरफ़ॉक्स डेवलपर टूल वेबपेज पर इसके टूल कलेक्शन के बारे में अधिक जानकारी प्राप्त कर सकते हैं और अपने डेवलपर संस्करण ब्राउज़र को भी आज़मा सकते हैं, जिसमें अधिक सुविधाएँ और उपकरण हैं जिन्हें परीक्षण किया गया.
इस पोस्ट के लिए, मैंने सूचीबद्ध किया है 10 आसान उपकरण आप इसके डेवलपर उपकरण संग्रह से पसंद कर सकते हैं। मैंने यह भी प्रदर्शित किया है कि ये उपकरण GIFs के साथ क्या कर सकते हैं और त्वरित संदर्भ के लिए उन्हें कैसे एक्सेस कर सकते हैं.
1. क्षैतिज और ऊर्ध्वाधर शासक देखें
फ़ायरफ़ॉक्स में एक शासक उपकरण है जो पिक्सेल इकाइयों के साथ दोनों क्षैतिज और ऊर्ध्वाधर शासकों को प्रदर्शित करता है पेज पर। उपकरण आपके तत्वों को पूरे पृष्ठ में व्यवस्थित करने के लिए उपयोगी है.
मेनू के माध्यम से शासकों तक पहुंचने के लिए: through> पर जाएं डेवलपर > डेवलपर टूलबार (शॉर्टकट: Shift + F2)। एक बार टूलबार पृष्ठ के निचले भाग में दिखाई देता है, टाइप करें शासकों और दबाएँ दर्ज.
डेवलपर टूल विंडो पर इसे प्रदर्शित करने के लिए, "टूलबॉक्स विकल्प" पर जाएं। "उपलब्ध टूलबॉक्स बटन" अनुभाग के तहत, "जाँचें"पृष्ठ के लिए शासकों को टॉगल करें“चेकबॉक्स.
2. सीएसएस चयनकर्ताओं का उपयोग करके स्क्रीनशॉट लें
यद्यपि फ़ायरफ़ॉक्स टूलबार आपको पूर्ण पृष्ठ या दृश्य भागों के स्क्रीनशॉट लेने देता है, मेरी राय में CSS चयनकर्ता विधि कैप्चरिंग के लिए अधिक उपयोगी है व्यक्तिगत तत्वों के स्क्रीनशॉट साथ ही साथ इसके लिए भी तत्व जो माउस-होवर पर दिखाई देते हैं केवल (मेनू की तरह).
मेनू के माध्यम से स्क्रीनशॉट लेने के लिए, screens> पर जाएं डेवलपर > डेवलपर टूलबार (शॉर्टकटशिफ्ट + एफ 2)। एक बार टूलबार पृष्ठ के निचले भाग में दिखाई देता है, टाइप करें स्क्रीनशॉट --selector any_unique_css_selector और दबाएँ दर्ज.
डेवलपर टूल विंडो पर इसे प्रदर्शित करने के लिए: "टूलबॉक्स विकल्प" पर क्लिक करें और "उपलब्ध टूलबॉक्स बटन" अनुभाग के तहत, चेक करें।एक फुलपेज स्क्रीनशॉट लें ” चेकबॉक्स.
3. वेब पेजों से रंग चुनें
फ़ायरफ़ॉक्स में "आईड्रॉपर" के नाम से एक अंतर्निहित रंग बीनने का उपकरण है। मेनू के माध्यम से "आईड्रॉपर" टूल तक पहुंचने के लिए ed> पर जाएं डेवलपर > आँख की ड्रॉपर.
डेवलपर टूल विंडो पर इसे प्रदर्शित करने के लिए: "टूलबॉक्स विकल्प" पर क्लिक करें और "उपलब्ध टूलबॉक्स बटन" अनुभाग की जांच के तहत।पृष्ठ से एक रंग पकड़ो“चेकबॉक्स.
4. 3D में पेज लेआउट देखें
3 डी में वेबपेजों को देखने से लेआउट की समस्याओं में मदद मिलती है। आप 3 डी दृश्य में विभिन्न स्तरित तत्वों को अधिक स्पष्ट रूप से देख पाएंगे। वेबपृष्ठ को 3D में देखने के लिए, "3D दृश्य" टूल बटन पर क्लिक करें.
डेवलपर टूल विंडो पर इसे प्रदर्शित करने के लिए, "टूलबॉक्स विकल्प" पर क्लिक करें और "उपलब्ध टूलबॉक्स बटन" अनुभाग की जांच करें।3 डी दृश्य“चेकबॉक्स.
5. ब्राउज़र शैली देखें
ब्राउज़र शैलियाँ दो प्रकार की होती हैं: डिफ़ॉल्ट शैली जो ब्राउज़र हर तत्व के लिए असाइन करता है, और ब्राउज़र-विशिष्ट शैलियाँ (ब्राउज़र उपसर्ग वाले)। ब्राउज़र शैलियों पर एक नज़र डालने से आप कर पाएंगे अपनी स्टाइलशीट में किसी भी ओवरराइड समस्याओं का निदान करें और किसी भी मौजूदा ब्राउज़र विशिष्ट शैलियों का भी पता चलता है .
मेनू के माध्यम से "ब्राउज़र शैलियों" तक पहुंचने के लिए,।> पर जाएं डेवलपर > इंस्पेक्टर. फिर दाएं अनुभाग में "कम्प्यूटेड" टैब पर क्लिक करें और "ब्राउज़र शैलियों" चेकबॉक्स की जांच करें.
आप "भी खोल सकते हैंइंस्पेक्टर"शॉर्टकट Ctrl + Shift + C के माध्यम से टैब और फिर" ब्राउज़र शैलियों तक पहुंच ".
6. वर्तमान सत्र के लिए जावास्क्रिप्ट अक्षम करें
सर्वोत्तम अभ्यास और स्क्रीन रीडर संगतता के लिए हमेशा किसी भी वेबसाइट को इस तरह से कोडित करने की सलाह दी जाती है, ताकि उसकी कार्यक्षमता जावास्क्रिप्ट-अक्षम वातावरण में बाधित न हो। ऐसे वातावरण के लिए परीक्षण करने के लिए, आप कर सकते हैं आप जिस सत्र में काम कर रहे हैं, उसके लिए जावास्क्रिप्ट अक्षम करें.
वर्तमान सत्र के लिए जावास्क्रिप्ट को निष्क्रिय करने के लिए "टूलबॉक्स विकल्प" पर क्लिक करें और "उन्नत सेटिंग्स" अनुभाग के तहत "जांच करें"जावास्क्रिप्ट निष्क्रिय करें* * चेकबॉक्स.
पृष्ठ से सीएसएस शैली छुपाएं
जावास्क्रिप्ट की तरह, एक्सेसिबिलिटी चिंताओं के कारण इस तरह से वेबसाइटों को डिजाइन करना सबसे अच्छा है पृष्ठ अभी भी किसी भी शैली के बिना पठनीय होना चाहिए. यह देखने के लिए कि पृष्ठ बिना किसी शैली के कैसा दिखता है, आप उन्हें डेवलपर टूल में अक्षम कर सकते हैं.
किसी वेब पेज पर लागू सीएसएस शैली (इनलाइन, आंतरिक या बाहरी) को हटाने के लिए सूचीबद्ध स्टाइलशीट के आंखों के प्रतीक पर क्लिक करें "स्टाइल एडिटर" टैब में। मूल दृश्य पर वापस लौटने के लिए इसे फिर से क्लिक करें.
मेनू के माध्यम से "स्टाइल एडिटर" तक पहुंचने के लिए "> पर जाएं डेवलपर > शैली संपादक (शॉर्टकट: Shift + F7.
8. अनुरोध के लिए HTML सामग्री प्रतिक्रिया का पूर्वावलोकन करें
फ़ायरफ़ॉक्स डेवलपर टूल के पास एक विकल्प है HTML सामग्री प्रकार प्रतिक्रियाओं का पूर्वावलोकन करें. यह डेवलपर को किसी भी 302 रीडायरेक्ट का पूर्वावलोकन करने में मदद करता है और जांचता है कि प्रतिक्रिया में कोई संवेदनशील जानकारी प्रदान की गई है या नहीं.
मेनू के माध्यम से "पूर्वावलोकन" तक पहुंचने के लिए "> पर जाएं डेवलपर > नेटवर्क (शॉर्टकट: Ctrl + Shift + Q. फिर अपनी पसंद का वेब पेज खोलें या वर्तमान पृष्ठ को फिर से लोड करें, पर क्लिक करें वांछित अनुरोध (HTML प्रतिक्रिया के साथ) अनुरोधों की सूची से और "पर क्लिक करेंपूर्वावलोकन"राइट सेक्शन में टैब.
9. विभिन्न स्क्रीन आकारों में वेबपृष्ठ का पूर्वावलोकन करें
अपनी जवाबदेही के लिए एक वेबपृष्ठ का परीक्षण करने के लिए "उत्तरदायी डिज़ाइन दृश्य" का उपयोग करें, जिसे।> द्वारा एक्सेस किया जा सकता है डेवलपर > उत्तरदायी डिजाइन देखें या शॉर्टकट के साथ: Ctrl + Shift + M.
"उत्तरदायी डिज़ाइन मोड" टूल बटन दिखाई देने के लिए, "टूलबॉक्स विकल्प" पर क्लिक करें और "उपलब्ध टूलबॉक्स बटन" अनुभाग के तहत, "उत्तरदायी डिज़ाइन मोड" चेकबॉक्स देखें।.
10. पृष्ठों पर जावास्क्रिप्ट चलाएँ
किसी भी वेबपेज पर त्वरित जावास्क्रिप्ट निष्पादन के लिए बस फ़ायरफ़ॉक्स के "स्क्रैचपैड" उपकरण का उपयोग करें। मेनू के माध्यम से "स्क्रैचपैड" तक पहुंचने के लिए; ☰> डेवलपर > स्क्रैचपैड या कीबोर्ड शॉर्टकट Shift + F4 का उपयोग करें.
त्वरित उपयोग के लिए डेवलपर टूल विंडो पर "स्क्रैचपैड" टूल बटन दिखाई दे: क्लिक करेंटूलबॉक्स विकल्प"और के तहत"उपलब्ध टूलबॉक्स बटन"अनुभाग" स्क्रैचपैड "जांचें चेकबॉक्स.
