Chrome (और न केवल) वेब इंस्पेक्टर के बारे में पूरी सच्चाई। भाग 1

मैं वेब इंस्पेक्टर की सुविधाओं का सबसे पूर्ण और विस्तृत वर्णन करने की कोशिश करूंगा, रूसी में।
पहली श्रृंखला में, हम सेटिंग्स में आते हैं, देखें कि कंसोल क्या कर सकता है और एलिमेंट्स पैनल के साथ खेल सकता है।

चूंकि वेब-इंस्पेक्टर का रूसी में अनुवाद नहीं किया गया है, इसलिए मैं मूल नाम रखूंगा।


एक बोनस के रूप में, मैं बहुत पहले संस्करणों में से एक के स्क्रीनशॉट को एक दूर के 2006 से संलग्न करूंगा।

किस संस्करण का उपयोग करें?

अब वेब इंस्पेक्टर के कई संस्करण हैं:

1. सभी नवीनतम सुविधाओं में Google Chrome कैनरी बिल्ड मिलता है।
   
2. जब सब कुछ स्थिर हो जाता है, तो वे WebKit नाइटली बिल्ड और फिर Google Chrome को स्थिर करने के लिए जोड़ दिए जाते हैं।
   
3. इस अर्थ में सफारी सबसे रूढ़िवादी ब्राउज़र है और लगभग एक साल तक Google क्रोम कैनरी बिल्ड से पीछे है।
   

मैं Google Chrome कैनरी बिल्ड का उपयोग करूंगा, और यदि वेब इंस्पेक्टर आपका मुख्य डीबगिंग टूल है, तो मैं इस संस्करण की सलाह देता हूं (यदि आपके पास विंडोज नहीं है, तो क्रोमियम डाउनलोड करें)

हालांकि, यहां वर्णित लगभग सब कुछ वेब इंस्पेक्टर के अन्य संस्करणों में काम करेगा।

वेब इंस्पेक्टर लॉन्च करें

वेब इंस्पेक्टर खोलने के कई तरीके हैं:

• नियंत्रण + SHIFT + I - टूलबॉक्स खोलता है।
• नियंत्रण + SHIFT + J या F12 - कंसोल को खोलता है
  
• नियंत्रण + SHIFT + C - आपको दस्तावेज़ में माउस के साथ एक तत्व का चयन करने की अनुमति देता है और इसे तत्व टैब में खोलें
  
• आप पृष्ठ के किसी भी तत्व पर राइट-क्लिक कर सकते हैं और "एलीमेंट इंस्पेक्ट" का चयन कर सकते हैं।
  
• आप मेनू से वेब इंस्पेक्टर खोल सकते हैं: कुंजी चिह्न -> उपकरण -> डेवलपर उपकरण (उपकरण -> डेवलपर उपकरण)
  

आप वेब इंस्पेक्टर के लिए वेब-इंस्पेक्टर खोल सकते हैं, इसके लिए आपको इसे एक अलग विंडो में खोलने की आवश्यकता है: , और फिर इसे उपरोक्त तरीकों में से एक में फिर से शुरू करें।

404tesla

वेब इंस्पेक्टर को अनुकूलित करें

प्रायोगिक कार्य

सभी नए उपकरण पहले "प्रयोगात्मक कार्यों" में आते हैं। उन्हें सक्षम करने के लिए, "बारे में: झंडे" पर जाएं, वहां डेवलपर टूल प्रयोग सक्षम करें विकल्प खोजें।

उसके बाद, ब्राउज़र को पुनरारंभ करें।

प्रयोगात्मक सुविधाओं के साथ सावधान रहें, वे उम्मीद के मुताबिक काम नहीं कर सकते हैं और त्रुटियों का कारण बन सकते हैं।

मैं निम्नलिखित लेखों में से एक में प्रयोगात्मक कार्यों पर विचार करूंगा।

सेटिंग्स

आइए इस बटन पर क्लिक करके सेटिंग डायलॉग खोलें। निचले दाएं कोने में और देखें कि वहां क्या दिलचस्प है।

दाईं ओर डॉक

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




डिफ़ॉल्ट रूप से, वेब इंस्पेक्टर सबसे नीचे है। आप इसे एक अलग विंडो में क्लिक करके खींच सकते हैं

कैश अक्षम करें

कैश बंद कर देता है। स्क्रिप्ट और शैलियों को डीबग करते समय एक बहुत ही उपयोगी विकल्प।
आप नेटवर्क पैनल से कैश को वहां राइट-क्लिक करके और क्लीयर ब्राउजर कैश चुनकर भी साफ कर सकते हैं

जावास्क्रिप्ट अक्षम करें

मैं इस सुविधा को यहां नोट करना चाहता हूं, क्योंकि यह हाल ही में दिखाई दी थी। वह ... जावास्क्रिप्ट बंद कर देती है ।

डिवाइस मेट्रिक्स को ओवरराइड करें

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

स्पर्श घटनाओं का अनुकरण करें

स्पर्श घटनाओं का अनुकरण करने की अनुमति देता है। मोबाइल एप्लिकेशन के परीक्षण के लिए उपयोगी।

स्रोत मानचित्र सक्षम करें

कल्पना कीजिए कि स्क्रिप्ट का एक छोटा / संकलित / संकलित संस्करण साइट पर अपलोड करना संभव होगा, और ब्राउज़र स्वयं डिबगिंग के लिए स्रोत ढूंढ सकता है।

स्रोत के नक्शे (अंग्रेजी) , ब्राउज़र को स्रोत फ़ाइल खोजने का तरीका बताने की अनुमति देते हैं।
विचार बहुत अच्छा है, अब तक यह आपको केवल जावास्क्रिप्ट के साथ काम करने की अनुमति देता है ।
भविष्य में, वे CoffeeScript , LESS , SASS और अन्य चमत्कार तकनीकों के लिए समर्थन का वादा करते हैं।

XMLHttpRequests लॉग इन करें

XHR कंसोल में अनुरोध दिखाता है । (इंग्लैंड)।

नेविगेशन पर लॉग को संरक्षित करें

यदि यह विकल्प चुना जाता है, तो पृष्ठ ताज़ा होने पर भी कंसोल की सामग्री संरक्षित रहेगी।

शॉर्टकट

गर्म कुंजियों की सूची देखने के लिए, कंसोल को छोड़कर किसी भी टैब को खोलें और क्लिक करें " ? " (अंग्रेजी लेआउट में)।

कृपया ध्यान दें कि यदि खिड़की पूरी तरह से फिट नहीं होती है, तो यह फसली है और कुछ जानकारी को छिपा सकती है।

यहां सब कुछ बहुत स्पष्ट है, यह जानना महत्वपूर्ण है कि ऑटो-समापन लगभग हर जगह काम करता है।

कंसोल

कंसोल आपको किसी भी जावास्क्रिप्ट कमांड को दर्ज करने और निष्पादित करने की अनुमति देता है। यदि आप कई लाइनों की अभिव्यक्ति लिखना चाहते हैं, तो SHIFT + Enter का उपयोग करें ।

कंसोल के लिए एक अलग टैब चुना जाता है, लेकिन यह सक्रिय रूप से दूसरों के साथ बातचीत करता है, इसलिए आप इसे किसी अन्य टैब से Esc कुंजी दबाकर कॉल कर सकते हैं। इस स्थिति में, आपने जो पाठ लिखना शुरू किया है, वह बच गया है।

कंसोल का उपयोग न केवल इसके इच्छित उद्देश्य के लिए किया जा सकता है।

• यह कैलकुलेटर के रूप में सरल गणना के साथ बहुत मदद करता है
• एक पासा के रूप में: Math.ceil (Math.random () * 6)
• एक त्वरित दर्ज की गई पुस्तक के रूप में: localStorage.setItem (0, "फ़ोन नंबर");

यदि आप कंसोल का उपयोग करने के किसी अन्य गैर-तुच्छ तरीके को जानते हैं, तो कृपया टिप्पणियों में ध्यान दें, मैं आपका बहुत आभारी रहूंगा।

अन्य जगहों पर, कंसोल में स्वतः-पूर्णता है। सबसे पहले, यह पूरी तरह से स्पष्ट नहीं हो सकता है कि यह कैसे काम करता है।

• टैब केवल तभी काम करता है जब केवल एक ऐड-ऑन विकल्प बचा हो
• यदि कई विकल्प हैं, तो आप कोई भी चयन कर सकते हैं और दाएं दबा सकते हैं (या बस माउस से क्लिक करें)
  

क्या दिखाना है

आप चुन सकते हैं कि हम इस पैनल का उपयोग करके कंसोल में क्या देखना चाहते हैं:



आप CTRL दबाकर दो आइटम का चयन कर सकते हैं। यहां आप उस फ़्रेम का चयन कर सकते हैं जिसके साथ हम काम करना चाहते हैं।

एक्सटेंशन में त्रुटि संदेशों से छुटकारा

यदि आपने त्रुटि वाले एक्सटेंशन इंस्टॉल किए हैं, तो ये त्रुटियां कंसोल में लगातार प्रदर्शित की जाएंगी।
दुर्भाग्य से, वर्तमान में उन्हें बंद करने का कोई आसान तरीका नहीं है। अस्थायी उपायों के रूप में, आप कर सकते हैं:

• गुप्त मोड में Chrome चलाएं ( CTRL + SHIFT + N )
• एक्सटेंशन के बिना डिबगिंग के लिए एक अलग प्रोफ़ाइल का उपयोग करें। ऐसा करने के लिए, आपको दूसरे Google खाते की आवश्यकता होगी। प्रोफ़ाइल जोड़ने के लिए, रिंच आइकन पर क्लिक करें -> सेटिंग्स -> उपयोगकर्ता जोड़ें (सेटिंग्स उपयोगकर्ता जोड़ें)।

फ़ॉन्ट आकार बदलें

किसी कारण से, कंसोल में CTRL + स्क्रॉल काम नहीं करता है।

लेकिन आप फ़ॉन्ट, CTRL - को कम करने और बढ़ाने के लिए CTRL + का उपयोग कर सकते हैं
मूल पैमाने के लिए CTRL + 0 ।

यह केवल मेरे लिए क्रोम कैनरी बिल्ड में काम करता है, स्थिर संस्करण में केवल दस्तावेज़ ही बढ़ा है।

कंसोल कमांड

कंसोल की अपनी कमांड्स होती हैं। जेएस में वेब इंस्पेक्टर लिखे जाने के बाद, कंसोल में सभी कमांड्स की एक सूची कंसोल में ही देखी जा सकती है। _commandLineAPI । आइए उनमें से सबसे दिलचस्प देखें।

हम कंसोल को साफ करते हैं

कंसोल को खाली करने के कई तरीके हैं:

• क्लियर () कमांड
• CTRL + L (Chrome में यह संयोजन एड्रेस बार पर ध्यान केंद्रित करता है। यदि यह कंसोल में काम नहीं करता है, तो दस्तावेज़ में कहीं भी क्लिक करें, और फिर कंसोल पर क्लिक करें)।
  
• राइट क्लिक करें और "क्लियर कंसोल" चुनें

एलिमेंट्स टैब के साथ सहभागिता

चर में $ 0 - $ 4 - पसंद के क्रम में अंतिम पांच चयनित आइटम।
कंसोल में प्रदर्शित कोई भी DOM तत्व राइट-क्लिक करके एलिमेंट्स टैब में खोला जा सकता है।

आइटम का चयन करें

कंसोल किसी भी अतिरिक्त पुस्तकालयों के बिना आइटम का चयन करने के कई अतिरिक्त तरीकों का समर्थन करता है।

• $ ("आईडी") - आईडी द्वारा एक आइटम का चयन करें।
• $ $ ("चयनकर्ता") - सीएसएस चयनकर्ता द्वारा एक तत्व का चयन करें।
• $ x ("चयनकर्ता") - XPath चयनकर्ता द्वारा एक तत्व का चयन करता है।

कृपया ध्यान दें कि यदि साइट पर एक जावास्क्रिप्ट लाइब्रेरी का उपयोग किया जाता है, तो ये फ़ंक्शन
ओवरराइट किया जा सकता है। Habré $ पर उदाहरण के लिए यह jQuery है ।

हम वस्तुओं का अध्ययन करते हैं

ऐसे कई कार्य हैं जो आपको एक तत्व के बारे में अधिक जानने की अनुमति देते हैं। मूल रूप से, वे तत्वों टैब से पैनलों की कार्यक्षमता की नकल करते हैं।

• निरीक्षण () - DOM ट्री खोलता है और वहां एक तत्व पाता है
• dirxml () - xml के रूप में एक तत्व आउटपुट
• dir () - आइटम गुणों की सूची प्रदर्शित करता है
• कुंजियाँ () - dir की सूची से सभी कुंजियों का चयन करता है ()
• मान () - dir () सूची से सभी मानों का चयन करता है

हम घटनाओं का अनुसरण करते हैं

आप मॉनिटरईवेंट्स (तत्व) फ़ंक्शन का उपयोग करके एक तत्व के साथ होने वाली हर चीज की निगरानी कर सकते हैं




दूसरे तर्क का उपयोग करके, आप उन घटनाओं के प्रकार का चयन कर सकते हैं जिनका आप अनुसरण कर रहे हैं:

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

यह पागलपन unmonitorEvents (तत्व) फ़ंक्शन का उपयोग करके रोका जा सकता है ।

क्लिपबोर्ड पर कॉपी जानकारी

किसी भी अभिव्यक्ति का परिणाम कॉपी () फ़ंक्शन का उपयोग करके तुरंत क्लिपबोर्ड पर कॉपी किया जा सकता है। अच्छा लगा और कुछ समय बचा सकता है।

तत्व टैब

इस पैनल में वास्तविक समय में अपडेट किए गए हमारे पृष्ठ के सभी DOM-Tree शामिल हैं।



हर बार जब तत्व पृष्ठ पर बदले जाते हैं, तो उन्हें पेड़ में अद्यतन किया जाता है और इसके विपरीत।

यदि आप दस्तावेज़ से किसी तत्व का चयन करना चाहते हैं, तो नीचे स्थित आवर्धक ग्लास वाले बटन पर क्लिक करें या CTRL + SHIFT + C और किसी भी तत्व का चयन करें।
माउस को मँडराते समय, सीएसएस को तत्व, उसके आकार और संकेत से पहले भी दिखाया जाएगा।

मद की राह

पैनल के बहुत नीचे, आप तत्व के लिए पथ देख सकते हैं। आप उस पर क्लिक करके किसी भी माता-पिता का चयन कर सकते हैं।

लकड़ी के साथ काम करें

आप तीर के साथ पेड़ के चारों ओर घूम सकते हैं (यदि आप किसी अन्य अनुभाग में हैं, तो आप CTRL + up / down का उपयोग करके फ़ोकस लौटा सकते हैं)।

संपादन

किसी भी विशेषता या मूल्य को बदलने के लिए, किसी आइटम पर डबल-क्लिक करें, या Enter दबाएं
और टैब बटन ( SHIFT + Tab ) का उपयोग करके इसे प्राप्त करें।
आप F2 दबाकर किसी तत्व का संपूर्ण HTML कोड भी बदल सकते हैं।

आप किसी भी आइटम का चयन कर सकते हैं और उसे हटाकर हटा सकते हैं , जो विज्ञापन ब्लॉक से गायब होने वाले विज्ञापनों को मारने के लिए बहुत उपयोगी है।

खींचें और छोड़ें

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

प्रसंग मेनू

सही माउस बटन के तत्व पर क्लिक करके, आप इसके HTML कोड, या XPath पथ को कॉपी कर सकते हैं और DOM ब्रेकप्वाइंट सेट कर सकते हैं।

विस्तृत जानकारी

एक तत्व का चयन करने के बाद, आप दाईं ओर पैनल में इसके बारे में जानकारी देख सकते हैं।

संगणक शैली

एक तत्व पर लागू सीएसएस शैलियों की सूची। यदि आप "शो विरासत में मिला" बॉक्स की जांच करते हैं, तो ब्राउज़र वाले सहित सभी शैलियों को प्रदर्शित किया जाएगा।

शैलियाँ

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

आप बाईं ओर के चेकबॉक्स से चेकबॉक्स को हटाकर किसी भी अभिव्यक्ति को बंद कर सकते हैं।

तत्व.स्टाइल अनुभाग दस्तावेज़ के HTML कोड में शैली विशेषता में निर्दिष्ट शैलियों को दर्शाता है,
और मिलान सीएसएस नियम अनुभाग चयनित आइटम से मेल खाने वाली सीएसएस फ़ाइलों से निर्धारित सभी चयनकर्ताओं को दिखाता है।

आप टैब पर वापस जाने के लिए टैब कुंजी ( SHIFT + Tab ) का उपयोग करके गुणों और मूल्यों के बीच स्थानांतरित कर सकते हैं)।

नियम और भाव जोड़ना

आप बटन पर क्लिक करके अपने चयनकर्ता को जोड़ सकते हैं। , और फिर आप इसे हटा नहीं सकते।

आप मौजूदा चयनकर्ता को नियम के समापन ब्रेस पर क्लिक करके (या अंतिम अभिव्यक्ति टैब को बदलना शुरू करके) एक नई अभिव्यक्ति जोड़ सकते हैं।

मिथ्या

इस बटन पर क्लिक करके , और एक पंजा लगाते हुए, आप तत्व छद्म वर्गों को सेट कर सकते हैं : सक्रिय ,: फोकस ,: होवर और : दौरा किया ।

रंग प्रदर्शन

गियर बटन पर क्लिक करके , जैसा कि लेखक - उस प्रारूप में रंग दिखाएगा जिसमें वे सेट किए गए थे।

संख्यात्मक मान बदलें

कीबोर्ड का उपयोग करके संख्यात्मक मानों को बदला जा सकता है।

• Alt + Up / Down मान को बदलकर 0.1 कर देता है
• ऊपर / नीचे मूल्य को 1 में बदलता है
• SHIFT + ऊपर / नीचे या पृष्ठ नीचे / पृष्ठ ऊपर 10 से मान बदलता है
  
• SHIFT + पृष्ठ डाउन / पृष्ठ अप मान को 100 में बदलता है।

यदि आप रंग के बगल में स्थित बॉक्स पर क्लिक करते हैं, तो आप सुविधाजनक संवाद से रंग का चयन कर सकते हैं। संख्यात्मक मान पर क्लिक करके, आप रंग को मैन्युअल रूप से दर्ज कर सकते हैं।

मेट्रिक्स

यहां आप तत्व के आयाम और पैडिंग देख सकते हैं (और यदि तत्व के लिए स्थिति निर्दिष्ट है, तो स्थिति)।

आप यहां पर डबल क्लिक करके कोई भी मूल्य बदल सकते हैं।

दिलचस्प है, सभी आकार पिक्सेल में दिखाए जाते हैं, भले ही आप ईएम में आकार निर्दिष्ट करें, वे स्वचालित रूप से पिक्सेल में परिवर्तित हो जाएंगे।

गुण

यह खंड ऑब्जेक्ट के सभी गुणों को दर्शाता है, जो संभवतः शैक्षिक उद्देश्यों के लिए उपयोगी है। उन्हें बदला भी जा सकता है, लेकिन अभी तक मैं कभी काम नहीं आया

डोम ब्रेकप्वाइंट

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

DOM ब्रेकप्वाइंट आपको DOM तत्व या उसके गुणों के साथ होने वाले परिवर्तनों को ट्रैक करने की अनुमति देता है। जब हम डीबगिंग स्क्रिप्ट प्राप्त करते हैं तो हम उनके साथ अधिक विस्तार से व्यवहार करेंगे।

परिवर्तन सहेज रहा है

वेब इंस्पेक्टर हमें आसानी से <font colorfffshch = "# 663344"> CSS कोड को संशोधित करने की अनुमति देता है। दुर्भाग्य से, परिवर्तनों को जल्दी से सहेजने का कोई सरल तरीका नहीं है। कई विकल्प हैं।

• बस अपने आईडीई में सभी परिवर्तनों को कॉपी करें।
• CSS में परिवर्तन (नए बनाए गए नियमों को छोड़कर) संबंधित फ़ाइलों में सहेजे गए हैं। चयनकर्ता के दाईं ओर "फ़ाइल का नाम: लाइन नंबर" पर क्लिक करके
• ELV1S से एक एक्सटेंशन है: ChromeDevtools Autosave (अंग्रेजी) , यह केवल स्थानीय रूप से काम करता है और नोड जेएस (अंग्रेजी) पर सर्वर इंस्टॉलेशन (अंग्रेजी) की आवश्यकता होती है , लेकिन यह आपको जेएस और सीएसएस में परिवर्तन स्वचालित रूप से सहेजने की अनुमति देता है।
  

आगे क्या है?

कुछ उपयोगी लिंक

यादृच्छिक लिंक, दुर्भाग्य से, सभी अंग्रेजी में हैं।

• पीटर बेवर्लो (Eng।) - विवरण और नियमित रूप से नई क्रोमियम सुविधाओं के बारे में
• क्रोम डेवलपर उपकरण
• सफारी डेवलपर टूल्स के बारे में
• - आधुनिक वेब विकास एक अच्छा, और वेब इंस्पेक्टर के बारे में विस्तृत लेख।
• मॉनिटरएवेंट्स - मॉनिटरएवेंट्स के बारे में थोड़ा सा
• क्रोम डेवलपर्स से यूट्यूब चैनल
• स्रोत कोड
• बग ट्रैकर
• पॉल आयरिश - पॉल आयरिश, क्रोम देव टूल्स, अच्छे लेखों को बढ़ावा देता है

अगली श्रृंखला

यह लेख का केवल पहला भाग है। हमारे साथ रहो और तुम पता लगाओगे

• शेष 5 पैनल क्या करते हैं।
• डिबगिंग जावास्क्रिप्ट , डिबगर; और कंसोल कमांड
• नियमित वेब इंस्पेक्टर टूल का उपयोग करके बेस 64 इमेज कोड कैसे प्राप्त करें।
• कौन हैं "शो शैडो डोम", "स्निपेट्स सपोर्ट" और "शो स्टाइल पैनल"
• कैसे एक सुंदर एक में स्क्रिप्ट का एक छोटा संस्करण बारी करने के लिए।
• JS, DOM, XHR और इवेंट श्रोता ब्रेकपॉइंट्स का उपयोग करके हमारे कोड को कैसे डीबग करें।
• हमारी लिपियों से कंसोल का सही और कुशलता से उपयोग कैसे करें?
• वेब इंस्पेक्टर का उपयोग करके Ipad / Iphone / Androind स्मार्टफोन के लिए ऐप्स डिबग कैसे करें?
• मेरे पसंदीदा कॉफी स्क्रिप्ट के लिए कंसोल कैसे कनेक्ट करें? और कंसोल में PHP त्रुटियों को दिखाएं?
• वेब इंस्पेक्टर के लिए नया प्लगइन-एपीआई क्या है, और इसके साथ क्या करना है।
• HTTP अनुरोधों को कैसे देखें।
• यह कैसे हुआ कि देव-उपकरणों का रूसी में अनुवाद नहीं किया गया।

मैं अक्सर अपने काम में वेब इंस्पेक्टर का उपयोग करता हूं, लेकिन ऐसी चीजें हो सकती हैं जिन्हें मैं नहीं जानता या जिनका उल्लेख करना भूल गया, इसलिए मैं किसी भी सुधार या परिवर्धन से खुश रहूंगा।


अगले एपिसोड तक!