DevTools (Chrome 65) में नया क्या है

Kayce Basques

Chrome 65 में DevTools में आने वाली नई सुविधाओं में ये शामिल हैं:

प्रॉडक्ट की जानकारी वाले इन नोट को पढ़ें या उनका वीडियो वर्शन नीचे देखें.

स्थानीय बदलाव

लोकल बदलाव की मदद से, DevTools में बदलाव किए जा सकते हैं. साथ ही, पेज लोड होने पर भी वे बदलाव लागू रहते हैं. पहले, पेज को फिर से लोड करने पर, DevTools में किए गए सभी बदलाव मिट जाते थे. लोकल Override, ज़्यादातर फ़ाइल टाइप के साथ काम करते हैं. हालांकि, कुछ अपवाद भी हैं. सीमाएं देखें.

स्थानीय बदलावों की मदद से, पेज लोड होने पर सीएसएस में किए गए बदलाव को बनाए रखना.

पहली इमेज. लोकल बदलाव की मदद से, पेज लोड होने पर सीएसएस में किए गए बदलाव को बनाए रखना

यह कैसे काम करता है:

  • आपको वह डायरेक्ट्री बतानी होगी जहां DevTools को बदलाव सेव करने हैं.
  • DevTools में बदलाव करने पर, वह बदली गई फ़ाइल की कॉपी आपकी डायरेक्ट्री में सेव करता है.
  • पेज को फिर से लोड करने पर, DevTools नेटवर्क संसाधन के बजाय, बदली गई स्थानीय फ़ाइल दिखाता है.

स्थानीय बदलाव सेट अप करने के लिए:

  1. सोर्स पैनल खोलें.

  2. ओवरराइड टैब खोलें.

    बदली गई कीमत वाला टैब

    दूसरी इमेज. बदली गई कीमत टैब

  3. सेटअप बदलाव पर क्लिक करें.

  4. वह डायरेक्ट्री चुनें जिसमें आपको बदलावों को सेव करना है.

  5. DevTools को डायरेक्ट्री को पढ़ने और उसमें बदलाव करने का ऐक्सेस देने के लिए, अपने व्यूपोर्ट में सबसे ऊपर, अनुमति दें पर क्लिक करें.

  6. अपनी पसंद के हिसाब से बदलाव करें।

सीमाएं

  • DevTools, एलिमेंट पैनल के DOM ट्री में किए गए बदलावों को सेव नहीं करता. इसके बजाय, सोर्स पैनल में एचटीएमएल में बदलाव करें.
  • अगर स्टाइल पैनल में सीएसएस में बदलाव किया जाता है और उस सीएसएस का सोर्स एचटीएमएल फ़ाइल है, तो DevTools उस बदलाव को सेव नहीं करेगा. इसके बजाय, सोर्स पैनल में जाकर, एचटीएमएल फ़ाइल में बदलाव करें.
  • फ़ाइल फ़ोल्डर. DevTools, नेटवर्क रिसॉर्स को अपने-आप किसी लोकल रिपॉज़िटरी में मैप करता है. जब भी DevTools में कोई बदलाव किया जाता है, तो वह बदलाव आपकी लोकल रिपॉज़िटरी में भी सेव हो जाता है.

बदलाव टैब

बदलाव टैब की मदद से, DevTools में स्थानीय तौर पर किए गए बदलावों को ट्रैक करें.

बदलाव टैब

तीसरी इमेज. बदलाव टैब

सुलभता से जुड़े नए टूल

किसी एलिमेंट की सुलभता प्रॉपर्टी की जांच करने के लिए, नए सुलभता पैनल का इस्तेमाल करें. साथ ही, कलर पिकर में टेक्स्ट एलिमेंट के कंट्रास्ट रेशियो की जांच करें. इससे यह पक्का किया जा सकता है कि वे एलिमेंट, कम दृष्टि या रंग पहचानने में समस्या वाले उपयोगकर्ताओं के लिए ऐक्सेस किए जा सकते हैं.

सुलभता पैनल

चुने गए मौजूदा एलिमेंट की सुलभता प्रॉपर्टी की जांच करने के लिए, एलिमेंट पैनल पर मौजूद सुलभता पैनल का इस्तेमाल करें.

सुलभता पैनल

चौथी इमेज. सुलभता पैनल में, एलिमेंट पैनल पर डीओएम ट्री में चुने गए एलिमेंट के लिए ARIA एट्रिब्यूट और कैलकुलेट की गई प्रॉपर्टी दिखती हैं. साथ ही, सुलभता ट्री में इसकी पोज़िशन भी दिखती है

सुलभता पैनल को इस्तेमाल करने का तरीका जानने के लिए, यहां दिए गए लेबल करने के बारे में रॉब डॉडसन का A11ycast देखें.

कलर पिकर में कंट्रास्ट का अनुपात

कलर पिकर अब आपको टेक्स्ट एलिमेंट का कंट्रास्ट रेशियो दिखाता है. टेक्स्ट एलिमेंट के कंट्रास्ट रेशियो को बढ़ाने से, आपकी साइट को कम दृष्टि या रंगों को ठीक से न पहचान पाने वाले लोगों के लिए ज़्यादा ऐक्सेस किया जा सकता है. कंट्रास्ट रेशियो के सुलभता पर पड़ने वाले असर के बारे में ज़्यादा जानने के लिए, रंग और कंट्रास्ट देखें.

अपने टेक्स्ट एलिमेंट के कलर कंट्रास्ट को बेहतर बनाने से, आपकी साइट सभी उपयोगकर्ताओं के लिए ज़्यादा इस्तेमाल करने लायक बन जाती है. दूसरे शब्दों में, अगर आपका टेक्स्ट सफ़ेद बैकग्राउंड पर स्लेटी रंग का है, तो उसे पढ़ना किसी के लिए भी मुश्किल होगा.

हाइलाइट किए गए H1 एलिमेंट के कंट्रास्ट रेशियो की जांच की जा रही है.

पांचवी इमेज. हाइलाइट किए गए h1 एलिमेंट के कंट्रास्ट रेशियो की जांच करना

चित्र 5 में, 4.61 के बगल में मौजूद दो सही के निशान का मतलब है कि यह एलिमेंट, बेहतर कंट्रास्ट अनुपात (AAA) के सुझाव के मुताबिक है. अगर इमेज में सिर्फ़ एक सही का निशान लगा है, तो इसका मतलब है कि वह सुझाए गए कम से कम कंट्रास्ट अनुपात (AA) के मुताबिक है.

कंट्रास्ट रेशियो सेक्शन को बड़ा करने के लिए, ज़्यादा दिखाएं ज़्यादा दिखाएं पर क्लिक करें. कलर स्पेक्ट्रम बॉक्स में मौजूद सफ़ेद लाइन, सुझाए गए कंट्रास्ट अनुपात को पूरा करने वाले रंगों और उन रंगों के बीच की सीमा दिखाती है जो ऐसा नहीं करते. उदाहरण के लिए, छठे चित्र में स्लेटी रंग, सुझावों के मुताबिक है. इसका मतलब है कि सफ़ेद लाइन के नीचे मौजूद सभी रंग भी सुझावों के मुताबिक हैं.

कंट्रास्ट रेशियो सेक्शन को बड़ा किया गया.

छठी इमेज. बड़ा किया गया कंट्रास्ट रेशियो सेक्शन

ऑडिट पैनल में, सुलभता की जांच अपने-आप होती है. इससे यह पक्का किया जाता है कि किसी पेज पर मौजूद हर टेक्स्ट एलिमेंट का कंट्रास्ट रेशियो सही हो.

सुलभता की जांच करने के लिए, ऑडिट पैनल का इस्तेमाल करने का तरीका जानने के लिए, Chrome DevTools में Lighthouse चलाना लेख पढ़ें या नीचे दिया गया A11ycast देखें.

नए ऑडिट

Chrome 65 में, एसईओ ऑडिट की एक नई कैटगरी और परफ़ॉर्मेंस के कई नए ऑडिट शामिल हैं.

नए एसईओ ऑडिट

यह पक्का करने पर कि आपके पेज, नई SEO कैटगरी के हर ऑडिट में पास होते हैं, इससे सर्च इंजन में आपकी रैंकिंग को बेहतर बनाने में मदद मिल सकती है.

ऑडिट की नई एसईओ कैटगरी.

सातवीं इमेज. ऑडिट की नई SEO कैटगरी

नए परफ़ॉर्मेंस ऑडिट

Chrome 65 में, परफ़ॉर्मेंस के कई नए ऑडिट भी शामिल हैं:

  • JavaScript को बूट-अप होने में ज़्यादा समय लगता है
  • स्टैटिक ऐसेट के लिए, कैश मेमोरी से जुड़ी ऐसी नीति का इस्तेमाल करना जो असरदार न हो
  • पेज रीडायरेक्ट से बचाता है
  • दस्तावेज़, प्लगिन का इस्तेमाल करता है
  • CSS कम करें
  • JavaScript कम करें

परफ़ॉर्मेंस मायने रखती है! Mynet ने अपने पेज लोड होने की स्पीड को चार गुना बेहतर बनाया. इसके बाद, उपयोगकर्ताओं ने साइट पर 43% ज़्यादा समय बिताया और 34% ज़्यादा पेज देखे. साथ ही, बाउंस रेट में 24% की गिरावट आई और हर लेख के पेज व्यू से होने वाली आय में 25% की बढ़ोतरी हुई. ज़्यादा जानें.

सलाह! अगर आपको पेजों के लोड होने की परफ़ॉर्मेंस को बेहतर बनाना है, लेकिन आपको नहीं पता कि शुरुआत कहां से करें, तो ऑडिट पैनल आज़माएं. उसे एक यूआरएल दें और उससे आपको उस पेज को बेहतर बनाने के कई अलग-अलग तरीकों के बारे में ज़्यादा जानकारी वाली रिपोर्ट मिल जाएगी. शुरू करें

दूसरे अपडेट

वर्कर्स और एसिंक्रोनस कोड के साथ भरोसेमंद कोड स्टेपिंग

Chrome 65 में, इसमें जाएं Step Into बटन को अपडेट किया गया है. इस बटन का इस्तेमाल करके, उन कोड में जाया जा सकता है जो थ्रेड के बीच मैसेज भेजते हैं और असाइनोक्रोनस कोड में जा सकते हैं. अगर आपको पहले जैसा व्यवहार चाहिए, तो इसके बजाय नए चरण चरण बटन का इस्तेमाल करें.

एक से दूसरे थ्रेड में मैसेज भेजने वाले कोड का इस्तेमाल करना

जब थ्रेड के बीच मैसेज भेजने वाले कोड में स्टेप इन किया जाता है, तो DevTools अब आपको हर थ्रेड में होने वाली प्रोसेस दिखाता है.

उदाहरण के लिए, आठवें चित्र में मौजूद ऐप्लिकेशन, मुख्य थ्रेड और वर्क थ्रेड के बीच एक मैसेज भेजता है. मुख्य थ्रेड पर postMessage() कॉल में जाने के बाद, DevTools, वर्क थ्रेड में onmessage हैंडलर में रुक जाता है. onmessage हैंडलर, मुख्य थ्रेड में मैसेज पोस्ट करता है. उस कॉल में जाने पर, DevTools मुख्य थ्रेड में वापस रुक जाता है.

Chrome 65 में मैसेज पास करने वाले कोड में बदलाव करना.

आठवीं इमेज. Chrome 65 में मैसेज पास करने वाले कोड का इस्तेमाल करना

Chrome के पुराने वर्शन में इस तरह के कोड में जाने पर, Chrome आपको सिर्फ़ कोड का मुख्य थ्रेड दिखाता था. इसकी जानकारी चित्र 9 में दी गई है.

Chrome 63 में, मैसेज पास करने वाले कोड में बदलाव करना.

नौवीं इमेज. Chrome 63 में मैसेज पास करने वाले कोड में बदलाव करना

एसिंक्रोनस कोड में जाना

एसिंक्रोनस कोड में जाकर, DevTools अब यह मान लेता है कि आपको आखिर में चलने वाले एसिंक्रोनस कोड को रोकना है.

उदाहरण के लिए, पहले चित्र में setTimeout() में जाने के बाद, DevTools उस बिंदु तक के सभी कोड को चुपचाप चलाता है. इसके बाद, वह setTimeout() में पास किए गए फ़ंक्शन में रुक जाता है.

Chrome 65 में एसिंक्रोनस कोड का इस्तेमाल करना.

10वीं इमेज. Chrome 65 में एसिंक्रोनस कोड का इस्तेमाल करना

Chrome 63 में इस तरह के कोड में जाने पर, DevTools कोड में रुक गया, क्योंकि यह कोड क्रम से चलता है. इस बारे में पहले इमेज में बताया गया है.

Chrome 63 में एसिंक्रोनस कोड का इस्तेमाल करना.

11वीं इमेज. Chrome 63 में एसिंक्रोनस कोड का इस्तेमाल करना

परफ़ॉर्मेंस पैनल में कई रिकॉर्डिंग

परफ़ॉर्मेंस पैनल में, अब कुछ समय के लिए ज़्यादा से ज़्यादा पांच रिकॉर्डिंग सेव की जा सकती हैं. DevTools विंडो बंद करने पर, रिकॉर्डिंग मिट जाती हैं. परफ़ॉर्मेंस पैनल को आसानी से इस्तेमाल करने के लिए, रनटाइम परफ़ॉर्मेंस का विश्लेषण करना शुरू करें लेख पढ़ें.

परफ़ॉर्मेंस पैनल में, कई रिकॉर्डिंग में से किसी एक को चुनना.

12वीं इमेज. परफ़ॉर्मेंस पैनल में, कई रिकॉर्डिंग में से किसी एक को चुनना

बोनस: Puppeteer 1.0 की मदद से DevTools कार्रवाइयों को ऑटोमेट करें

Puppeteer का वर्शन 1.0 अब उपलब्ध है. यह एक ब्राउज़र ऑटोमेशन टूल है, जिसे Chrome DevTools की टीम मैनेज करती है. Puppeteer का इस्तेमाल करके, कई टास्क को ऑटोमेट किया जा सकता है. ये ऐसे टास्क हैं जो पहले सिर्फ़ DevTools की मदद से किए जा सकते थे. जैसे, स्क्रीनशॉट कैप्चर करना:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

इसमें ऑटोमेशन से जुड़े कई कामों के लिए एपीआई भी मौजूद हैं. जैसे, PDF जनरेट करना:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

ज़्यादा जानने के लिए, तुरंत शुरू करना लेख पढ़ें.

DevTools को खोले बिना ही, ब्राउज़ करते समय DevTools की सुविधाओं को दिखाने के लिए भी Puppeteer का इस्तेमाल किया जा सकता है. उदाहरण के लिए, DevTools खोले बिना DevTools की सुविधाएं इस्तेमाल करना देखें.

झलक दिखाने वाले चैनलों को डाउनलोड करें

Chrome कैनरी, डेवलपर या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. इसके अलावा, इनकी मदद से उपयोगकर्ताओं से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!

Chrome DevTools की टीम से संपर्क करना

नई सुविधाओं, अपडेट या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, इन विकल्पों का इस्तेमाल करें.

DevTools में नया क्या है

DevTools में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.