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

सीएसएस फ़्लेक्सबॉक्स को डीबग करने के नए टूल

DevTools में अब खास तौर पर, सीएसएस फ़्लेक्सबॉक्स डीबग करने वाले टूल उपलब्ध हैं!

सीएसएस फ़्लेक्सबॉक्स डीबग करने वाले टूल

अगर आपके पेज के किसी एचटीएमएल एलिमेंट पर display: flex या display: inline-flex लागू किया गया है, तो आपको एलिमेंट पैनल में इसके बगल में flex बैज दिखेगा. पेज पर फ़्लेक्सिबल ओवरले के डिसप्ले को टॉगल करने के लिए बैज पर क्लिक करें.

स्टाइल पैनल में, display: flex के आगे मौजूद नए आइकॉन या Flexbox एडिटर को खोलने के लिए, display: inline-flex पर क्लिक करें. Flexbox एडिटर, फ़्लेक्सबॉक्स प्रॉपर्टी में बदलाव करने का एक आसान तरीका देता है. खुद आज़माकर देखें!

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

लेआउट पैनल में फ़्लेक्सबॉक्स सेक्शन

Chromium से जुड़ी समस्याएं: 1166710, 1175699

वेबसाइट की परफ़ॉर्मेंस की जानकारी का नया ओवरले

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले नए ओवरले की मदद से, पेज की परफ़ॉर्मेंस को बेहतर तरीके से विज़ुअलाइज़ करें और मेज़र करें.

वेबसाइट की परफ़ॉर्मेंस की जानकारी, Google की एक ऐसी पहल है जिसमें क्वालिटी से जुड़े सिग्नल के लिए एक ही दिशा-निर्देश दिए जाते हैं. ये सिग्नल, वेब पर लोगों को बेहतरीन अनुभव देने के लिए ज़रूरी हैं.

कमांड मेन्यू खोलें, रेंडरिंग दिखाएं कमांड चलाएं और फिर कोर वेब वीटल चेकबॉक्स चालू करें.

ओवरले वर्तमान में यह प्रदर्शित करता है:

  • सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी): इससे लोड होने की परफ़ॉर्मेंस का पता चलता है. लोगों को अच्छा अनुभव देने के लिए, पेज के पहली बार लोड होने के 2.5 सेकंड के अंदर एलसीपी होना चाहिए.
  • फ़र्स्ट इनपुट डिले (एफ़आईडी): इससे इंटरैक्टिविटी का पता चलता है. अच्छा उपयोगकर्ता अनुभव देने के लिए, पेजों का एफ़आईडी 100 मिलीसेकंड से कम होना चाहिए.
  • कुल लेआउट शिफ़्ट (सीएलएस): इससे विज़ुअल स्टैबिलिटी रिकॉर्ड की जाती है. अच्छा उपयोगकर्ता अनुभव देने के लिए, पेजों का सीएलएस 0.1 से कम होना चाहिए.

वेबसाइट की परफ़ॉर्मेंस की जानकारी का ओवरले

Chromium की समस्या: 1152089

समस्याओं वाले टैब के अपडेट

समस्या की गिनती को कंसोल के स्टेटस बार में ले जाया गया

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

कंसोल के स्टेटस बार में समस्याओं की संख्या

Chromium की समस्या: 1140516

भरोसेमंद वेब गतिविधि से जुड़ी समस्याओं की शिकायत करना

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

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

समस्याएं टैब में भरोसेमंद वेब गतिविधि से जुड़ी समस्याएं

Chromium की समस्या: 1147479

कंसोल में स्ट्रिंग को (मान्य) JavaScript स्ट्रिंग लिटरल के रूप में फ़ॉर्मैट करें

अब कंसोल स्ट्रिंग को कंसोल में, मान्य JavaScript स्ट्रिंग लिटरल के तौर पर फ़ॉर्मैट किया जाता है. पहले, स्ट्रिंग को प्रिंट करते समय कंसोल में डबल कोट नहीं हटते थे.

स्ट्रिंग को (मान्य) JavaScript स्ट्रिंग लिटरल के रूप में फ़ॉर्मैट करें

Chromium की समस्या: 1178530

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

DevTools अब सभी उपलब्ध ट्रस्ट टोकन को ऐप्लिकेशन पैनल के तहत, नए ट्रस्ट टोकन पैनल में मौजूदा ब्राउज़िंग कॉन्टेक्स्ट में दिखाता है.

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

नया ट्रस्ट टोकन पैनल

Chromium की समस्या: 1126824

सीएसएस कलर-गामट मीडिया सुविधा को एम्युलेट करें

सीएसएस कलर-गामट मीडिया सुविधा को एम्युलेट करें

color-gamut मीडिया क्वेरी की मदद से, रंगों की उस रेंज की जांच की जा सकती है जो ब्राउज़र और आउटपुट डिवाइस पर काम करता है. उदाहरण के लिए, अगर color-gamut: p3 मीडिया क्वेरी मेल खाती है, तो इसका मतलब है कि उपयोगकर्ता के डिवाइस पर Display-P3 कलरस्पेस काम करता है.

कमांड मेन्यू खोलें और रेंडरिंग दिखाएं कमांड चलाएं. इसके बाद, सीएसएस मीडिया फ़ीचर color-gamat ड्रॉपडाउन पर सेट करें.

Chromium की समस्या: 1073887

प्रोग्रेसिव वेब ऐप्लिकेशन के लिए बेहतर टूलिंग

DevTools अब कंसोल में, प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) के इंस्टॉल होने से जुड़ी ज़्यादा जानकारी वाला मैसेज दिखाता है. इसमें दस्तावेज़ का लिंक भी होता है.

PWA इंस्टॉल होने से जुड़ी चेतावनी

अगर मेनिफ़ेस्ट के ब्यौरे में 324 से ज़्यादा वर्ण होते हैं, तो मेनिफ़ेस्ट पैनल में अब चेतावनी वाला मैसेज दिखेगा.

PWA की जानकारी में काट-छांट करने की चेतावनी

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

PWA का स्क्रीनशॉट लेने से जुड़ी चेतावनी

Chromium से जुड़ी समस्या: 1146450, 1169689, 965802

नेटवर्क पैनल में नया Remote Address Space कॉलम

हर नेटवर्क रिसॉर्स के नेटवर्क का आईपी ऐड्रेस स्पेस देखने के लिए, नेटवर्क पैनल में नए Remote Address Space कॉलम का इस्तेमाल करें.

'रिमोट अड्रेस स्पेस' वाला नया कॉलम

Chromium की समस्या: 1128885

परफ़ॉर्मेंस में सुधार करना

DevTools खुले होने की वजह से पेज लोड होने की परफ़ॉर्मेंस अब बेहतर हो गई है. कुछ गंभीर मामलों में, परफ़ॉर्मेंस में 10 गुना सुधार हुए.

DevTools, स्टैक ट्रेस इकट्ठा करता है. साथ ही, उन्हें किसी समस्या की स्थिति में डेवलपर के इस्तेमाल के लिए, कंसोल मैसेज या एसिंक्रोनस टास्क में जोड़ता है. यह डेटा कलेक्शन, ब्राउज़र इंजन में सिंक्रोनस तरीके से होना चाहिए. इसलिए, धीमे स्टैक ट्रेस का संग्रह होने से पेज की गति काफ़ी धीमी हो सकती है. हमने स्टैक ट्रेस के ऊपरी खर्च को काफ़ी कम किया है.

लागू करने के बारे में ज़्यादा जानकारी वाली इंजीनियरिंग ब्लॉग पोस्ट देखने के लिए हमारे साथ बने रहें.

Chromium से जुड़ी समस्याएं: 1069425, 1077657

फ़्रेम की जानकारी वाले व्यू में, अनुमति वाली/अस्वीकार की गई सुविधाएं दिखाएं

फ़्रेम की जानकारी वाले व्यू में, ब्राउज़र की उन सुविधाओं की सूची दिखती है जिन्हें अनुमति मिली हुई है और जिनकी अनुमति नहीं है. इन सुविधाओं को अनुमतियों से जुड़ी नीति से कंट्रोल किया जाता है.

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

अनुमति से जुड़ी नीति के तहत, अनुमति वाली/अस्वीकार की गई सुविधाएं

Chromium की समस्या: 1158827

कुकी पैनल में नया SameParty कॉलम

ऐप्लिकेशन पैनल में कुकी पैनल में अब कुकी का SameParty एट्रिब्यूट दिखता है. SameParty एट्रिब्यूट एक नया बूलियन एट्रिब्यूट है. इससे यह पता चलता है कि एक ही पहले पक्ष के सेट के ऑरिजिन के अनुरोधों में किसी कुकी को शामिल किया जाना चाहिए या नहीं.

एक जैसे पक्ष का कॉलम

Chromium की समस्या: 1161427

अमान्य नॉन-स्टैंडर्ड fn.displayName सहायता

गैर-मानक fn.displayName के लिए सहायता रोक दी गई है. इसके बजाय, fn.name का इस्तेमाल करें.

DisplayName के इस्तेमाल का उदाहरण

आम तौर पर, Chrome में नॉन-स्टैंडर्ड fn.displayName प्रॉपर्टी को इस्तेमाल करने की सुविधा होती है. इसकी मदद से, डेवलपर error.stack और DevTools स्टैक ट्रेस में दिखने वाले फ़ंक्शन के लिए डीबग के नामों को कंट्रोल कर सकते हैं. ऊपर दिए गए उदाहरण में, कॉल स्टैक पहले noLongerSupport दिखाएगा.

fn.displayName को स्टैंडर्ड fn.name से बदलें. इसे ECMAScript 2015 में Object.defineProperty के ज़रिए कॉन्फ़िगर किया जा सकता है, ताकि नॉन-स्टैंडर्ड fn.displayName प्रॉपर्टी को बदला जा सके.

fn.displayName के लिए सहायता भरोसेमंद नहीं है और सभी ब्राउज़र इंजन के लिए एक जैसी नहीं है. यह स्टैक ट्रेस को इकट्ठा करने की प्रोसेस को धीमा कर देता है. इस लागत को डेवलपर हमेशा चुकाते हैं, भले ही वे असल में fn.displayName का इस्तेमाल करते हों या नहीं.

नाम के इस्तेमाल का उदाहरण

Chromium की समस्या: 1177685

सेटिंग मेन्यू में Don't show Chrome Data Saver warning का इस्तेमाल बंद किया गया

Don't show Chrome Data Saver warning सेटिंग हटा दी गई है, क्योंकि Chrome की डेटा बचाने की सेटिंग को बंद कर दिया गया है.

'Chrome डेटा सेवर की चेतावनी न दिखाएं' सेटिंग बंद की गई

Chromium की समस्या: 1056922

प्रयोग के तौर पर शुरू की गई सुविधाएं

समस्याएं टैब में, लो-कंट्रास्ट से जुड़ी समस्या की अपने-आप रिपोर्ट होने की सुविधा

DevTools ने 'समस्याएं' टैब में कंट्रास्ट से जुड़ी समस्याओं की रिपोर्टिंग के लिए, प्रयोग के तौर पर सहायता देने की सुविधा अपने-आप जोड़ दी है.

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

ऐसा पेज खोलें जिसमें कम कंट्रास्ट वाली समस्याएं हों. उदाहरण के लिए, यह डेमो. इसके बाद, समस्याओं को देखने के लिए, कंसोल स्टेटस बार में समस्याओं की संख्या बटन पर क्लिक करके, समस्याएं टैब खोलें.

लो-कंट्रास्ट से जुड़ी समस्या की अपने-आप रिपोर्टिंग

Chromium की समस्या: 1155460

एलिमेंट पैनल में सुलभता का पूरा ट्री व्यू

अब किसी पेज का नया और बेहतर सुलभता ट्री व्यू देखने के लिए टॉगल किया जा सकता है.

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

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

कृपया ध्यान दें कि यह एक शुरुआती चरण है. हम समय के साथ इस सुविधा को बेहतर बनाने और इसे बेहतर बनाने की योजना बना रहे हैं.

सभी सुविधाओं वाला ट्री व्यू

Chromium की समस्या: 887173

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

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

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

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

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

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

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

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

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59