Chrome का बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला मोड अब और बेहतर हो गया है!
Chrome का बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला मोड अब और बेहतर हो गया है! यह लेख, हेडलेस को Chrome के सामान्य "हेडफ़ुल" मोड के करीब लाकर, डेवलपर के लिए हेडलेस को ज़्यादा काम का बनाने के लिए हाल ही में की गई इंजीनियरिंग की कोशिशों की खास जानकारी देता है.
बैकग्राउंड
साल 2017 में, Chrome 59 में बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला ब्राउज़र चलाने की सुविधा थी. इसे हेडलेस मोड कहा जाता था. इसकी मदद से, उपयोगकर्ता बिना किसी परेशानी के ब्राउज़र को यूज़र इंटरफ़ेस (यूआई) के बिना चला सकते हैं. वाकई में, Chrome के बिना Chrome चलाना!
हेडलेस मोड, ब्राउज़र ऑटोमेशन के लिए Puppeteer या ChromeDriver जैसे प्रोजेक्ट का लोकप्रिय विकल्प है. किसी यूआरएल की PDF फ़ाइल बनाने के लिए, हेडलेस मोड का इस्तेमाल करने का एक छोटा सा कमांड-लाइन उदाहरण यहां दिया गया है:
chrome --headless --print-to-pdf https://developer.chrome.com/
हेडलेस में नया क्या है?
हाल के हेडलेस सुधारों के बारे में विस्तार से जानने से पहले, यह समझना ज़रूरी है कि "पुराने" हेडलेस ने कैसे काम किया. हमने पहले जो कमांड लाइन स्निपेट दिखाया था वह --headless के कमांड लाइन फ़्लैग का इस्तेमाल करता है. इससे यह पता चलता है कि 'हेडलेस' का इस्तेमाल, सामान्य Chrome ब्राउज़र पर किया जा सकता है. हैरानी की बात है कि यह असल में सच नहीं था. तकनीकी रूप से, पुराना हेडलेस, एक अलग और वैकल्पिक ब्राउज़र लागू था, जिसे उसी Chrome बाइनरी के हिस्से के तौर पर शिप किया गया था. यह सुविधा, //chrome में Chrome ब्राउज़र के किसी भी कोड को शेयर नहीं करती.
जैसा कि आप कल्पना कर सकते हैं, इस अलग हेडलेस ब्राउज़र को लागू करने और बनाए रखने के लिए इंजीनियरिंग के बहुत सारे काम सामने आए — लेकिन यही एक समस्या नहीं थी. हेडलेस एक अलग तरह की सुविधा है, इसलिए इसमें कुछ ऐसी गड़बड़ियां और सुविधाएं थीं जो हेडफ़ुल Chrome में मौजूद नहीं थीं. इससे एक उलझन की स्थिति पैदा हो गई कि कोई भी ऑटोमेटेड ब्राउज़र टेस्ट, हेडफ़ुल मोड में पास हो सकता है, लेकिन हेडलेस मोड में फ़ेल हो सकता है या हेडलेस मोड में फ़ेल हो सकता है. यह ऑटोमेशन इंजीनियर के लिए बहुत बड़ी समस्या है. उदाहरण के लिए, अगर किसी ब्राउज़र एक्सटेंशन को इंस्टॉल करने की ज़रूरत होती थी, तो ऑटोमेटेड टेस्टिंग को इसमें शामिल नहीं किया गया था. यही बात ब्राउज़र-लेवल के अन्य फ़ंक्शन पर भी लागू होती है: जब तक हेडलेस को अलग से लागू नहीं किया जाता, तब तक यह काम नहीं करता.
साल 2021 में, Chrome की टीम ने इस समस्या को हल करने और हेडलेस और हेडफ़ुल मोड को एक साथ इस्तेमाल करने की तैयारी की.
हमें यह बताते हुए खुशी हो रही है कि नया हेडलेस मोड अब Chrome 112 में उपलब्ध है! इस मोड में, Chrome कोई भी प्लैटफ़ॉर्म विंडो बनाता है, लेकिन उसे नहीं दिखाता है. मौजूदा और आने वाले समय की सभी सुविधाएं बिना किसी सीमा के उपलब्ध हैं.
नया हेडलेस आज़माएं
नया हेडलेस मोड आज़माने के लिए, --headless=new कमांड लाइन फ़्लैग पास करें:
chrome --headless=new
फ़िलहाल, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला पुराना मोड अब भी इनके ज़रिए उपलब्ध है:
chrome --headless=old
फ़िलहाल, किसी खास वैल्यू के बिना --headless कमांड लाइन फ़्लैग को पास करने पर, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला पुराना मोड चालू रहता है. हालांकि, हम आने वाले समय में इस डिफ़ॉल्ट सुविधा को नए हेडलेस मोड में बदलने की योजना बना रहे हैं.
हम इस साल के आखिर में, Chrome बाइनरी से पुराने हेडलेस को पूरी तरह से हटाने और Puppeteer में इस मोड का इस्तेमाल बंद करने की योजना बना रहे हैं. इस हटाए जाने के तहत, हम पुराने हेडलेस को उन उपयोगकर्ताओं के लिए एक अलग स्टैंडअलोन बाइनरी के तौर पर उपलब्ध कराएंगे जो अभी अपग्रेड नहीं कर सकते.
पपीटीयर में बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले नए गेम
Puppeteer में बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले नए मोड में ऑप्ट-इन करने के लिए:
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: 'new',
// `headless: true` (default) enables old Headless;
// `headless: 'new'` enables new Headless;
// `headless: false` enables "headful" mode.
});
const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');
// …
await browser.close();
Selenium-WebDriver में बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले नए गेम
Selenium-WebDriver में नए हेडलेस मोड का इस्तेमाल करने के लिए:
const driver = await env
.builder()
.setChromeOptions(options.addArguments('--headless=new'))
.build();
await driver.get('https://developer.chrome.com/');
// …
await driver.quit();
ज़्यादा जानकारी के लिए, Seleenium टीम का ब्लॉग पोस्ट देखें. इसमें दूसरी लैंग्वेज बाइंडिंग का इस्तेमाल करने के उदाहरण भी शामिल हैं.
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले खास कमांड लाइन फ़्लैग
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले नए मोड के लिए, यहां दिए गए कमांड लाइन फ़्लैग उपलब्ध हैं.
--dump-dom
--dump-dom फ़्लैग, टारगेट पेज के सीरियल किए गए डीओएम को stdout पर प्रिंट करता है. यहां एक उदाहरण दिया गया है:
chrome --headless=new --dump-dom https://developer.chrome.com/
ध्यान दें कि यह सिर्फ़ एचटीएमएल सोर्स कोड को प्रिंट करने से अलग है (जो आप curl के साथ कर सकते हैं). --dump-dom का आउटपुट पाने के लिए Chrome, सबसे पहले एचटीएमएल कोड को DOM में पार्स करता है, किसी भी ऐसे <script> को एक्ज़ीक्यूट करता है जो DOM को बदल सकता है और फिर उस DOM को वापस एचटीएमएल के सीरियल स्ट्रिंग में बदल देता है.
--screenshot
--screenshot फ़्लैग, टारगेट पेज का स्क्रीनशॉट लेता है और उसे मौजूदा डायरेक्ट्री में screenshot.png के तौर पर सेव करता है. यह खास तौर पर, --window-size फ़्लैग के साथ काम करता है. यहां एक उदाहरण दिया गया है:
chrome --headless=new --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
--print-to-pdf फ़्लैग, टारगेट पेज को मौजूदा डायरेक्ट्री में output.pdf नाम की PDF फ़ाइल के तौर पर सेव करता है. यहां एक उदाहरण दिया गया है:
chrome --headless=new --print-to-pdf https://developer.chrome.com/
इसके अलावा, प्रिंट हेडर (मौजूदा तारीख और समय के साथ) और फ़ुटर (यूआरएल और पेज नंबर के साथ) को छोड़ने के लिए, --no-pdf-header-footer फ़्लैग जोड़ा जा सकता है.
chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
--timeout
--timeout फ़्लैग, इंतज़ार का ज़्यादा से ज़्यादा समय (मिलीसेकंड में) तय करता है, जिसके बाद --dump-dom, --screenshot, और --print-to-pdf पेज की सामग्री को कैप्चर करते हैं, भले ही पेज अब भी लोड हो रहा हो.
chrome --headless=new --print-to-pdf --timeout=5000 https://developer.chrome.com/
--timeout=5000 फ़्लैग, Chrome को PDF प्रिंट करने से पहले पांच सेकंड तक इंतज़ार करने के लिए कहता है. इसलिए, इस प्रोसेस को चलने में पांच सेकंड तक लग सकते हैं.
--virtual-time-budget
--virtual-time-budget से समय की यात्रा की सुविधा मिलती है! कुछ हद तक. वर्चुअल टाइम, किसी भी समय पर निर्भर कोड के लिए "फ़ास्ट-फ़ॉरवर्ड" की तरह काम करता है. उदाहरण के लिए, setTimeout/setInterval. यह ब्राउज़र को हर समय, पेज के किसी भी कोड को तेज़ी से चलाने के लिए मजबूर करता है. साथ ही, पेज को लगता है कि समय बीतता जा रहा है.
इसके इस्तेमाल को समझने के लिए, इस डेमो पेज पर जाएं. यह पेज हर सेकंड बढ़ता है, लॉग होता है, और काउंटर को हर सेकंड दिखाता है. इसके लिए, setTimeout(fn, 1000) का इस्तेमाल करें. यहां काम का कोड दिया गया है:
<output>0</output>
<script>
const element = document.querySelector('output');
let counter = 0;
setInterval(() => {
counter++;
console.log(counter);
element.textContent = counter;
}, 1_000);
</script>
एक सेकंड के बाद, पेज में "1" शामिल होता है; दो सेकंड के बाद, "2" वगैरह. यहां बताया गया है कि 42 सेकंड के बाद, पेज की स्थिति को कैप्चर करके PDF के तौर पर कैसे सेव किया जा सकता है:
chrome --headless=new --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time
--allow-chrome-scheme-url
chrome:// यूआरएल को ऐक्सेस करने के लिए --allow-chrome-scheme-url फ़्लैग ज़रूरी है. यह फ़्लैग Chrome 123 और उसके बाद के वर्शन में उपलब्ध है. यहां एक उदाहरण दिया गया है:
chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu
डीबग करना
Chrome हेडलेस मोड में काम नहीं करता, इसलिए यह पता लगाना मुश्किल हो सकता है कि कोई समस्या है या नहीं. सौभाग्य से, हेडलेस Chrome को इस तरह डीबग करना संभव है जो हेडफ़ुल Chrome के समान है. यह कोशिश है कि Chrome को हेडलेस मोड में --remote-debugging-port कमांड लाइन फ़्लैग के साथ लॉन्च किया जाए.
chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/
यह stdout पर एक यूनीक WebSocket यूआरएल प्रिंट करता है, उदाहरण के लिए:
DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9
सामान्य रूप से Chrome इंस्टेंस में, हेडलेस टारगेट से कनेक्ट करने और उसकी जांच करने के लिए, हम Chrome DevTools रिमोट डीबगिंग का इस्तेमाल कर सकते हैं. ऐसा करने के लिए, chrome://inspect पर जाएं और कॉन्फ़िगर करें... बटन पर क्लिक करें. इसके बाद, WebSocket यूआरएल से आईपी पता और पोर्ट नंबर डालें. ऊपर दिए गए उदाहरण में, मैंने 127.0.0.1:60926 डाला है. हो गया पर क्लिक करें. ऐसा करने पर आपको रिमोट टारगेट अपने सभी टैब और नीचे दिए गए अन्य टारगेट के साथ दिखेगा. inspect पर क्लिक करें. अब आपके पास रिमोट हेडलेस टारगेट की जांच करने वाला Chrome DevTools का ऐक्सेस है. इसमें inspect!
सुझाव/राय दें या शिकायत करें
हमें नए हेडलेस मोड के बारे में आपके सुझाव का इंतज़ार रहेगा. अगर आपको कोई समस्या होती है, तो कृपया उनकी शिकायत करें.