Chrome 122 में नया

Adriana Jara

यहां आपके जानने योग्य तथ्य दिए गए हैं:

  • Storage Buckets API की मदद से, स्टोरेज को बेहतर तरीके से मैनेज करें.
  • DevTools में परफ़ॉर्मेंस पैनल में सुधार किए गए हैं.
  • एचटीएमएल को कॉपी और चिपकाते समय, एएसीसी क्लिपबोर्ड एपीआई के नए unsanitized विकल्प का इस्तेमाल करके, एचटीएमएल को सही तरीके से चिपकाने का विकल्प चुनें.
  • इसके अलावा, और भी बहुत कुछ है.

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

Storage Buckets API.

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

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

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

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

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

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

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

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

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

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

अनुरोध से जुड़ा ऐरो और ब्राउज़र के कुछ समय से इस्तेमाल न होने पर कॉलबैक ट्रिगर होना.

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

Async Clipboard API 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 की मदद से, रेंडरिंग को डिफ़ॉल्ट ड्रॉइंग बफ़र पिक्सल फ़ॉर्मैट में बदलने के दौरान, अतिरिक्त कॉपी से बचा जा सकता है. साथ ही, 8 बिट से ज़्यादा सटीक कॉन्टेंट भी ड्रॉ किया जा सकता है.

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

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

सदस्यता लें

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

नमस्ते, मैं अड्रिआना जारा हूं. Chrome 123 रिलीज़ होने के बाद, मैं आपको बताऊंगी कि Chrome में नया क्या है!