यहां आवश्यक जानकारी दी गई है:
- उपयोगकर्ता की उत्पादकता बढ़ाने के लिए, Document पिक्चर में पिक्चर एपीआई का इस्तेमाल करें.
- DevTools में जो स्टाइलशीट नहीं हैं उन्हें डीबग करना अब और आसान हो गया है
- और भी बहुत कुछ.
मैं हूं एड्रियाना जारा. चलिए, देखते हैं कि Chrome 116 में डेवलपर के लिए नया क्या है.
दस्तावेज़ पिक्चर में पिक्चर एपीआई.
दस्तावेज़ पिक्चर में पिक्चर एपीआई की मदद से, हमेशा सबसे ऊपर वाली विंडो को खोला जा सकता है. इस विंडो में, आर्बिट्रेरी एचटीएमएल कॉन्टेंट से डेटा डाला जा सकता है.
दस्तावेज़ पिक्चर में पिक्चर एपीआई में मौजूद पिक्चर में पिक्चर विंडो, एक ही ऑरिजिन वाली खाली विंडो की तरह ही होती है. इसे 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प्रॉपर्टी अब मुख्य-फ़्रेम ऐनिमेशन में काम करती हैं. इससे एग्ज़िट ऐनिमेशन को सीएसएस में पूरी तरह से जोड़ा जा सकता है.- फ़ेच एपीआई का इस्तेमाल अब अपने खुद के बफ़र रीडर तैयार करने के साथ किया जा सकता है. इससे, कचरा इकट्ठा करने का काम ओवरहेड और कॉपी में कम किया जाता है और उपयोगकर्ताओं के लिए कार्रवाई को बेहतर बनाया जाता है.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 116 में और बदलावों के बारे में जानने के लिए, नीचे दिए गए लिंक देखें.
- Chrome DevTools में नया क्या है (116)
- Chrome 116 के इस्तेमाल पर रोक लगाना और उसे हटाना
- Chrome 116 के लिए ChromeStatus.com से जुड़े अपडेट
- Chromium सोर्स का डेटा स्टोर करने की जगह में बदलाव की सूची
- Chrome रिलीज़ कैलेंडर
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome Developers के YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.
यो सोय एड्रियाना जारा और Chrome 117 के रिलीज़ होते ही, मैं आपको बताऊंगी कि Chrome की नई सुविधा क्या है!