Chrome 116 में नया

Adriana Jara

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

मेरा नाम अड्रिआना जारा है. आइए, देखते हैं कि Chrome 116 में डेवलपर के लिए नया क्या है.

डॉक्यूमेंट पिक्चर-इन-पिक्चर एपीआई.

दस्तावेज़ के लिए पिक्चर में पिक्चर (पीआईपी) एपीआई की मदद से, हमेशा-शीर्ष पर रहने वाली विंडो खोली जा सकती है. इसमें किसी भी तरह का एचटीएमएल कॉन्टेंट डाला जा सकता है.

पिक्चर में पिक्चर विंडो, जिसमें सिंटेल का ट्रेलर वीडियो चल रहा है.
Document Picture-in-Picture API (डेमो) की मदद से बनाई गई पिक्चर-इन-पिक्चर विंडो.

Document Picture-in-Picture API में मौजूद पिक्चर में पिक्चर विंडो, window.open() का इस्तेमाल करके खोली गई, एक ही ऑरिजिन वाली खाली विंडो से मिलती-जुलती है. हालांकि, इनमें कुछ अंतर हैं:

  • पिक्चर में पिक्चर विंडो, अन्य विंडो के ऊपर फ़्लोट करती है.
  • पिक्चर में पिक्चर विंडो हमेशा खुलने वाली विंडो से बाहर नहीं निकलती.
  • पिक्चर में पिक्चर विंडो पर नेविगेट नहीं किया जा सकता.
  • वेबसाइट, पिक्चर में पिक्चर विंडो की जगह सेट नहीं कर सकती.

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

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

जब कोई उपयोगकर्ता खाली पिक्चर-इन-पिक्चर विंडो खोलने के लिए बटन पर क्लिक करता है, तो यह JavaScript documentPictureInPicture.requestWindow() को कॉल करता है. रिटर्न किया गया प्रॉमिस, पिक्चर में पिक्चर विंडो के JavaScript ऑब्जेक्ट के साथ रिज़ॉल्व होता है. वीडियो प्लेयर को append() का इस्तेमाल करके उस विंडो पर ले जाया गया.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

ज़्यादा जानकारी और उदाहरणों के लिए, किसी भी एलिमेंट के लिए पिक्चर में पिक्चर देखें.

DevTools में स्टाइलशीट की डीबगिंग से जुड़े सुधार मौजूद नहीं हैं.

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

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

साथ ही, सोर्स > एडिटर में, अब गड़बड़ी वाले स्टेटमेंट, @import,url(), और href के बगल में, इनलाइन गड़बड़ी के टूलटिप दिखते हैं.

सोर्स पैनल में, अंडरलाइन किए गए स्टेटमेंट के साथ टूलटिप.

  • कंसोल में, पूरे न हो पाने वाले अनुरोधों के लिंक के साथ-साथ, अब उस स्टाइलशीट का लिंक भी शामिल होता है जो लोड नहीं हो सकी.

कंसोल, समस्या वाले स्टेटमेंट वाली लाइन के लिंक उपलब्ध कराता है.

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

समस्याओं वाले पैनल में, स्टाइलशीट लोड करने से जुड़ी सभी समस्याओं की सूची होती है. इनमें, गलत यूआरएल, अनुरोध पूरा न होने, और @import स्टेटमेंट की गलत जगह पर होने जैसी समस्याएं शामिल हैं.

समस्याओं का पैनल, जिसमें सोर्स और अनुरोधों के लिंक मौजूद हैं.

Chrome 116 में DevTools के बारे में पूरी जानकारी और ज़्यादा जानकारी पाने के लिए, DevTools में क्या नया है लेख पढ़ें.

और भी कई सुविधाएं!

बेशक वहां और भी बहुत कुछ है.

  • मोशन पाथ की मदद से, लेखक किसी भी ग्राफ़िक ऑब्जेक्ट को पोज़िशन कर सकते हैं. साथ ही, डेवलपर के तय किए गए पाथ के हिसाब से उसे ऐनिमेट कर सकते हैं.
  • display और content-visibility प्रॉपर्टी अब मुख्य फ़्रेम ऐनिमेशन में काम करती हैं. इससे, सीएसएस में ही बाहर निकलने के ऐनिमेशन जोड़े जा सकते हैं.
  • फ़ेच एपीआई का इस्तेमाल अब Bring Your Own Buffer readers के साथ किया जा सकता है. इससे, ग़ैर-ज़रूरी डेटा इकट्ठा करने में लगने वाला समय और कॉपी कम हो जाती हैं. साथ ही, उपयोगकर्ताओं के लिए रिस्पॉन्सिविटी बेहतर होती है.

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

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

सदस्यता लें

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

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