Chrome 122 में नया

Adriana Jara

यहां आवश्यक जानकारी दी गई है:

मैं एड्रियाना जारा हूं. आइए और जानें कि Chrome 122 में डेवलपर के लिए नया क्या है.

स्टोरेज बकेट एपीआई.

स्टोरेज बकेट एपीआई, स्थायी स्टोरेज को बेहतर तरीके से मैनेज करने के लिए ज़्यादा जानकारी देता है.

आम तौर पर, जब उपयोगकर्ता के डिवाइस में स्टोरेज के लिए बची जगह खत्म हो जाती है, तो IndexedDB या localStorage जैसे एपीआई से सेव किया गया डेटा खो जाता है. उपयोगकर्ता को कोई परेशानी भी नहीं होती. स्टोरेज को स्थायी बनाने का एक तरीका यह है कि आप StorageManager इंटरफ़ेस के persist() तरीके का इस्तेमाल करें. हालांकि, स्टोरेज को स्थायी बनाए रखने का यह अनुरोध करने का मतलब यह है कि उसमें पूरा डेटा या कुछ नहीं है

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

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

परफ़ॉर्मेंस पैनल में DevTools में किए गए सुधार

Chrome 122 DevTools के परफ़ॉर्मेंस पैनल में ये सुधार शामिल हैं.

सबसे पहले, परफ़ॉर्मेंस पैनल के सबसे ऊपर मौजूद टाइमलाइन की मदद से, अब ब्रेडक्रंब सेट करके उनके बीच स्विच किया जा सकता है. ब्रेडक्रंब सेट करने के लिए, टाइमलाइन पर कोई रेंज चुनें. इसके बाद, उस पर कर्सर घुमाएं और उससे जुड़े N ms zoom_in बटन पर क्लिक करें. एक के बाद एक कई नेस्ट किए गए ब्रेडक्रंब बनाए जा सकते हैं. ज़ूम लेवल के बीच स्विच करने के लिए, टाइमलाइन में सबसे ऊपर, चेन में मौजूद ब्रेडक्रंब पर क्लिक करें. ब्रेडक्रंब काम करते देखने के लिए अगला वीडियो देखें.

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

  • स्टाइल या लेआउट अमान्य होना -> स्टाइल की फिर से गिनती करें या लेआउट
  • ऐनिमेशन फ़्रेम का अनुरोध करें -> ऐनिमेशन फ़्रेम ट्रिगर किया गया
  • उन नंबर पर कॉलबैक करने का अनुरोध करें जो कुछ समय से इस्तेमाल में नहीं हैं -> इस्तेमाल में नहीं होने पर कॉलबैक का अनुरोध करें
  • टाइमर इंस्टॉल करें -> टाइमर ट्रिगर किया गया
  • WebSocket बनाएं -> भेजें... और WebSocket हैंडशेक पाएं या WebSocket को बंद करें

तीरों को देखने के लिए, ट्रेस में ऐसा कोई इवेंट ढूंढें और उस पर क्लिक करें.

अनुरोध से मिला एक ऐरो और इस्तेमाल न किए जा रहे कॉलबैक का सक्रिय होना.

Devtools 122 में नया क्या है में ज़्यादा DevTools अपडेट पाएं.

एक साथ काम नहीं करने वाले क्लिपबोर्ड एपीआई unsanitized का विकल्प

Async Clipboard API का इस्तेमाल करके, कॉपी करते और चिपकाते समय, read() तरीके के unsanitized विकल्प का इस्तेमाल करके, ऐप्लिकेशन और वेबसाइटों को बिना सैनिटाइज़ किया हुआ एचटीएमएल ऐक्सेस किया जा सकता है. जब तक साइटों में यह प्रॉपर्टी शामिल नहीं होती, तब तक क्लिपबोर्ड पर मौजूद एचटीएमएल को पढ़ने की सुविधा को सैनिटाइज़ कर दिया जाएगा.

डिफ़ॉल्ट रूप से, एक साथ काम नहीं करने वाले एपीआई का इस्तेमाल करके text/html MIME टाइप पढ़ते समय, सुरक्षा से जुड़ी वजहों के चलते सैनिटाइज़र को शुरू किया जाता है, ताकि एचटीएमएल मार्कअप से कॉन्टेंट को हटाया जा सके. साथ ही, नतीजे मिलने वाले एचटीएमएल में स्टाइल को इनलाइन किया जाता है. इसकी वजह से, वेब डेवलपर या मोबाइल ऐप्लिकेशन के पढ़े जाने पर काफ़ी ज़्यादा एचटीएमएल पेलोड होता है और एचटीएमएल कॉन्टेंट की क्वालिटी खराब हो जाती है.

यहां दिए गए उदाहरण में, आउटपुट के अंतर को देखा जा सकता है.

इनपुट:

<style>p { color: blue; }</style><p>Hello, World!</p>'

साफ़ किया गया (डिफ़ॉल्ट):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

unsanitized विकल्प के साथ:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Clipboard API की बुनियादी बातें जानने के लिए, क्लिपबोर्ड का ऐक्सेस अनब्लॉक करें पर जाएं.

और ज़्यादा!

बेशक, यहां बहुत कुछ है.

  • सीएसएस में, इस्तेमाल न की जा सकने वाली सुविधाओं वाली कंटेनर क्वेरी कभी मैच नहीं होती. उदाहरण के लिए, नीचे दी गई क्वेरी कभी भी किसी ऐसी सुविधा की वजह से मेल नहीं खाएगी जिसकी जानकारी नहीं है:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() करने से फ़ाइल ऑब्जेक्ट पर कोई असर नहीं पड़ता. इससे सिर्फ़ टेक्स्ट टाइप के ऑब्जेक्ट मिटते हैं.

  • WebGL के drawingBufferStorage से, रेंडरिंग को डिफ़ॉल्ट ड्रॉइंग बफ़र पिक्सल फ़ॉर्मैट में बदलते समय, अतिरिक्त कॉपी से बचा जा सकता है. साथ ही, ऐसा कॉन्टेंट बनाया जा सकता है जिसमें आठ बिट से ज़्यादा सटीक जानकारी हो.

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 122 में और बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.

सदस्यता लें

अप-टू-डेट रहने के लिए, Chrome Developers के YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.

यो सोय एड्रियाना जारा और Chrome 123 के रिलीज़ होते ही, मैं आपको बताऊंगी कि Chrome की नई सुविधाएं क्या हैं!