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

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) के सुझाव के मुताबिक है. अगर उस पर सिर्फ़ एक सही का निशान है, तो इसका मतलब है कि यह सुझाए गए कम से कम कंट्रास्ट रेशियो (एए) के मुताबिक है.

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

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

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

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

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

नए ऑडिट

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

नए एसईओ ऑडिट

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

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

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

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

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

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

परफ़ेक्ट मायने रखता है! Mynet के ज़रिए पेज लोड होने की स्पीड में 4 गुना सुधार होने के बाद, उपयोगकर्ताओं ने साइट पर 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 अब यह मान लेता है कि आपको आखिर में चलने वाले एसिंक्रोनस कोड को रोकना है.

उदाहरण के लिए, इमेज 10 में 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 से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.

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

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

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