कठपुतली
Puppeteer एक JavaScript लाइब्रेरी है, जो Chrome DevTools प्रोटोकॉल और WebDriver BiDi के ज़रिए, Chrome और Firefox, दोनों को ऑटोमेट करने के लिए हाई-लेवल एपीआई उपलब्ध कराती है.
इसका इस्तेमाल करके, ब्राउज़र में किसी भी चीज़ को ऑटोमेट किया जा सकता है. जैसे, स्क्रीनशॉट लेना और PDF जनरेट करना, जटिल यूज़र इंटरफ़ेस (यूआई) पर नेविगेट करना और उनकी जांच करना, और परफ़ॉर्मेंस का विश्लेषण करना.
कॉन्सेप्ट
पेज पर इंटरैक्शन
नेटवर्क इंटरसेप्शन
स्क्रीनशॉट ले सकते हैं
रन मोड
ब्लॉग पोस्ट
आसानी से क्रेडेंशियल शेयर करने की सुविधा की मदद से, eBay ने लॉगिन करने की दर को 10% तक कैसे बढ़ाया
जानें कि eBay ने क्रेडेंशियल शेयर करने के लिए, डिजिटल एसेट लिंक का इस्तेमाल करके, लॉगिन में सफलता की दर को 10% तक कैसे बढ़ाया. सुरक्षित और क्रॉस-प्लैटफ़ॉर्म पुष्टि करने की सुविधा लागू करने और उपयोगकर्ता अनुभव को बेहतर बनाने का तरीका जानें.
NRK ने कहानियों को जीवंत बनाने के लिए, स्क्रोल-ड्रिवन ऐनिमेशन का इस्तेमाल कैसे किया
जानें कि स्क्रोल करने पर चलने वाले और स्क्रोल करने पर ट्रिगर होने वाले ऐनिमेशन, कहानी वाले लेखों को कैसे बेहतर बनाते हैं
Google Search, अनुमान लगाने के नियमों का इस्तेमाल कैसे करता है
जानें कि Google Search ने उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, खोज के नतीजों को बिना पहचान ज़ाहिर किए पहले से लोड करने के लिए, अनुमान के नियमों वाले एपीआई का इस्तेमाल कैसे किया
Spotify ने पिक्चर में पिक्चर एपीआई का इस्तेमाल करके Spotify मिनी प्लेयर कैसे बनाया
Spotify मिनी प्लेयर में 'कैनवस हैक' से लेकर 'डॉक्यूमेंट पिक्चर में पिक्चर एपीआई' की मदद से बेहतर अनुभव पाने के बारे में जानें.
:has() केस स्टडी
जानें कि :has() का इस्तेमाल करने से Policybazaar और Tokopedia को क्या फ़ायदे मिलते हैं.
ट्रांज़िशन की केस स्टडी देखें
RedBus, Policybazaar, और Tokopedia सभी, व्यू ट्रांज़िशन एपीआई का इस्तेमाल करते हैं. साथ ही, इनको बेहतर परफ़ॉर्मेंस और बेहतरीन यूज़र इंटरफ़ेस (यूआई) का फ़ायदा मिलता है.
स्क्रोल-ड्रिवन ऐनिमेशन की केस स्टडी
पारदर्शिता बाज़ार, RedBus, और Tokopedia के साथ स्क्रोल करके चलने वाले ऐनिमेशन के फ़ायदों के बारे में जानें.
कंटेनर की क्वेरी से जुड़ी केस स्टडी
RedBus और Tokopedia की कंटेनर क्वेरी के फ़ायदों के बारे में जानें.
पॉपओवर केस स्टडी
Tokopedia अपने ऐप्लिकेशन में कोड की मात्रा कम करने के लिए, Popover API का इस्तेमाल करता है.
Photoshop ने ऐसी फ़ाइलों पर काम करने का तरीका अपनाया जो मेमोरी में फ़िट हो सकने वाली फ़ाइलों से बड़ी हैं
जानें कि Adobe ने अपने लोकप्रिय Photoshop ऐप्लिकेशन के वेब वर्शन पर, उपयोगकर्ताओं को बड़ी फ़ाइलों में भी बदलाव करने की सुविधा कैसे दी. (यह लेख वीडियो के तौर पर भी उपलब्ध है.) साल 2021 में, Adobe ने Chrome की इंजीनियरिंग टीम के साथ मिलकर, Photoshop का
वेक्टर इमेज एडिटिंग ऐप्लिकेशन Boxy SVG, Local Font Access API का इस्तेमाल कैसे करता है, ताकि उपयोगकर्ता अपने पसंदीदा लोकल फ़ॉन्ट चुन सकें
Local Font Access API, उपयोगकर्ता के डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट डेटा को ऐक्सेस करने का तरीका उपलब्ध कराता है. इसमें नाम, स्टाइल, और फ़ैमिली जैसी ज़्यादा जानकारी के साथ-साथ, फ़ॉन्ट फ़ाइलों के रॉ बाइट भी शामिल होते हैं. जानें कि SVG में बदलाव करने
गेम एडिटर कंस्ट्रक्ट 3 किस तरह File System Access API का इस्तेमाल करता है, ताकि उपयोगकर्ता अपने गेम सेव कर सकें
फ़ाइल सिस्टम ऐक्सेस एपीआई, फ़ाइल को पढ़ने, उसमें बदलाव करने, और उसे मैनेज करने की सुविधाएं देता है. जानें कि Construct 3 इस एपीआई का इस्तेमाल कैसे करता है. (यह लेख वीडियो के तौर पर भी उपलब्ध है.) Construct 3 एक गेम एडिटर है. इसे थॉमस और ऐशले गुलेन ने
LEGO® Education, वेब ब्लूटूथ और Web Serial API का इस्तेमाल कैसे करता है
LEGO Education, LEGO मॉडल को कंप्यूटर से कनेक्ट करने जितना हो सके उतना आसान बनाने के लिए, वेब की क्षमता का इस्तेमाल करता है.
फ़ोटो में बदलाव करने वाला ऐप्लिकेशन Photopea, फ़ाइल हैंडलिंग एपीआई का इस्तेमाल किस तरह करता है, ताकि उपयोगकर्ता अपने फ़ाइल एक्सप्लोरर से फ़ाइलें खोल सकें
फ़ाइल मैनेज करने वाले एपीआई की मदद से, वेब ऐप्लिकेशन अपने-आप फ़ाइल हैंडलर के तौर पर रजिस्टर हो जाते हैं. ऐसा उन फ़ाइल फ़ॉर्मैट के लिए किया जाता है जिनमें वे काम कर सकते हैं. जानें कि इमेज एडिटिंग ऐप्लिकेशन Photopea, इस एपीआई का इस्तेमाल कैसे करता है.
केस स्टडी: DevTools की मदद से बेहतर एंगुलर डीबगिंग
Angular को टेस्ट पायलट के तौर पर इस्तेमाल करके, Chrome DevTools और Angular टीम ने मिलकर, आपको डीबग करने का बेहतर अनुभव दिया है. अन्य फ़्रेमवर्क भी इसी तरह के बदलाव भेज सकते हैं.