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

सावधानी, कट के तहत भारी गिफ्स!

इंस्पेक्टर

CSS चयनकर्ता खोज

इसके लिए उपयोग करना बहुत सुविधाजनक है:

• 'z-index' वाले तत्वों को क्लिक नहीं किया जा सकता है
• नेत्रहीन वही तत्व जिसके लिए आप चयनकर्ता को जानते हैं

स्टाइल फ़िल्टर

आप किसी भी चयनकर्ता या संपत्ति द्वारा सीएसएस नियमों को फ़िल्टर कर सकते हैं।

चयनकर्ताओं के लिए, फ़िल्टर नियम सूची में चयनकर्ताओं को हाइलाइट करता है। गुणों के लिए, उपकरण आपके फ़िल्टर वाले सभी गुणों का विस्तार करेगा, उन्हें रंग से उजागर करेगा, और उन नियमों को भी छिपाएगा जहां फ़िल्टर से कोई गुण नहीं हैं।

कलर पिकर और आईड्रॉपर

एक सुविधाजनक उपकरण खोलने के लिए निरीक्षक में रंग के साथ किसी भी बिंदु पर क्लिक करें।

रंग प्रतिनिधित्व बदलें

एक रंग डॉट पर Shift + क्लिक करने से आप रंग प्रतिनिधित्व (नाम / हेक्स / एचएसएल / आरजीबी) को बदल सकते हैं।

कोने के पास एक बिंदु पर Shift + क्लिक करने से आप कोण की इकाइयों को बदल सकते हैं।

टाइम फंक्शंस का एडिटिंग बेज़ियर कर्व्स

सुविधाजनक संपादक को खोलने के लिए समय फ़ंक्शन गुण के बगल में एक घुमावदार रेखा के साथ एक बिंदु पर क्लिक करें। दोनों पूर्वनिर्धारित कार्य होंगे और आपके संस्करण को मैन्युअल रूप से कॉन्फ़िगर करने की क्षमता होगी।

कंसोल

सीएसएस आवेदन

console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”) 

सभी संपत्तियों का समर्थन नहीं किया जाता है, लेकिन काफी कुछ ।

इतिहास खोज

Mac पर CTRL + R दबाएँ (और Windows और Linux पर F9 )। फिर आगे / पीछे स्क्रॉल करने के लिए CTRL + R / CTRL + S ( F9 / SHIFT + F9 ) का उपयोग करें। तीर के विपरीत, ऊपर कुंजीपटल शॉर्टकट सत्र के बीच काम करेंगे।

किसी पृष्ठ या उसके तत्व का स्क्रीनशॉट

 :screenshot — fullpage :screenshot — selector .css-selector 

यह केवल माउस के साथ वांछित क्षेत्र का चयन करने की कोशिश करने के बजाय चयनकर्ता को निर्दिष्ट करने के लिए बहुत अधिक सुविधाजनक है।

जावास्क्रिप्ट संदर्भ स्विचिंग

 cd(iframe) 

आप cd () का उपयोग करके चयनकर्ता द्वारा iframe संदर्भ पर स्विच कर सकते हैं।

टाइमर टैग

 console.time(“#devtricks”) console.timeEnd(“#devtricks”) 

टाइमर शुरू करें - कंसोल.टाइम ("लेबल") ,

इसे रोकें - कंसोल.टाइमईंड ("लेबल") ।

जावास्क्रिप्ट डिबगर

सशर्त विराम बिंदु

एक बिंदु बनाने के लिए, लाइन नंबर पर राइट-क्लिक करें। शर्त पूरी होने पर ही बिंदु सक्रिय होगा।

फ़ंक्शन नाम या लाइन नंबर द्वारा खोजें

फ़ाइल का नाम खोज मैक और (और विंडोज और लिनक्स पर CTRL + P) पर CMD + P है ।

फाइल में फंक्शन डिक्लेरेशन द्वारा सर्च करने के लिए उसी इनपुट में " @" टाइप करें।

एक ही इनपुट में टाइप करें ": " जल्दी से अपने नंबर से लाइन पर जाएं।

सुंदर छोटा कोड आउटपुट

एक छोटा एक के बजाय एक सुंदर कोड देखने के लिए {} आइकन पर क्लिक करें।

यूआरएल ब्रेकप्वाइंट

जब आप url तक पहुँचने की कोशिश करेंगे और इसे एक्सेस करने के लिए ज़िम्मेदार कोड दिखाएंगे तो यह बिंदु सक्रिय हो जाएगा।

ब्रेकप्वाइंट अक्षम करें

विकलांग अंक समावेश और भविष्य के उपयोग के लिए उपलब्ध रहेंगे।

नेटवर्क

HTTP अनुरोधों का संपादन और अग्रेषण

सबमिट किए गए अनुरोधों को संपादित करें और उन्हें फिर से सबमिट करें।

क्वेरी फ़िल्टर

डोमेन फ़िल्टर मैक (या विंडोज़ और लिनक्स पर CTRL + F) पर CMD + F है ।

यदि आपको डोमेन के बिना सभी प्रश्नों को खोजने की आवश्यकता है, तो फ़िल्टर के सामने डैश ( - ) जोड़ें।

गति सीमा

जांचें कि इंटरनेट धीमा होने पर साइट कैसे लोड होगी।

हॉट / कोल्ड प्रोफाइलिंग

साइट बनाने वाले क्वेरी प्रदर्शन को देखने के लिए टाइमर आइकन पर क्लिक करें। पृष्ठ को दो बार लोड किया जाएगा - कैश के बिना (पहले लोड का अनुकरण) और कैश के साथ (दोहराया कॉल का अनुकरण)।

बचत / लोड हो रहा है

हम आर्काइव प्रारूप में सही अनुरोधों को सहेजते हैं । साथी डेवलपर्स के साथ साझा करने के लिए सुविधाजनक है।

उत्तरदायी डिजाइन

कस्टम डिवाइस

देखें कि साइट कस्टम रिज़ॉल्यूशन वाले उपकरणों के लिए कैसे दिखाई देगी।

गति सीमा

हम मोबाइल इंटरनेट स्पीड पर मोबाइल संस्करण का डाउनलोड देख रहे हैं।

ताची का अनुकरण

एक "हाथ" के साथ एक छोटा आइकन इसके लिए जिम्मेदार है। लंबा तपस सहित अनुकरण किया।

उपयोगकर्ता एजेंट बदलें

सेटिंग्स में "यूए को बदलते समय पृष्ठ को फिर से लोड करें" विकल्प को सक्षम करने के लिए मत भूलना - समय बचाएं।

वाम व्यूपोर्ट संरेखण

सुविधाजनक यदि आप दाईं ओर पैनल रखना चाहते हैं (उदाहरण के लिए, डिबग के लिए)।

गोदाम निरीक्षक

कुकीज़ का संपादन

उस सेल पर डबल-क्लिक करें जिसका मूल्य आप बदलना चाहते हैं।

कुकीज़ निकालना

कुकीज़ को हटाने का सबसे आसान तरीका उन्हें चुनना और बैकस्पेस को क्लिक करना है।

संदर्भ मेनू विकल्पों पर ध्यान दें। "एक डोमेन के लिए सब कुछ हटाएं" विकल्प बहुत सुविधाजनक है, लेकिन ध्यान रखें कि डोमेन सही होना चाहिए (यानी formedium.com के लिए कुकीज़ को हटाना उन्हें मध्यम.कॉम के लिए हटा नहीं देगा)

वास्तविक समय परिवर्तन कुकीज़

कुकीज़ जो अभी-अभी बदली गई हैं, वे नारंगी रंग की हैं।

IndexedDB के लिए स्टेटिक स्नैपशॉट्स

आप वास्तविक समय में IndexedDB रिकॉर्ड्स में परिवर्तन नहीं देख पाएंगे, इसलिए सबसे ताज़ा डेटाबेस स्नैपशॉट प्राप्त करने के लिए ताज़ा करें बटन का उपयोग करें।

प्रदर्शित तालिका स्तंभों को बदलना

तालिका शीर्ष पर राइट-क्लिक करने से निर्बाध स्तंभों को छिपाने में मदद मिलेगी।

वह सब है। मुझे आशा है कि सुझाव उपयोगी थे!