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

Kayce Basques

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

• स्थानीय बदलाव
• सुलभता से जुड़े नए टूल
• बदलाव टैब
• एसईओ और परफ़ॉर्मेंस की नई ऑडिट
• परफ़ॉर्मेंस पैनल में एक से ज़्यादा रिकॉर्डिंग
• वर्कर और एसिंक्रोनस कोड के साथ कोड को भरोसेमंद तरीके से स्टेप करना

नीचे दिए गए वीडियो में, रिलीज़ नोट का वीडियो वर्शन देखें या इसे पढ़ें.

लोकल ओवरराइड

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

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

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

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

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

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

2. बदलाव टैब खोलें.

   

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

3. Setup Overrides पर क्लिक करें.

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

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

6. अपने बदलाव करें.

सीमाएं

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

मिलती-जुलती सुविधाएं

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

बदलाव टैब

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

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

सुलभता के नए टूल

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

सुलभता पैनल

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

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

सुलभता पैनल को काम करते हुए देखने के लिए, लेबलिंग पर Rob Dodson का A11ycast देखें.

कलर पिकर में कंट्रास्ट रेशियो

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

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

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

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

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

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

मिलती-जुलती सुविधाएं

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

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

नए ऑडिट

Chrome 65 में एसईओ ऑडिट की एक नई कैटगरी और परफ़ॉर्मेंस ऑडिट की कई नई सुविधाएं जोड़ी गई हैं.

एसईओ से जुड़ी नई ऑडिट

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

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

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

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

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

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

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

अन्य अपडेट

• सुलभता की नई, मैन्युअल ऑडिट
• WebP ऑडिट में अपडेट, ताकि इसमें अगली जनरेशन के अन्य इमेज फ़ॉर्मैट को भी शामिल किया जा सके
• सुलभता स्कोर को बेहतर बनाया गया है
• अगर किसी पेज पर सुलभता ऑडिट लागू नहीं होती है, तो उस ऑडिट को सुलभता स्कोर में नहीं गिना जाता
• रिपोर्ट में अब परफ़ॉर्मेंस सेक्शन सबसे ऊपर दिखता है

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

Chrome 65 में, थ्रेड और एसिंक्रोनस कोड के बीच मैसेज पास करने वाले कोड में स्टेप इन बटन के लिए अपडेट किए गए हैं. अगर आपको पिछली बार की तरह ही एक-एक करके आगे बढ़ना है, तो इसके लिए स्टेप बटन का इस्तेमाल करें.

थ्रेड के बीच मैसेज पास करने वाले कोड में जाना

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

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

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

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

नौवीं इमेज. Chrome 63 में मैसेज-पासिंग कोड में जाना

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

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

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

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

Chrome 63 में, इस तरह के कोड में जाने पर DevTools, कोड को क्रम से चलाने के दौरान रोक देता था. इसे आंकड़ा 11 में देखा जा सकता है.

ग्यारहवीं इमेज. Chrome 63 में एसिंक्रोनस कोड में जाना

परफ़ॉर्मेंस पैनल में एक से ज़्यादा रिकॉर्डिंग

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

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

बोनस: Puppeteer 1.0 की मदद से, DevTools की कार्रवाइयों को अपने-आप होने दें

Chrome DevTools टीम की ओर से मैनेज किया जाने वाला ब्राउज़र ऑटोमेशन टूल, Puppeteer का वर्शन 1.0 अब उपलब्ध है. 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();
})();

ज़्यादा जानने के लिए, क्विक स्टार्ट देखें.

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

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

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

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

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

• हमें सुझाव/राय देने या शिकायत करने के लिए, crbug.com पर जाएं. साथ ही, किसी सुविधा का अनुरोध करने के लिए भी इसी लिंक पर जाएं.
• DevTools में, more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी किसी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणी करें.

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

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