हम Chrome DevTools का उपयोग करते हैं

  1. HTML तत्वों को जल्दी से संपादित करें
  2. सभी बाल तत्वों का विस्तार करें
  3. इंस्पेक्टर का स्थानांतरण
  4. DOM तत्व खोज
  5. पट्टियाँ
  6. एकाधिक अभिशाप
  7. बेस 64 इमेज को इनकोड करें
  8. छद्म श्रेणी स्विचिंग
  9. कॉलम चयन
  10. CURL के लिए अनुरोध कॉपी करें
  11. ऑनस्क्रीन कीबोर्ड
  12. पूरे पृष्ठ का स्क्रीनशॉट
  13. स्पर्श उपकरणों का अनुकरण
  14. उपयोगी विशेषताएं

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

  • प्रदर्शन की शुद्धता का निरीक्षण करें।
  • जावास्क्रिप्ट में स्क्रिप्ट के निष्पादन को ट्रैक करें।
  • नेटवर्क गतिविधियाँ देखें।

इस लेख को लिखते समय मैंने प्रयोग किया पीतचटकी - क्रोम का संस्करण, जहां नई सुविधाओं का परीक्षण किया जाता है, जो तब क्रोम के स्थिर संस्करण में आते हैं।

निरीक्षक शुरू करने के लिए, आप पृष्ठ पर कहीं भी राइट-क्लिक कर सकते हैं और "आइटम कोड देखें" का चयन कर सकते हैं, आप बस Ctrl + Shift + C दबा सकते हैं।

HTML तत्वों को जल्दी से संपादित करें

आइए सबसे सरल से शुरू करें: संपादन तत्व।

आइए सबसे सरल से शुरू करें: संपादन तत्व।

कैसे जांचें:

  • एलिमेंट्स टैब चुनें।
  • पैनल के अंदर किसी भी HTML तत्व का चयन करें।
  • टैग और परिवर्तन पर डबल क्लिक करें, उदाहरण के लिए, टैग नाम।

जब संपादन पूरा हो जाता है, तो समापन टैग स्वचालित रूप से अपडेट हो जाएगा।

सभी बाल तत्वों का विस्तार करें

कैसे जांचें:

  • एलिमेंट्स पैनल पर जाएं।
  • एक तत्व का चयन करें और, Alt को पकड़ते समय, तत्व के बाईं ओर तीर पर क्लिक करें।

इंस्पेक्टर का स्थानांतरण

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

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

कैसे जांचें:

  • Ctrl + Shift + D - स्थान टॉगल करें

DOM तत्व खोज

शायद बहुत से लोग जिनके लिए यह एक खोज होगी, लेकिन "एलिमेंट्स" टैब में आप DOM द्वारा खोज सकते हैं।

शायद बहुत से लोग जिनके लिए यह एक खोज होगी, लेकिन एलिमेंट्स टैब में आप DOM द्वारा खोज सकते हैं।

कैसे जांचें:

  • Ctrl + F दबाएं और प्रस्तावित खोज क्वेरी दर्ज करें।

पट्टियाँ

पैलेट से रंग का चयन करें

क्रोम के हाल के संस्करणों में रंग की पसंद में कुछ बदलाव हुए हैं: रंग की पसंद को सुविधाजनक बनाने के लिए दो पट्टियाँ जोड़ी गईं।

एकाधिक अभिशाप

कर्सर को ले जाएँ और Ctrl दबाए रखते हुए, कर्सर जोड़ने के लिए इच्छित क्षेत्र में क्लिक करें। आप Ctrl + U का उपयोग करके कार्रवाई को पूर्ववत कर सकते हैं। व्यक्तिगत रूप से, मैं कभी उपयोगी नहीं रहा।

बेस 64 इमेज को इनकोड करें

कैसे जांचें:

  • नेटवर्क पैनल पर स्विच करें।
  • छवि का चयन करें
  • छवि पर राइट-क्लिक करें और "" चुनें

छद्म श्रेणी स्विचिंग

छद्म कक्षाएं तत्वों की स्थिति और उनके सापेक्ष पदों को दर्शाती हैं।

छद्म कक्षाएं तत्वों की स्थिति और उनके सापेक्ष पदों को दर्शाती हैं।

कैसे जांचें:

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

कॉलम चयन

कैसे जांचें:

  • "स्रोत" पैनल पर जाएं।
  • किसी भी फ़ाइल का चयन करें।
  • Alt दबाकर टेक्स्ट का चयन करें।

जब HTML एलिमेंट पैनल में एड किया जाता है तो एक कॉलम चुनना भी काम करता है।

CURL के लिए अनुरोध कॉपी करें

नेटवर्क टैब में किसी भी अनुरोध को कॉपी किया जा सकता है और फिर कर्ल का उपयोग करके निष्पादन के लिए टर्मिनल में चिपकाया जा सकता है।

ऑनस्क्रीन कीबोर्ड

यदि नेक्सस 5 एक्स प्रोफाइल का चयन किया गया है, तो आप देख सकते हैं कि ऑन-स्क्रीन कीबोर्ड सक्रिय होने पर साइट कैसी दिखती है।

क्रोम देवटूल: ऑन-स्क्रीन कीबोर्ड क्रोम देवटूल: ऑन-स्क्रीन कीबोर्ड

पूरे पृष्ठ का स्क्रीनशॉट

पूरे पृष्ठ की तस्वीर ले लो बहुत सरल है। बस जरूरत है ...

  1. इंस्पेक्टर खोलें।
  2. कंसोल पर जाएं।
  3. Ctrl + Shift + P दबाएं
  4. "स्क्रीनशॉट" टाइप करें
  5. "पूर्ण आकार स्क्रीनशॉट कैप्चर करें" चुनें
पूरे पृष्ठ का स्क्रीनशॉट

स्पर्श उपकरणों का अनुकरण

आप कुछ सेंसर का अनुकरण भी कर सकते हैं:

  • टच स्क्रीन
  • जियोलोकेशन के लिए निर्देशांक
  • accelerometer

कैसे प्रयास करें:

  • एलिमेंट्स पैनल चुनें।
  • "Esc" दबाएं और "अनुकरण> सेंसर" चुनें।

उपयोगी विशेषताएं

कुंजी और मूल्य

कुंजियाँ और मान फ़ंक्शन आपको क्रमशः ऑब्जेक्ट की कुंजियों या मूल्यों को कंसोल पर आउटपुट करने की अनुमति देते हैं। कुंजियाँ और मान फ़ंक्शन आपको क्रमशः ऑब्जेक्ट की कुंजियों या मूल्यों को कंसोल पर आउटपुट करने की अनुमति देते हैं।   कुंजी और ऑब्जेक्ट वैल्यू को अलग-अलग प्रदर्शित करना कुंजी और ऑब्जेक्ट वैल्यू को अलग-अलग प्रदर्शित करना