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

Kayce Basques

ध्यान दें: क्या आपको DevTools को बेहतर बनाने में मदद चाहिए? Google के उपयोगकर्ताओं पर होने वाली रिसर्च में हिस्सा लेने के लिए, यहां साइन अप करें.

Chrome 73 में DevTools में नया क्या है.

इन रिलीज़ नोट का वीडियो वर्शन

लॉगपॉइंट

अपने कोड को console.log() कॉल की मदद से व्यवस्थित किए बिना, मैसेज को कंसोल में लॉग करने के लिए लॉगपॉइंट का इस्तेमाल करें.

लॉगपॉइंट जोड़ने के लिए:

1. उस लाइन नंबर पर राइट क्लिक करें जिसमें लॉगपॉइंट जोड़ना है.

   

   पहला डायग्राम. लॉगपॉइंट जोड़ना

2. लॉगपॉइंट जोड़ें चुनें. इसके बाद, ब्रेकपॉइंट एडिटर पॉप-अप होता है.

   

   दूसरा डायग्राम. ब्रेकपॉइंट एडिटर

3. ब्रेकपॉइंट एडिटर में, वह एक्सप्रेशन डालें जिसे आपको कंसोल में लॉग करना है.

   

   तीसरी इमेज. लॉगपॉइंट एक्सप्रेशन टाइप करना

   सलाह! किसी वैरिएबल (जैसे कि TodoApp) को लॉग आउट करते समय, वैरिएबल को किसी ऑब्जेक्ट (उदाहरण के लिए, {TodoApp}) में रैप करें, ताकि कंसोल में उसका नाम और वैल्यू लॉग आउट की जा सके. इस सिंटैक्स के बारे में ज़्यादा जानने के लिए, हमेशा लॉग ऑब्जेक्ट और ऑब्जेक्ट प्रॉपर्टी वैल्यू शॉर्टहैंड देखें.

4. सेव करने के लिए, Enter दबाएं या ब्रेकपॉइंट एडिटर के बाहर क्लिक करें. लाइन नंबर के ऊपर मौजूद नारंगी रंग का बैज, लॉगपॉइंट को दिखाता है.

   

   चौथी इमेज. लाइन 174 पर नारंगी रंग का लॉगपॉइंट बैज

अगली बार लाइन के एक्ज़ीक्यूट होने पर, DevTools लॉगपॉइंट एक्सप्रेशन के नतीजे को कंसोल में लॉग करता है.

पांचवी इमेज. कंसोल में लॉगपॉइंट एक्सप्रेशन का नतीजा

गड़बड़ियों की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #700519 देखें.

जांच मोड में, ज़्यादा जानकारी देने वाले टूलटिप

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

छठी इमेज. नोड की जांच करना

किसी नोड की जांच करने के लिए:

1. जांच करें पर क्लिक करें.

   सलाह! इसके कीबोर्ड शॉर्टकट को देखने के लिए, जांच करें पर कर्सर घुमाएं.

2. अपने व्यूपोर्ट में, नोड पर कर्सर घुमाएं.

कोड कवरेज का डेटा एक्सपोर्ट करें

कोड कवरेज का डेटा, अब JSON फ़ाइल के तौर पर एक्सपोर्ट किया जा सकता है. JSON फ़ॉर्मैट ऐसा दिखता है:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url, उस सीएसएस या JavaScript फ़ाइल का यूआरएल है जिसकी जांच DevTools ने की है. ranges, इस्तेमाल किए गए कोड के हिस्सों के बारे में बताता है. इस्तेमाल की गई रेंज के लिए, start शुरुआती ऑफ़सेट है. end आखिरी ऑफ़सेट है. text फ़ाइल का पूरा टेक्स्ट है.

ऊपर दिए गए उदाहरण में, 0 से 21 की रेंज body { margin: 1em; } से और 45 से 67 तक की सीमा h1 { color: #317EFB; } से है. दूसरे शब्दों में, पहले और आखिरी नियम का इस्तेमाल किया गया था और बीच वाला नहीं था.

यह विश्लेषण करने के लिए कि पेज लोड पर कितने कोड का इस्तेमाल किया गया है और डेटा एक्सपोर्ट करने के लिए:

1. निर्देश मेन्यू खोलने के लिए, Control+Shift+P या Command+Shift+P (Mac) दबाएं.

   

   सातवीं इमेज. निर्देश मेन्यू

2. coverage टाइप करना शुरू करें और कवरेज दिखाएं को चुनें. इसके बाद, Enter दबाएं.

   

   आठवीं इमेज. कवरेज दिखाएं

   ऐसा करने पर, कवरेज टैब खुलेगा.

   

   नौवीं इमेज. कवरेज टैब

3. फिर से लोड करें पर क्लिक करें. DevTools पेज को फिर से लोड करता है. साथ ही, यह रिकॉर्ड करता है कि कितने कोड को शिप किए जाने की तुलना में इस्तेमाल किया गया है.

4. डेटा को JSON फ़ाइल के तौर पर एक्सपोर्ट करने के लिए, एक्सपोर्ट करें पर क्लिक करें.

कोड कवरेज Puppeteer में भी उपलब्ध है. यह ब्राउज़र ऑटोमेशन टूल है, जिसे DevTools टीम मैनेज करती है. कवरेज देखें.

गड़बड़ियों की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #717195 देखें.

कीबोर्ड से कंसोल पर जाना

अब कीबोर्ड का इस्तेमाल करके, कंसोल पर जाया जा सकता है. यहां एक उदाहरण दिया गया है.

Shift+Tab को दबाने पर, आखिरी मैसेज (या जांच किए गए एक्सप्रेशन के नतीजे) पर फ़ोकस किया जाता है. अगर मैसेज में लिंक हैं, तो आखिरी लिंक को पहले हाइलाइट किया जाता है. Enter दबाने से लिंक नए टैब में खुलता है. बायां ऐरो बटन दबाने से पूरा मैसेज हाइलाइट होता है (इमेज 13 देखें).

11वीं इमेज. किसी लिंक पर फ़ोकस करना

अप ऐरो को दबाने से, अगले लिंक पर फ़ोकस हो जाता है.

12वीं इमेज. दूसरे लिंक पर फ़ोकस किया जा रहा है

अप ऐरो बटन को फिर से दबाने से, पूरे मैसेज पर फ़ोकस हो जाता है.

13वीं इमेज. पूरे मैसेज पर फ़ोकस किया गया हो

राइट ऐरो बटन को दबाने से, छोटा किया गया स्टैक ट्रेस या ऑब्जेक्ट, अरे वगैरह बड़ा हो जाता है.

इमेज 14. छोटे किए गए स्टैक ट्रेस को बड़ा करना

लेफ़्ट ऐरो बटन दबाने से, बड़ा किया गया मैसेज या नतीजा छोटा हो जाता है.

गड़बड़ियों की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #865674 देखें.

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

कलर पिकर, अब एक दूसरी लाइन दिखाता है. इससे यह पता चलता है कि कौनसे रंग, एएए के कंट्रास्ट अनुपात के सुझाव के मुताबिक हैं. Chrome 65 के बाद से ही AA लाइन का इस्तेमाल किया जा रहा है.

इमेज 15. AA लाइन (सबसे ऊपर) और AAA लाइन (सबसे नीचे)

दो लाइनों के बीच के रंग, उन रंगों को दिखाते हैं जो AA के सुझाव को पूरा करते हैं, लेकिन एएए के सुझाव का पालन नहीं करते. जब कोई रंग एएए के सुझाव को पूरा करता है, तो उस रंग के साथ मौजूद किसी भी रंग के लिए सुझाव दिया जाता है. उदाहरण के लिए, इमेज 15 में नीचे की लाइन के नीचे मौजूद कुछ भी AAA है. साथ ही, ऊपर वाली लाइन के ऊपर की कोई भी चीज़, AA के सुझाव को पूरा नहीं करती.

सलाह! आम तौर पर, एएए के सुझावों को पूरा करने वाले टेक्स्ट की मात्रा बढ़ाकर, अपने पेजों को बेहतर तरीके से पढ़ा जा सकता है. अगर किसी वजह से एएए का सुझाव पूरा नहीं किया जा सकता, तो कम से कम एए का सुझाव ज़रूर पूरा करें.

इस सुविधा को ऐक्सेस करने का तरीका जानने के लिए, कलर पिकर में कंट्रास्ट अनुपात देखें.

गड़बड़ियों की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #879856 देखें.

पसंद के मुताबिक भौगोलिक जगह के बदलावों को सेव करें

सेंसर टैब में, अब आपको पसंद के मुताबिक जियोलोकेशन के बदलावों को सेव करने की सुविधा मिलती है.

1. निर्देश मेन्यू खोलने के लिए, Control+Shift+P या Command+Shift+P (Mac) दबाएं.

   

   इमेज 16. निर्देश मेन्यू

2. sensors टाइप करें, सेंसर दिखाएं को चुनें और Enter दबाएं. ऐसा करने पर, सेंसर टैब खुलेगा.

   

   इमेज 17. सेंसर टैब

3. भौगोलिक स्थान सेक्शन में मैनेज करें पर क्लिक करें. सेटिंग > जियोलोकेशन खोलें.

   

   इमेज 18. सेटिंग में जियोलोकेशन टैब

4. जगह की जानकारी जोड़ें पर क्लिक करें.

5. जगह का नाम, अक्षांश, और देशांतर डालें. इसके बाद, जोड़ें पर क्लिक करें.

   

   इमेज 19. कोई कस्टम जियोलोकेशन जोड़ना

गड़बड़ियों की रिपोर्ट करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #649657 देखें.

कोड फ़ोल्डिंग

सोर्स और नेटवर्क पैनल में अब कोड फ़ोल्ड करने की सुविधा काम करती है.

इमेज 20. 54 से 65 की लाइनें फ़ोल्ड कर दी गई हैं

कोड फ़ोल्डिंग की सुविधा चालू करने के लिए:

1. सेटिंग खोलने के लिए, F1 दबाएं.
2. सेटिंग > प्राथमिकताएं > सोर्स में जाकर, कोड फ़ोल्डिंग की सुविधा चालू करें.

कोड के किसी ब्लॉक को फ़ोल्ड करने के लिए:

1. उस लाइन नंबर पर कर्सर घुमाएं जहां से ब्लॉक शुरू होता है.
2. फ़ोल्ड करें पर क्लिक करें.

गड़बड़ियों की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #328431 देखें.

मैसेज टैब

फ़्रेम टैब का नाम बदलकर, मैसेज टैब कर दिया गया है. यह टैब सिर्फ़ नेटवर्क पैनल में, वेब सॉकेट कनेक्शन की जांच करते समय उपलब्ध होता है.

इमेज 21. मैसेज टैब

गड़बड़ियों की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #802182 देखें.

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

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

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

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

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

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

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

Chrome 123

• एक छिपी हुई मज़ाक़िया चीज़ ढूंढें
• एलिमेंट पैनल से जुड़े अपडेट
• एलिमेंट > स्टाइल में फ़ोकस किए गए पेज को एम्युलेट करना
• var() फ़ॉलबैक में कलर पिकर, ऐंगल घड़ी, और ईज़िंग एडिटर की सुविधा
• सीएसएस की लंबाई वाला टूल अब काम नहीं करता
• परफ़ॉर्मेंस > मुख्य ट्रैक में, चुने गए खोज नतीजे के लिए पॉपओवर
• नेटवर्क पैनल से जुड़े अपडेट
• नेटवर्क > EventStream टैब में, 'मिटाएं' बटन और खोज फ़िल्टर
• नेटवर्क > कुकी में तीसरे पक्ष की कुकी को छूट देने की वजहों के साथ टूलटिप
• सोर्स में सभी ब्रेकपॉइंट चालू और बंद करना
• Node.js के लिए DevTools में लोड की गई स्क्रिप्ट देखें
• Lighthouse 11.5.0
• सुलभता सुविधाओं में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 122

• Recorder एक्सटेंशन का आधिकारिक कलेक्शन लाइव है
• नेटवर्क में सुधार
• स्टेटस कॉलम में, काम न करने की वजह
• 'कॉपी करने का बेहतर तरीका' सबमेन्यू
• परफ़ॉर्मेंस में सुधार
• टाइमलाइन में मौजूद ब्रेडक्रंब
• मुख्य ट्रैक में इवेंट शुरू करने वाले लोग
• Node.js DevTools के लिए JavaScript वीएम इंस्टेंस सिलेक्टर मेन्यू
• सोर्स में नया शॉर्टकट और कमांड
• एलिमेंट में सुधार
• अब स्टाइल में, ::view-transition pseudo-element में बदलाव किया जा सकता है
• ब्लॉक कंटेनर के लिए, अलाइन-कॉन्टेंट प्रॉपर्टी से जुड़ी सहायता
• फ़ोल्ड किए जा सकने वाले नकली डिवाइसों के लिए पॉस्चर की सुविधा
• डाइनैमिक थीमिंग
• नेटवर्क और ऐप्लिकेशन पैनल पर तीसरे पक्ष की कुकी के फ़ेज़आउट से जुड़ी चेतावनियां
• Lighthouse 11.4.0
• सुलभता सुविधाओं में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 121

• एलिमेंट में सुधार
• नेटवर्क पैनल में व्यवस्थित फ़िल्टर बार
• @font-palette-values सहायता
• इस्तेमाल किया जा सकने वाला केस: किसी दूसरी कस्टम प्रॉपर्टी के फ़ॉलबैक के तौर पर कस्टम प्रॉपर्टी
• सोर्स मैप की बेहतर सहायता
• परफ़ॉर्मेंस पैनल में सुधार
• बेहतर इंटरैक्शन ट्रैक
• बॉटम-अप, कॉल ट्री, और इवेंट लॉग टैब में बेहतर फ़िल्टर करना
• सोर्स पैनल में इंडेंट मार्कर
• नेटवर्क पैनल में, बदले गए हेडर और कॉन्टेंट के लिए उपयोगी टूलटिप
• अनुरोध को ब्लॉक करने वाले पैटर्न जोड़ने और हटाने के लिए, निर्देश मेन्यू के नए विकल्प
• सीएसपी के उल्लंघनों से जुड़ा एक्सपेरिमेंट हटा दिया गया है
• Lighthouse 11.3.0
• सुलभता सुविधाओं में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 120

• तीसरे पक्ष की कुकी के फ़ेज़आउट
• प्राइवसी सैंडबॉक्स विश्लेषण टूल की मदद से, अपनी वेबसाइट की कुकी का विश्लेषण करना
• अनदेखा करने की बेहतर सुविधा की लिस्टिंग
• node_modules के लिए डिफ़ॉल्ट एक्सक्लूज़न पैटर्न
• अगर कोई ऐसा कोड मिलता है जिसे अनदेखा नहीं किया गया है, तो पकड़ में आने वाले अपवाद के तौर पर, एक्ज़ीक्यूशन रोक दिया जाता है
• सोर्स मैप में x_google_ignoreList का नाम बदलकर ignoreList किया गया
• रिमोट डीबगिंग के दौरान नया इनपुट मोड टॉगल
• एलिमेंट पैनल अब #document नोड के लिए यूआरएल दिखाता है
• ऐप्लिकेशन पैनल में कॉन्टेंट की सुरक्षा से जुड़ी लागू नीति
• ऐनिमेशन को डीबग करने की बेहतर सुविधा
• 'क्या आपको इस कोड पर भरोसा है?' वाला डायलॉग बॉक्स और Console में खुद को XSS से जुड़ी चेतावनी का मैसेज दिखता है
• वेब वर्कर और वर्कलेट में इवेंट लिसनर ब्रेकपॉइंट
• <audio> और <video> के लिए नया मीडिया बैज
• पहले से लोड करने की प्रक्रिया का नाम बदलकर, अनुमान के हिसाब से यूआरएल लोड होने की सुविधा में बदल दिया गया है
• Lighthouse 11.2.0
• सुलभता सुविधाओं में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 119

• एलिमेंट > स्टाइल में बेहतर @property सेक्शन
• बदलाव किया जा सकने वाला @property नियम
• अमान्य @property नियमों से जुड़ी समस्याओं की शिकायत की जाती है
• सिम्युलेट किए जाने वाले डिवाइसों की अपडेट की गई सूची
• सोर्स में स्क्रिप्ट टैग में सुंदर इनलाइन JSON
• कंसोल में जाकर निजी फ़ील्ड के अपने-आप पूरा होने की सुविधा
• Lighthouse 11.1.0
• सुलभता सुविधाओं में सुधार
• वेब एसक्यूएल का इस्तेमाल बंद होना
• ऐप्लिकेशन > मेनिफ़ेस्ट में स्क्रीनशॉट के आसपेक्ट रेशियो की पुष्टि करना
• अलग-अलग तरह की हाइलाइट

Chrome 118

• एलिमेंट > स्टाइल में कस्टम प्रॉपर्टी के लिए नया सेक्शन
• स्थानीय बदलावों में और सुधार
• बेहतर खोज की सुविधा
• बेहतर सोर्स पैनल
• सोर्स पैनल में व्यवस्थित किया गया फ़ाइल फ़ोल्डर
• सोर्स में पैनल का क्रम बदलना
• कई तरह की स्क्रिप्ट के लिए, सिंटैक्स हाइलाइट करने और प्रिंट करने की सुविधा
• कम की गई पारदर्शिता मीडिया सुविधा को प्राथमिकता देना
• लाइटहाउस 11
• सुलभता सुविधाओं में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 117

• नेटवर्क पैनल में सुधार
• वेब कॉन्टेंट को अपने डिवाइस पर ज़्यादा तेज़ी से बदलना
• XHR का कॉन्टेंट बदलना और अनुरोधों को फ़ेच करना
• Chrome एक्सटेंशन के अनुरोध छिपाना
• ऐसे एचटीटीपी स्टेटस कोड जिन्हें कोई भी व्यक्ति आसानी से पढ़ सकता है

• JSON के सब-टाइप के लिए सुंदर जवाब

• परफ़ॉर्मेंस: नेटवर्क इवेंट के लिए, फ़ेच करने की प्राथमिकता में हुए बदलाव देखें

• सोर्स की सेटिंग डिफ़ॉल्ट रूप से चालू होती हैं: कोड फ़ोल्ड करने और अपने-आप फ़ाइल ज़ाहिर करने की सुविधा

• तीसरे पक्ष की कुकी से जुड़ी समस्याओं को डीबग करने की बेहतर सुविधा

• नए रंग

• Lighthouse 10.4.0

• ऐप्लिकेशन पैनल में, पेजों को पहले से लोड करने से जुड़ी सेटिंग को डीबग करना

• DevTools के लिए C/C++ WebAssembly डीबग करने वाला एक्सटेंशन अब ओपन सोर्स है

• अलग-अलग तरह की हाइलाइट

• (प्रयोग के तौर पर) रेंडर करने के लिए नया एम्युलेटर: प्राथमिकता-reduced-transparency

• (प्रयोग के तौर पर) बेहतर प्रोटोकॉल मॉनिटर

Chrome 116

• जो स्टाइलशीट नहीं हैं उन्हें डीबग करने की बेहतर सुविधा
• एलिमेंट > स्टाइल > ईज़िंग एडिटर में लीनियर टाइमिंग सहायता
• स्टोरेज बकेट सपोर्ट और मेटाडेटा व्यू
• Lighthouse 10.3.0
• सुलभता: कीबोर्ड के निर्देश और स्क्रीन पर मौजूद कॉन्टेंट को बेहतर तरीके से पढ़ने की सुविधा
• अलग-अलग तरह की हाइलाइट

Chrome 115

• एलिमेंट में सुधार
• नया सीएसएस सबग्रिड बैज
• टूलसलाह में सिलेक्टर की खास जानकारी
• टूलटिप में कस्टम सीएसएस प्रॉपर्टी की वैल्यू
• सोर्स में सुधार
• सीएसएस सिंटैक्स को हाइलाइट करना
• शर्त के साथ ब्रेकपॉइंट सेट करने के लिए शॉर्टकट
• ऐप्लिकेशन > बाउंस ट्रैकिंग पर लागू होने वाली पाबंदियां
• Lighthouse 10.2.0
• कॉन्टेंट स्क्रिप्ट को डिफ़ॉल्ट रूप से अनदेखा करना
• नेटवर्क > रिस्पॉन्स में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 114

• WebAssembly डीबग करने की सहायता
• Wsm ऐप्लिकेशन में स्टेपिंग के बेहतर तरीके
• एलिमेंट पैनल और समस्याएं टैब का इस्तेमाल करके, अपने-आप जानकारी भरने की सुविधा को डीबग करना
• Recorder में किए गए दावे
• Lighthouse 10.1.1
• परफ़ॉर्मेंस बेहतर बनाना
• performance.mark(), परफ़ॉर्मेंस > टाइमिंग में कर्सर घुमाने पर दिखने वाला समय दिखाता है
• profile() कमांड, परफ़ॉर्मेंस > मुख्य की जानकारी अपने-आप भर देता है
• उपयोगकर्ता के धीमे इंटरैक्शन के लिए चेतावनी
• वेबसाइट की परफ़ॉर्मेंस की जानकारी से जुड़े अपडेट
• JavaScript प्रोफ़ाइलर को बंद करना: तीसरा चरण
• अलग-अलग तरह की हाइलाइट

Chrome 113

• नेटवर्क रिस्पॉन्स हेडर बदलना
• Nuxt, Vite, और रोलअप डीबग करने की प्रोसेस में सुधार
• एलिमेंट > स्टाइल में सीएसएस में सुधार
• अमान्य सीएसएस प्रॉपर्टी और वैल्यू
• ऐनिमेशन की शॉर्टहैंड प्रॉपर्टी में मुख्य फ़्रेम के लिंक
• कंसोल की नई सेटिंग: Enter पर अपने-आप पूरा होना
• कमांड मेन्यू में, लिखी गई फ़ाइलों पर ज़ोर दिया जाता है
• JavaScript प्रोफ़ाइलर को बंद करना: दूसरा चरण
• अलग-अलग तरह की हाइलाइट

Chrome 112

• Recorder से जुड़े अपडेट
• Recorder के रीप्ले एक्सटेंशन
• पियर्स सिलेक्टर की मदद से रिकॉर्ड करें
• लाइटहाउस विश्लेषण की मदद से रिकॉर्डिंग को Puppeteer स्क्रिप्ट के तौर पर एक्सपोर्ट करना
• Recorder के लिए एक्सटेंशन पाना
• एलिमेंट > स्टाइल से जुड़े अपडेट
• स्टाइल पैनल में सीएसएस दस्तावेज़
• सीएसएस नेस्टिंग सहायता
• कंसोल में लॉगपॉइंट और शर्त के साथ ब्रेकपॉइंट मार्क करना
• डीबग करते समय, उन स्क्रिप्ट को अनदेखा करना जो काम की नहीं हैं
• JavaScript प्रोफ़ाइलर का इस्तेमाल बंद होने की प्रोसेस शुरू हो गई है
• कम कंट्रास्ट को एम्युलेट करें
• लाइटहाउस 10
• अलग-अलग तरह की हाइलाइट

Chrome 111

• स्टाइल पैनल की मदद से, एचडी के रंग को डीबग करना
• बेहतर ब्रेकपॉइंट UX
• Recorder के पसंद के मुताबिक बनाए जा सकने वाले शॉर्टकट
• Angular के लिए बेहतर सिंटैक्स हाइलाइट
• ऐप्लिकेशन पैनल में कैश मेमोरी को फिर से व्यवस्थित करना
• अलग-अलग तरह की हाइलाइट

Chrome 110

• फिर से लोड करने पर, परफ़ॉर्मेंस पैनल को हटाना
• Recorder से जुड़े अपडेट
• Recorder में अपने यूज़र फ़्लो के कोड को देखना और उसे हाइलाइट करना
• रिकॉर्डिंग के टाइप को पसंद के मुताबिक बनाना
• रिकॉर्डिंग के दौरान यूज़र फ़्लो में बदलाव करना
• अपने-आप होने वाली फ़ोटो के प्रिंट की सुविधा
• Vue, SCSS वगैरह के लिए, सिंटैक्स को बेहतर तरीके से हाइलाइट करने और इनलाइन झलक देखने की सुविधा
• कंसोल में आसान और एक ही तरह के ऑटोकंप्लीट की सुविधा
• अलग-अलग तरह की हाइलाइट

Chrome 109

• Recorder: चरणों, इन-पेज फिर से चलाने, और चरण के संदर्भ मेन्यू के विकल्पों के तौर पर कॉपी करें
• परफ़ॉर्मेंस की रिकॉर्डिंग में फ़ंक्शन के असल नाम दिखाना
• कंसोल और सोर्स पैनल में नए कीबोर्ड शॉर्टकट
• JavaScript को डीबग करने की बेहतर सुविधा
• अलग-अलग तरह की हाइलाइट
• [प्रयोग के तौर पर] ब्रेकपॉइंट मैनेज करने के लिए, बेहतर उपयोगकर्ता अनुभव
• [प्रयोग के तौर पर] फ़ोटो की क्वालिटी अपने-आप सेव होने की सुविधा के बारे में जानकारी

Chrome 108

• ऐसी सीएसएस प्रॉपर्टी के लिए संकेत जो चालू नहीं हैं
• रिकॉर्डर पैनल में, XPath और टेक्स्ट सिलेक्टर का अपने-आप पता लगाना
• कॉमा लगाकर अलग किए गए एक्सप्रेशन का इस्तेमाल करना
• 'सूची को अनदेखा करने' की बेहतर सेटिंग
• अलग-अलग तरह की हाइलाइट

Chrome 107

• DevTools में कीबोर्ड शॉर्टकट को पसंद के मुताबिक बनाना
• कीबोर्ड शॉर्टकट की मदद से, हल्के और गहरे रंग वाली थीम टॉगल करें
• मेमोरी इंस्पेक्टर में C/C++ ऑब्जेक्ट हाइलाइट करें
• HAR इंपोर्ट के लिए, शुरू करने वाले की पूरी जानकारी दें
• Enter दबाने के बाद DOM खोज शुरू करें
• align-content सीएसएस फ़्लेक्सबॉक्स प्रॉपर्टी के लिए, start और end आइकॉन दिखाएं
• अलग-अलग तरह की हाइलाइट

Chrome 106

• लिखे गए / सोर्स पैनल में डिप्लॉय किए गए के हिसाब से फ़ाइलों को ग्रुप में रखें
• एसिंक्रोनस ऑपरेशन के लिए लिंक किए गए स्टैक ट्रेस
• तीसरे पक्ष की उन स्क्रिप्ट को अपने-आप अनदेखा करना जिनकी पहचान की जा चुकी है
• डीबग करने के दौरान बेहतर कॉल स्टैक
• सोर्स पैनल में, नज़रअंदाज़ किए जाने वाले सोर्स छिपाना
• कमांड मेन्यू में, नज़रअंदाज़ किए जाने वाले फ़ाइलों को छिपाना
• परफ़ॉर्मेंस पैनल में नए इंटरैक्शन ट्रैक
• परफ़ॉर्मेंस की अहम जानकारी वाले पैनल में एलसीपी टाइमिंग का ब्रेकडाउन
• Recorder पैनल में रिकॉर्डिंग के लिए, डिफ़ॉल्ट नाम अपने-आप जनरेट होना
• अलग-अलग तरह की हाइलाइट

Chrome 105

• Recorder में सिलसिलेवार तरीके से फिर से चलाने की सुविधा
• Recorder पैनल में, इवेंट के ऊपर माउस ले जाने की सुविधा उपलब्ध है
• परफ़ॉर्मेंस की अहम जानकारी वाले पैनल में, सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)
• लेआउट में बदलाव होने की मुख्य वजहों के तौर पर, टेक्स्ट के फ़्लैश (FOIT, FOUT) का पता लगाना
• मेनिफ़ेस्ट पैनल में प्रोटोकॉल हैंडलर
• एलिमेंट पैनल में सबसे ऊपर वाली लेयर का बैज
• रनटाइम के दौरान Wasm को डीबग करने की जानकारी अटैच करना
• डीबग के दौरान लाइव बदलाव करना
• स्टाइल पैनल में नियमों पर @scope को देखना और उसमें बदलाव करना
• सोर्स मैप में किए गए सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 104

• डीबग करने के दौरान फ़्रेम को रीस्टार्ट करना
• रिकॉर्डर पैनल में, वीडियो को फिर से चलाने की धीमी सुविधा के विकल्प
• Recorder पैनल के लिए एक्सटेंशन बनाना
• लिखे गए / सोर्स पैनल में डिप्लॉय किए गए के हिसाब से फ़ाइलों को ग्रुप में रखें
• परफ़ॉर्मेंस की अहम जानकारी वाले पैनल में नए उपयोगकर्ता समय ट्रैक
• एलिमेंट के असाइन किए गए स्लॉट को दिखाना
• परफ़ॉर्मेंस रिकॉर्डिंग के लिए, हार्डवेयर एक साथ चलने की सुविधा को सिम्युलेट करना
• सीएसएस वैरिएबल के अपने-आप पूरा होने की सुविधा के दौरान, बिना रंग वाली वैल्यू की झलक देखना
• बैक/फ़ॉरवर्ड कैश मेमोरी पैनल में, ब्लॉक करने वाले फ़्रेम की पहचान करना
• JavaScript ऑब्जेक्ट के लिए, अपने-आप पूरा होने वाले बेहतर सुझाव
• सोर्स मैप में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 103

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

Chrome 102

• झलक दिखाने की सुविधा: परफ़ॉर्मेंस से जुड़ी अहम जानकारी वाला नया पैनल
• हल्के और गहरे रंग वाली थीम को एम्युलेट करने के लिए नए शॉर्टकट
• Network Preview टैब पर बेहतर सुरक्षा
• ब्रेकपॉइंट पर फिर से लोड करने की बेहतर सुविधा
• कंसोल से जुड़े अपडेट
• शुरुआत में यूज़र फ़्लो की रिकॉर्डिंग को रद्द करना
• स्टाइल पैनल में, इनहेरिट किए गए हाइलाइट छो़ड़ एलिमेंट को दिखाना
• अलग-अलग तरह की हाइलाइट
• [प्रयोग के तौर पर] सीएसएस में किए गए बदलावों को कॉपी करें
• [प्रयोग के तौर पर] ब्राउज़र के बाहर रंग चुनना

Chrome 101

• रिकॉर्ड किए गए यूज़र फ़्लो को JSON फ़ाइल के तौर पर इंपोर्ट और एक्सपोर्ट करना
• स्टाइल पैनल में कैस्केड लेयर देखना
• hwb() कलर फ़ंक्शन के लिए सहायता
• निजी प्रॉपर्टी को दिखाने की बेहतर सुविधा
• अलग-अलग तरह की हाइलाइट
• [प्रयोग के तौर पर] लाइटहाउस पैनल में नया टाइमस्पैन और स्नैपशॉट मोड

Chrome 100

• स्टाइल पैनल में नियमों पर @supports की जानकारी देखना और उसमें बदलाव करना
• सामान्य सिलेक्टर की सुविधा डिफ़ॉल्ट रूप से काम करें
• रिकॉर्डिंग के सिलेक्टर को पसंद के मुताबिक बनाना
• किसी रिकॉर्डिंग का नाम बदलना
• होवर करने पर क्लास/फ़ंक्शन प्रॉपर्टी की झलक देखना
• परफ़ॉर्मेंस पैनल में दिखाए गए कुछ फ़्रेम
• अलग-अलग तरह की हाइलाइट

Chrome 99

• WebSocket के अनुरोधों को कम करना
• ऐप्लिकेशन पैनल में नया Reporting API पैनल
• रिकॉर्डर पैनल में एलिमेंट के दिखने या क्लिक किए जाने तक इंतज़ार करने की सुविधा का इस्तेमाल करना
• कंसोल की बेहतर स्टाइलिंग, फ़ॉर्मैटिंग, और फ़िल्टर करने की सुविधा
• सोर्स मैप फ़ाइलों की मदद से, Chrome एक्सटेंशन को डीबग करना
• सोर्स पैनल में बेहतर सोर्स फ़ोल्डर ट्री
• सोर्स पैनल में, वर्कर की सोर्स फ़ाइलें दिखाना
• Chrome में गहरे रंग वाली थीम के बारे में Chrome में अपडेट
• टच में इस्तेमाल होने वाला कलर पिकर और स्प्लिट पैनल
• अलग-अलग तरह की हाइलाइट

Chrome 98

• झलक दिखाने वाली सुविधा: पूरे पेज पर दिखने वाला सुलभता ट्री
• 'बदलाव' टैब में ज़्यादा सटीक बदलाव
• यूज़र फ़्लो रिकॉर्डिंग के लिए, ज़्यादा समय तक टाइम आउट सेट करना
• बैक-फ़ॉरवर्ड कैश मेमोरी टैब की मदद से, पक्का करें कि आपके पेजों को कैश मेमोरी में सेव किया जा सकता हो
• नया प्रॉपर्टी पैनल फ़िल्टर
• सीएसएस फ़ोर्स-कलर मीडिया फ़ीचर को एम्युलेट करना
• होवर करने वाले निर्देश पर रूलर दिखाना
• Flexbox एडिटर में, row-reverse और column-reverse के साथ काम करें
• XHR को फिर से चलाने और खोज के सभी नतीजों को बड़ा करने के लिए, नए कीबोर्ड शॉर्टकट
• Lighthouse पैनल में Lighthouse 9
• बेहतर सोर्स पैनल
• अलग-अलग तरह की हाइलाइट
• [प्रयोग के तौर पर] Reporting API पैनल में एंडपॉइंट

Chrome 97

• झलक दिखाने की सुविधा: नया रिकॉर्डर पैनल
• डिवाइस मोड में डिवाइस की सूची रीफ़्रेश करना
• 'एचटीएमएल के रूप में बदलाव करें' की मदद से ऑटोकंप्लीट करना
• कोड डीबग करने का बेहतर अनुभव
• सभी डिवाइसों पर DevTools सेटिंग सिंक करना

Chrome 96

• झलक दिखाने की सुविधा: सीएसएस की खास जानकारी देने वाला नया पैनल
• सीएसएस की लंबाई में बदलाव करने और उसे कॉपी करने का अनुभव पहले जैसा किया गया और बेहतर किया गया
• सीएसएस befores-Conrast मीडिया की सुविधा को एम्युलेट करना
• Chrome में, ऑटो डार्क थीम की सुविधा को बेहतर बनाना
• स्टाइल पैनल में, एलानों को JavaScript के तौर पर कॉपी करना
• नेटवर्क पैनल में नया पेलोड टैब
• प्रॉपर्टी पैनल में प्रॉपर्टी दिखाने की सुविधा को बेहतर बनाया गया
• कंसोल में सीओआरएस से जुड़ी गड़बड़ियों को छिपाने का विकल्प
• कंसोल में, Intl ऑब्जेक्ट की सही झलक और जांच करना
• एक साथ काम नहीं करने वाले स्टैक ट्रेस
• कंसोल के साइडबार को बनाए रखना
• ऐप्लिकेशन पैनल में ऐप्लिकेशन कैश मेमोरी पैनल अब काम नहीं करता
• [प्रयोग के तौर पर] ऐप्लिकेशन पैनल में नया Reporting API पैनल

Chrome 95

• सीएसएस की लंबाई वाले नए टूल
• 'समस्याएं' टैब में समस्याएं छिपाना
• प्रॉपर्टी दिखाने की सुविधा को बेहतर बनाया गया
• Lighthouse पैनल में Lighthouse 8.4
• सोर्स पैनल में स्निपेट को क्रम से लगाना
• प्रॉडक्ट की जानकारी का अनुवाद करने के नए लिंक और अनुवाद से जुड़ी गड़बड़ी की शिकायत करना
• DevTools कमांड मेन्यू के लिए बेहतर यूज़र इंटरफ़ेस (यूआई)

Chrome 94

• अपनी पसंदीदा भाषा में DevTools का इस्तेमाल करना
• डिवाइसों की सूची में शामिल नए Nest Hub डिवाइस
• फ़्रेम की जानकारी वाले व्यू में, ऑरिजिन ट्रायल
• सीएसएस कंटेनर क्वेरी का नया बैज
• नेटवर्क फ़िल्टर को बदलने के लिए नया चेकबॉक्स
• Console के साइडबार को रोकने की सुविधा
• समस्याएं टैब और नेटवर्क पैनल में रॉ Set-Cookies हेडर दिखाएं
• कंसोल में, नेटिव ऐक्सेसर को अपनी प्रॉपर्टी के तौर पर लगातार दिखाना
• #sourceURL वाली इनलाइन स्क्रिप्ट के लिए, सही गड़बड़ी वाले स्टैक ट्रेस
• कंप्यूटेड पैनल में कलर फ़ॉर्मैट बदलना
• कस्टम टूलटिप को नेटिव एचटीएमएल टूलटिप से बदलें
• [प्रयोग के तौर पर] समस्याएं टैब में समस्याओं को छिपाना

Chrome 93

• स्टाइल पैनल में मौजूद सीएसएस कंटेनर क्वेरी में बदलाव किया जा सकता है
• नेटवर्क पैनल में वेब बंडल की झलक
• Attribution Reporting API को डीबग करना
• कंसोल में स्ट्रिंग को बेहतर तरीके से हैंडल करने के बारे में जानकारी
• सीओआरएस को बेहतर तरीके से डीबग करना
• लाइटहाउस 8.1
• मेनिफ़ेस्ट पैनल में नए नोट का यूआरएल
• सीएसएस मैच करने वाले सिलेक्टर को ठीक किया गया
• नेटवर्क पैनल में JSON के शानदार जवाब

Chrome 92

• सीएसएस ग्रिड एडिटर
• कंसोल में, const के लिए फिर से एलान करने से जुड़ी सहायता
• सोर्स ऑर्डर व्यूअर
• फ़्रेम की जानकारी देखने के लिए नया शॉर्टकट
• सीओआरएस को डीबग करने की बेहतर सहायता
• XHR लेबल का नाम बदलकर 'फ़ेच/XHR' करें
• नेटवर्क पैनल में Wasm के रिसॉर्स टाइप को फ़िल्टर करना
• नेटवर्क की शर्तें टैब में मौजूद डिवाइसों के लिए उपयोगकर्ता-एजेंट क्लाइंट हिंट
• समस्याएं टैब में जाकर, क्वर्क मोड (पुराने वर्शन पर काम करने की सुविधा) से जुड़ी समस्याओं की शिकायत करना
• परफ़ॉर्मेंस पैनल में कंप्यूट इंटरसेक्शन शामिल करना
• लाइटहाउस पैनल में Lighthouse 7.5
• कॉल स्टैक में मौजूद "फ़्रेम रीस्टार्ट करें" संदर्भ मेन्यू पर काम न करना
• [प्रयोग के तौर पर] प्रोटोकॉल मॉनिटर
• [प्रयोग के तौर पर] Puppeteer Recorder

Chrome 91

• वेबसाइट की परफ़ॉर्मेंस की जानकारी का पॉप-अप
• नया मेमोरी इंस्पेक्टर
• सीएसएस स्क्रोल-स्नैप को विज़ुअलाइज़ करना
• बैज की सेटिंग का नया पैनल
• आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) की जानकारी के साथ इमेज की बेहतर झलक
• Content-Encoding को कॉन्फ़िगर करने के विकल्पों के साथ नई नेटवर्क शर्तों का बटन
• कैलकुलेट की गई वैल्यू देखने का शॉर्टकट
• accent-color कीवर्ड
• रंग और आइकॉन के हिसाब से, समस्याओं को अलग-अलग कैटगरी में बांटना
• Trust टोकन मिटाना
• फ़्रेम की जानकारी वाले व्यू में, ब्लॉक की गई सुविधाएं
• एक्सपेरिमेंट की सेटिंग में एक्सपेरिमेंट फ़िल्टर करना
• कैश मेमोरी पैनल में नया Vary Header कॉलम
• JavaScript की निजी ब्रैंड की जांच में मदद करना
• ब्रेकपॉइंट डीबग करने के लिए बेहतर सहायता
• [] नोटेशन के साथ, कर्सर घुमाने पर दिखने वाली झलक का इस्तेमाल करें
• एचटीएमएल फ़ाइलों की बेहतर आउटलाइन
• Wsm डीबग करने के लिए, गड़बड़ी वाले स्टैक ट्रेस की सही जानकारी

Chrome 90

• सीएसएस फ़्लेक्सबॉक्स को डीबग करने वाले नए टूल
• वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाला नया ओवरले
• समस्या की गिनती को कंसोल के स्टेटस बार में ले जाया गया
• भरोसेमंद वेब गतिविधि से जुड़ी समस्याओं की शिकायत करना
• कंसोल में स्ट्रिंग को (मान्य) JavaScript स्ट्रिंग लिटरल के तौर पर फ़ॉर्मैट करना
• ऐप्लिकेशन पैनल में नया ट्रस्ट टोकन पैनल
• सीएसएस कलर-गामट मीडिया सुविधा का इस्तेमाल करना
• प्रोग्रेसिव वेब ऐप्लिकेशन के लिए पहले से बेहतर टूलिंग
• नेटवर्क पैनल में नया Remote Address Space कॉलम
• परफ़ॉर्मेंस में सुधार
• फ़्रेम की जानकारी वाले व्यू में, अनुमति वाली/अस्वीकार की गई सुविधाएं दिखाना
• कुकी पैनल में नया SameParty कॉलम
• बिना स्टैंडर्ड वाली fn.displayName सहायता
• सेटिंग मेन्यू में Don't show Chrome Data Saver warning का इस्तेमाल बंद होना
• [प्रयोग के तौर पर] समस्याएं टैब में, कम कंट्रास्ट वाली समस्या की अपने-आप रिपोर्ट होने की सुविधा
• [प्रयोग के तौर पर] एलिमेंट पैनल में सुलभता के पूरे ट्री व्यू

Chrome 89

• भरोसेमंद तरह के उल्लंघनों के लिए सहायता को डीबग करना
• व्यूपोर्ट के अलावा, नोड का स्क्रीनशॉट लेना
• नेटवर्क अनुरोधों के लिए नया ट्रस्ट टोकन टैब
• Lighthouse पैनल में Lighthouse 7
• सीएसएस :target की स्थिति को ज़बरदस्ती लागू करने की सुविधा
• डुप्लीकेट एलिमेंट का नया शॉर्टकट
• कस्टम सीएसएस प्रॉपर्टी के लिए कलर पिकर
• सीएसएस प्रॉपर्टी कॉपी करने के लिए नए शॉर्टकट
• डिकोड की गई यूआरएल कुकी दिखाने का नया विकल्प
• सिर्फ़ दिखने वाली कुकी मिटाना
• स्टोरेज पैनल में तीसरे पक्ष की कुकी मिटाने का नया विकल्प
• पसंद के मुताबिक बनाए गए डिवाइसों के लिए, उपयोगकर्ता एजेंट क्लाइंट हिंट में बदलाव करना
• "नेटवर्क लॉग रिकॉर्ड करें" सेटिंग को बनाए रखें
• नेटवर्क पैनल में WebTransport कनेक्शन देखें
• "ऑनलाइन" का नाम बदलकर "कोई थ्रॉटलिंग नहीं" किया गया
• कंसोल, सोर्स पैनल, और स्टाइल पैनल में कॉपी करने के नए विकल्प
• फ़्रेम की जानकारी वाले व्यू में, नए सर्विस वर्कर की जानकारी
• फ़्रेम की जानकारी वाले व्यू में, मेमोरी की जानकारी मापना
• 'समस्याएं' टैब में जाकर सुझाव/राय देना या शिकायत करना
• परफ़ॉर्मेंस पैनल में छोड़े गए फ़्रेम
• डिवाइस मोड में फ़ोल्ड किए जा सकने वाले डिवाइस और ड्यूअल-स्क्रीन पर सबको बेहतर अनुभव देना
• [प्रयोग के तौर पर] Puppeteer Recorder से ब्राउज़र टेस्टिंग को ऑटोमेट करना
• [प्रयोग के तौर पर] स्टाइल पैनल में फ़ॉन्ट एडिटर
• [प्रयोग के तौर पर] सीएसएस फ़्लेक्सबॉक्स डीबग करने वाले टूल
• [प्रयोग के तौर पर] सीएसपी के उल्लंघन से जुड़ा नया टैब
• [प्रयोग के तौर पर] कलर कंट्रास्ट की नई कैलकुलेशन - ऐडवांस पर्सेप्चुअल कंट्रास्ट एल्गोरिदम (एपीसीए)

Chrome 88

• DevTools चालू करना
• सीएसएस के ऐंगल विज़ुअलाइज़ेशन के नए टूल
• काम न करने वाली इमेज टाइप को एम्युलेट करें
• स्टोरेज पैनल में स्टोरेज कोटा के साइज़ को सिम्युलेट करना
• परफ़ॉर्मेंस पैनल में, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली नई लेन
• नेटवर्क पैनल में सीओआरएस से जुड़ी गड़बड़ियों की शिकायत करना
• फ़्रेम के ब्यौरे वाले व्यू में क्रॉस-ऑरिजिन आइसोलेशन की जानकारी
• फ़्रेम की जानकारी वाले व्यू में, नए वेब वर्कर की जानकारी
• खुली विंडो के लिए, ओपनर फ़्रेम की जानकारी दिखाना
• सर्विस वर्कर पैनल से नेटवर्क पैनल खोलना
• प्रॉपर्टी की वैल्यू कॉपी करें
• नेटवर्क शुरू करने वाले के लिए स्टैकट्रेस को कॉपी करें
• माउसओवर पर Wasm वैरिएबल की वैल्यू की झलक देखना
• कंसोल में Wasm वैरिएबल का आकलन करना
• फ़ाइल/मेमोरी के साइज़ के लिए मेज़रमेंट की एक जैसी इकाइयां
• एलिमेंट पैनल में झूठे एलिमेंट हाइलाइट करना
• [प्रयोग के तौर पर] सीएसएस Flexbox को डीबग करने वाले टूल
• [प्रयोग के तौर पर] कॉर्ड कीबोर्ड शॉर्टकट को पसंद के मुताबिक बनाएं

Chrome 87

• सीएसएस ग्रिड को डीबग करने वाले नए टूल
• नया WebAuthn टैब
• टूल को सबसे ऊपर और सबसे नीचे मौजूद पैनल के बीच एक जगह से दूसरी जगह ले जाना
• स्टाइल पैनल में, कंप्यूटेड साइडबार वाला नया पैनल
• कंप्यूटेड पैनल में सीएसएस प्रॉपर्टी को ग्रुप में बांटना
• Lighthouse पैनल में Lighthouse 6.3
• समय सेक्शन में performance.mark() इवेंट
• नेटवर्क पैनल में नए resource-type और url फ़िल्टर
• फ़्रेम की जानकारी वाले व्यू से जुड़े अपडेट
• ज़्यादा टूल मेन्यू में Settings को बंद किया गया
• [प्रयोग के तौर पर] सीएसएस की खास जानकारी वाले पैनल में, कलर कंट्रास्ट से जुड़ी समस्याएं देखना और उन्हें ठीक करना
• [प्रयोग के तौर पर] DevTools में कीबोर्ड शॉर्टकट को पसंद के मुताबिक बनाना

Chrome 86

• नया मीडिया पैनल
• एलिमेंट पैनल के संदर्भ मेन्यू का इस्तेमाल करके नोड के स्क्रीनशॉट कैप्चर करना
• समस्याएं टैब के अपडेट
• जो लोकल फ़ॉन्ट मौजूद नहीं हैं उन्हें एम्युलेट करें
• इनऐक्टिव उपयोगकर्ताओं को एम्युलेट करना
• prefers-reduced-data को एम्युलेट करें
• JavaScript की नई सुविधाओं के लिए सहायता
• Lighthouse पैनल में Lighthouse 6.2
• सर्विस वर्कर पैनल में "अन्य ऑरिजिन" लिस्टिंग को बंद करना
• फ़िल्टर किए गए आइटम के लिए कवरेज की खास जानकारी दिखाना
• ऐप्लिकेशन पैनल में फ़्रेम की जानकारी वाला नया व्यू
• स्टाइल पैनल में रंगों का ऐक्सेस किया जा सकने वाला सुझाव
• एलिमेंट पैनल में प्रॉपर्टी पैनल को फिर से चालू करना
• नेटवर्क पैनल में X-Client-Data हेडर की ऐसी वैल्यू जिन्हें इंसान पढ़ सकते हैं
• स्टाइल पैनल में पसंद के मुताबिक फ़ॉन्ट अपने-आप पूरा होना
• नेटवर्क पैनल में संसाधन का टाइप लगातार दिखाना
• एलिमेंट और नेटवर्क पैनल में मौजूद बटन हटाना

Chrome 85

• CSS-in-JS फ़्रेमवर्क के लिए स्टाइल में बदलाव
• Lighthouse पैनल में Lighthouse 6
• फ़र्स्ट मीनिंगफ़ुल पेंट (एफ़एमपी) का इस्तेमाल बंद होना
• JavaScript की नई सुविधाओं के लिए सहायता
• मेनिफ़ेस्ट पैनल में ऐप्लिकेशन शॉर्टकट के लिए नई चेतावनियां
• समय टैब में सर्विस वर्कर respondWith के इवेंट
• कंप्यूटेड पैनल का लगातार डिसप्ले
• WebAssembly फ़ाइलों के लिए बाइट कोड ऑफ़सेट
• सोर्स पैनल में लाइन के हिसाब से कॉपी और कट करें
• कंसोल सेटिंग से जुड़े अपडेट
• परफ़ॉर्मेंस पैनल से जुड़े अपडेट
• ब्रेकपॉइंट, शर्त के साथ ब्रेकपॉइंट, और लॉगपॉइंट के लिए नए आइकॉन

Chrome 84

• 'समस्याओं' के नए टैब में, साइट की समस्याएं ठीक करना
• जांच मोड के टूलटिप में सुलभता की जानकारी देखना
• परफ़ॉर्मेंस पैनल से जुड़े अपडेट
• कंसोल में उपलब्ध, प्रॉमिस के लिए ज़्यादा सटीक शब्दावली
• स्टाइल पैनल से जुड़े अपडेट
• एलिमेंट पैनल में प्रॉपर्टी पैनल का बंद होना
• मेनिफ़ेस्ट पैनल में ऐप्लिकेशन शॉर्टकट की सुविधा

Chrome 83

• देखने की क्षमता में कमी को दूर करना
• भाषाओं को एम्युलेट करें
• क्रॉस-ऑरिजिन एम्बेडर नीति (सीओईपी) को डीबग करना
• ब्रेकपॉइंट, शर्त के साथ ब्रेकपॉइंट, और लॉगपॉइंट के लिए नए आइकॉन
• किसी खास कुकी को सेट करने वाले नेटवर्क के अनुरोध देखना
• कमांड मेन्यू से बाईं ओर डॉक करें
• मुख्य मेन्यू में मौजूद 'सेटिंग' विकल्प को अब अलग कर दिया गया है
• ऑडिट पैनल अब लाइटहाउस पैनल है
• फ़ोल्डर में मौजूद सभी स्थानीय बदलावों को मिटाना
• लंबे टास्क का यूज़र इंटरफ़ेस (यूआई) अपडेट किया गया
• मेनिफ़ेस्ट पैनल में, मास्केबल आइकॉन की सुविधा

Chrome 82

Chrome 82 रद्द कर दिया गया है.

Chrome 81

• डिवाइस मोड में Moto G4 की सहायता टीम
• कुकी से जुड़े अपडेट
• वेब ऐप्लिकेशन मेनिफ़ेस्ट के ज़्यादा सटीक आइकॉन
• एस्केप्ड वैल्यू देखने के लिए, सीएसएस content प्रॉपर्टी पर कर्सर घुमाएं
• कंसोल में सोर्स मैप से जुड़ी गड़बड़ियां
• फ़ाइल खत्म होने से पहले स्क्रोल करने की सुविधा बंद करने की सेटिंग

Chrome 80

• कंसोल में let और class को फिर से एलान करने से जुड़ी सहायता
• WebAssembly डीबग करने की बेहतर सुविधा
• शुरू करने वाले टैब में, इनिशिएटर चेन का अनुरोध करें
• खास जानकारी में, चुने गए नेटवर्क अनुरोध को हाइलाइट करना
• नेटवर्क पैनल में यूआरएल और पाथ कॉलम
• अपडेट की गई उपयोगकर्ता एजेंट स्ट्रिंग
• नया ऑडिट पैनल कॉन्फ़िगरेशन यूज़र इंटरफ़ेस (यूआई)
• हर फ़ंक्शन या हर ब्लॉक कोड कवरेज के मोड
• अब पेज को फिर से लोड करके कोड कवरेज शुरू करना ज़रूरी है

Chrome 79

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

Chrome 78

• ऑडिट पैनल में एक से ज़्यादा क्लाइंट वाली सहायता
• पेमेंट हैंडलर को डीबग करना
• ऑडिट पैनल में Lighthouse 5.2
• परफ़ॉर्मेंस पैनल में सबसे बड़ा कॉन्टेंटफ़ुल पेंट
• मुख्य मेन्यू में मौजूद DevTools से जुड़ी समस्याएं हल करें

Chrome 77

• एलिमेंट स्टाइल कॉपी करना
• लेआउट शिफ़्ट को विज़ुअलाइज़ करना
• ऑडिट पैनल में Lighthouse 5.1
• ओएस की थीम सिंक करना
• ब्रेकपॉइंट एडिटर खोलने के लिए कीबोर्ड शॉर्टकट
• नेटवर्क पैनल में कैश मेमोरी को प्रीफ़ेच करें
• ऑब्जेक्ट देखते समय निजी प्रॉपर्टी
• ऐप्लिकेशन पैनल में सूचनाएं और पुश मैसेज

Chrome 76

• सीएसएस वैल्यू की मदद से ऑटोकंप्लीट करना
• नेटवर्क सेटिंग के लिए नया यूज़र इंटरफ़ेस (यूआई)
• HAR एक्सपोर्ट में WebSocket मैसेज
• HAR इंपोर्ट और एक्सपोर्ट करें बटन
• रीयल-टाइम में मेमोरी का इस्तेमाल
• सर्विस वर्कर के रजिस्ट्रेशन पोर्ट नंबर
• बैकग्राउंड फ़ेच और बैकग्राउंड सिंक इवेंट की जांच करना
• Firefox के लिए Puppeteer

Chrome 75

• सीएसएस फ़ंक्शन अपने-आप पूरे होने पर, काम के प्रीसेट
• कमांड मेन्यू से साइट डेटा मिटाना
• सभी IndexedDB डेटाबेस देखें
• होवर करने पर संसाधन का कंप्रेस नहीं किया गया साइज़ देखना
• ब्रेकपॉइंट पैनल में इनलाइन ब्रेकपॉइंट
• IndexedDB और कैश रिसॉर्स की संख्या
• जांच करने के बारे में ज़्यादा जानकारी देने वाले टूलटिप को बंद करने की सेटिंग
• एडिटर में टैब इंडेंट को टॉगल करने की सेटिंग

Chrome 74

• सीएसएस प्रॉपर्टी से जिन नोड पर असर पड़ा है उन्हें हाइलाइट करना
• ऑडिट पैनल में Lighthouse v4
• WebSocket बाइनरी मैसेज व्यूअर
• कमांड मेन्यू में एरिया का स्क्रीनशॉट कैप्चर करें
• नेटवर्क पैनल में सर्विस वर्कर फ़िल्टर
• परफ़ॉर्मेंस पैनल से जुड़े अपडेट
• परफ़ॉर्मेंस पैनल की रिकॉर्डिंग में लंबे टास्क
• समय सेक्शन में फ़र्स्ट पेंट
• बोनस सलाह: आरजीबी और एचएसएल कलर कोड देखने के लिए शॉर्टकट (वीडियो)

Chrome 73

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

Chrome 72

• परफ़ॉर्मेंस पैनल में परफ़ॉर्मेंस मेट्रिक को विज़ुअलाइज़ करना
• डीओएम ट्री में टेक्स्ट नोड हाइलाइट करें
• डीओएम नोड में JS पाथ कॉपी करें
• ऑडिट पैनल अपडेट, जिसमें एक नया ऑडिट शामिल है जो कमांड मेन्यू से ऑडिट पैनल को ऐक्सेस करने के लिए JS लाइब्रेरी और नए कीवर्ड का पता लगाता है
• बोनस के लिए सलाह: मीडिया क्वेरी की जांच करने के लिए डिवाइस मोड का इस्तेमाल करें (वीडियो)

Chrome 71

• डीओएम नोड को हाइलाइट करने के लिए, लाइव एक्सप्रेशन के नतीजे पर कर्सर घुमाएं
• डीओएम नोड को ग्लोबल वैरिएबल के तौर पर स्टोर करना
• शुरू करने वाले और प्राथमिकता की जानकारी अब HAR इंपोर्ट और एक्सपोर्ट में
• मुख्य मेन्यू में जाकर निर्देश मेन्यू ऐक्सेस करना
• पिक्चर में पिक्चर ब्रेकपॉइंट
• बोनस के लिए सलाह: कंसोल में नोड के ट्रिगर हुए इवेंट को लॉग करने के लिए, monitorEvents() का इस्तेमाल करें (वीडियो)

Chrome 70

• कंसोल में लाइव एक्सप्रेशन
• ईगर इवैलुएशन के दौरान डीओएम नोड को हाइलाइट करना
• परफ़ॉर्मेंस पैनल को ऑप्टिमाइज़ करना
• ज़्यादा भरोसेमंद डीबग करना
• कमांड मेन्यू से, नेटवर्क थ्रॉटलिंग चालू करना
• शर्त के साथ ब्रेकपॉइंट अपने-आप पूरा होने की सुविधा
• AudioContext इवेंट के बारे में ब्रेक
• ndb की मदद से Node.js ऐप्लिकेशन को डीबग करना
• बोनस सलाह: User Timing API की मदद से असल दुनिया के उपयोगकर्ता इंटरैक्शन को मेज़र करें

Chrome 68

• एगर इवैलुएशन
• आर्ग्युमेंट से जुड़े संकेत
• फ़ंक्शन अपने-आप पूरा होना
• ES2017 के कीवर्ड
• ऑडिट पैनल में Lighthouse 3.0
• BigInt की सहायता
• वॉच पैनल में प्रॉपर्टी पाथ जोड़ना
• "टाइमस्टैंप दिखाएं" को 'सेटिंग' में ले जाया गया
• बोनस के लिए सलाह: कंसोल के ऐसे तरीके जिन्हें कम लोग जानते हैं (वीडियो)

Chrome 67

• सभी नेटवर्क हेडर में खोजना
• सीएसएस के वैरिएबल की वैल्यू की झलक
• फ़ेच के तौर पर कॉपी करें
• नए ऑडिट, डेस्कटॉप कॉन्फ़िगरेशन के विकल्प, और व्यू ट्रेस
• इनफ़ाइनाइट लूप को रोकना
• परफ़ॉर्मेंस टैब में उपयोगकर्ता समय की जानकारी
• JavaScript वीएम इंस्टेंस की जानकारी, मेमोरी पैनल में साफ़ तौर पर दिखती है
• नेटवर्क टैब का नाम बदलकर पेज टैब किया गया
• गहरे रंग वाली थीम के अपडेट
• सुरक्षा पैनल में सर्टिफ़िकेट की पारदर्शिता से जुड़ी जानकारी
• परफ़ॉर्मेंस पैनल में साइट आइसोलेशन की सुविधाएं
• बोनस के लिए सलाह: लेयर पैनल + ऐनिमेशन इंस्पेक्टर (वीडियो)

Chrome 66

• नेटवर्क पैनल में ब्लैकबॉक्सिंग
• डिवाइस मोड में ज़ूम करने की सुविधा में अपने-आप बदलाव होना
• झलक और जवाब टैब में सुंदर-प्रिंटिंग
• झलक टैब में एचटीएमएल कॉन्टेंट की झलक देखना
• एचटीएमएल के अंदर मौजूद स्टाइल के लिए, लोकल ओवरराइड की सुविधा
• बोनस के लिए सलाह: इवेंट लिसनर ब्रेकपॉइंट को ज़्यादा काम का बनाने के लिए, Blackbox फ़्रेमवर्क स्क्रिप्ट का इस्तेमाल करना

Chrome 65

• स्थानीय बदलाव
• नए सुलभता टूल
• बदलाव टैब
• एसईओ और परफ़ॉर्मेंस के नए ऑडिट
• परफ़ॉर्मेंस पैनल में एक से ज़्यादा रिकॉर्डिंग
• एक साथ काम नहीं करने वाले कोड में कर्मचारियों के साथ काम करने वाला भरोसेमंद कोड
• बोनस के लिए सलाह: Puppeteer की मदद से DevTools से जुड़ी अपने-आप होने वाली कार्रवाइयां (वीडियो)

Chrome 64

• परफ़ॉर्मेंस मॉनिटर
• कंसोल साइडबार
• Console के मिलते-जुलते मैसेज का ग्रुप बनाना
• बोनस के लिए सलाह: गलत क्लास को टॉगल करें (वीडियो)

Chrome 63

• एक से ज़्यादा क्लाइंट वाले रिमोट को डीबग करने की सुविधा
• फ़ाइल फ़ोल्डर 2.0
• चार नए ऑडिट
• कस्टम डेटा की मदद से पुश नोटिफ़िकेशन सिम्युलेट करना
• कस्टम टैग की मदद से, बैकग्राउंड सिंक इवेंट ट्रिगर करना
• बोनस के लिए सलाह: इवेंट लिसनर के लिए ब्रेकपॉइंट (वीडियो)

Chrome 62

• कंसोल में टॉप-लेवल के लोगों का इंतज़ार करना
• स्क्रीनशॉट का नया वर्कफ़्लो
• सीएसएस ग्रिड को हाइलाइट करने की सुविधा
• ऑब्जेक्ट की क्वेरी के लिए एक नया Console एपीआई
• नए कंसोल फ़िल्टर
• नेटवर्क पैनल में HAR इंपोर्ट
• झलक में दिखने वाली कैश मेमोरी के संसाधन
• कैश मेमोरी को डीबग करने के अनुमान के बारे में ज़्यादा जानकारी
• ब्लॉक-लेवल के कोड का कवरेज

Chrome 61

• मोबाइल डिवाइस थ्रॉटलिंग सिम्युलेशन
• स्टोरेज के इस्तेमाल की जानकारी देखना
• देखें कि सर्विस वर्कर कैश मेमोरी में कब रिस्पॉन्स देता है
• कमांड मेन्यू से एफ़पीएस मीटर चालू करें
• ज़ूम या स्क्रोल करने के लिए, माउसव्हील के काम करने का तरीका सेट करना
• ES6 मॉड्यूल के लिए सहायता को डीबग करना

Chrome 60

• नया ऑडिट पैनल
• तीसरे पक्ष के बैज
• 'यहां पर जारी रखें' के लिए नया जेस्चर
• एक साथ काम नहीं करने वाली प्रोसेस में जाएं
• कंसोल में ज़्यादा जानकारी देने वाले ऑब्जेक्ट की झलक
• कंसोल में ज़्यादा जानकारी देने वाला कॉन्टेक्स्ट चुनना
• कवरेज टैब में रीयल-टाइम अपडेट
• नेटवर्क को कंट्रोल करने के आसान विकल्प
• एक साथ काम नहीं करने वाली स्टैक, डिफ़ॉल्ट रूप से चालू रहती हैं

Chrome 59

• सीएसएस और जेएस कोड कवरेज
• पूरे पेज के स्क्रीनशॉट
• अनुरोधों को ब्लॉक करना
• एक साथ सिंक करने के इंतज़ार में हैं
• यूनिफ़ाइड कमांड मेन्यू