Chrome 122 में नया

Adriana Jara

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

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

Storage Buckets API.

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

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

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

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

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

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

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

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

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

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

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

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

Async Clipboard API unsanitized विकल्प

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

डिफ़ॉल्ट रूप से, असाइनिक एपीआई का इस्तेमाल करके 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 Developers के YouTube चैनल की सदस्यता लें. हम नया वीडियो लॉन्च होने पर, आपको ईमेल से सूचना देंगे.

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