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

Kayce Basques

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

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

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

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

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

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

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

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

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

1. Sources पैनल खोलें.

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

   

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

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

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

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

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

सीमाएं

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

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

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

बदलाव टैब

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

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

नए सुलभता टूल

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

सुलभता पैनल

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

चौथी इमेज. सुलभता पैनल में, एक ऐसा एलिमेंट जो फ़िलहाल एलिमेंट पैनल पर DOM ट्री में चुना गया है. साथ ही, सुलभता ट्री में पोज़िशन

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

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

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

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

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

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

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

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

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

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

Chrome DevTools में Run लाइटहाउस देखें या नीचे दिया गया A11ycast देखें सुलभता की जांच करने के लिए ऑडिट पैनल.

नए ऑडिट

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

नए एसईओ ऑडिट

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

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

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

Chrome 65 में कई नए परफ़ॉर्मेंस ऑडिट की सुविधा भी दी गई है:

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

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

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

दूसरे अपडेट

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

कर्मचारियों और एसिंक्रोनस कोड के साथ काम करने वाले भरोसेमंद कोड की जानकारी

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

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

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

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

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

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

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

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

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

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

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

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

आकृति 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 की सुविधाओं को बिना किसी साफ़ तौर पर ज़ाहिर करने के लिए, Puppeteer का इस्तेमाल भी किया जा सकता है DevTools खोला जा रहा है. उदाहरण के लिए, DevTools को खोले बिना DevTools की सुविधाओं का इस्तेमाल करना देखें.

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

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

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

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

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

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

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