Chrome हेडलेस मोड

Mathias Bynens
Peter Kvitek
Peter Kvitek

साल 2017 में, Chrome 59 ने हेडलेस मोड लॉन्च किया. इस मोड की मदद से, ब्राउज़र को यूज़र इंटरफ़ेस (यूआई) के बिना, ऐसी जगह पर चलाया जा सकता है जिसका ऐक्सेस न हो. ज़रूरी है कि आप Chrome के बिना भी Chrome चला सकें.

Puppeteer या ChromeDriver जैसे प्रोजेक्ट के ज़रिए, ब्राउज़र ऑटोमेशन के लिए हेडलेस मोड काफ़ी लोकप्रिय है. यहां दिए गए यूआरएल की PDF फ़ाइल बनाने के लिए, हेडलेस मोड का इस्तेमाल करके, कमांड-लाइन का उदाहरण दिया गया है:

chrome --headless --print-to-pdf https://developer.chrome.com/

बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला ब्राउज़र इस्तेमाल कैसे काम करता है

हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) कैसे काम करती है, इसकी समीक्षा करने से पहले, यह जानना ज़रूरी है कि "पुराना" हेडलेस सिस्टम कैसे काम करता था. पिछले कमांड-लाइन स्निपेट में --headless कमांड लाइन फ़्लैग का इस्तेमाल किया गया है. इससे पता चलता है कि हेडलेस, सामान्य Chrome ब्राउज़र पर सिर्फ़ एक मोड है. हैरानी की बात है कि असल में ऐसा नहीं था. असल में, हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) अलग-अलग और वैकल्पिक ब्राउज़र को लागू करने की सुविधा थी. इसे उसी Chrome बाइनरी के हिस्से के तौर पर शिप किया गया था. //chrome में, Chrome ब्राउज़र का कोई कोड शेयर नहीं किया जाता.

एक अलग हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा देने वाला) ब्राउज़र इस्तेमाल करने और उसे मैनेज करने के लिए, कई काम करने पड़ते हैं. हेडलेस सिस्टम को लागू करने का एक अलग तरीका था. इसलिए, इसमें कुछ गड़बड़ियां और सुविधाएं थीं, जो हेडफ़ुल Chrome में मौजूद नहीं थीं. इससे, ऑटोमेटेड ब्राउज़र के टेस्ट में भ्रम पैदा हो सकता था, जो हेडफ़ुल मोड में पास हो सकता है, लेकिन हेडलेस मोड में या इसके उलटा हो सकता है.

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

Chrome टीम ने अब हेडलेस और हेडफ़ुल मोड को एक साथ जोड़ दिया है.

नए Chrome हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) को अब ब्राउज़र में इस्तेमाल नहीं किया जा सकता. इसकी जगह, अब यह Chrome के साथ कोड शेयर करता है.

Chrome 112 में, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला नया मोड उपलब्ध है. इस मोड में, Chrome कोई प्लैटफ़ॉर्म विंडो बनाता है, लेकिन उसे दिखाता नहीं है. अन्य सभी फ़ंक्शन, चाहे वे मौजूदा हों या आने वाले समय में, बिना किसी सीमा के उपलब्ध हैं.

बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला मोड इस्तेमाल करें

नए हेडलेस मोड का इस्तेमाल करने के लिए, --headless=new कमांड-लाइन फ़्लैग को पास करें:

chrome --headless=new

फ़िलहाल, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला पुराना मोड, अब भी इनके साथ उपलब्ध है:

chrome --headless=old

इन पपीटीयर

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();

Celenium-WebDriver में

Selenium-WebDriver में नए हेडलेस मोड का इस्तेमाल करने के लिए:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless=new'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

ज़्यादा जानकारी के लिए, Selenium टीम की ब्लॉग पोस्ट देखें. इसमें, भाषा की अन्य बाइंडिंग के उदाहरण भी शामिल हैं.

कमांड लाइन फ़्लैग

बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले नए मोड में, यहां दिए गए कमांड लाइन फ़्लैग उपलब्ध हैं.

--dump-dom

--dump-dom फ़्लैग, टारगेट पेज के सीरियल वाले DOM को stdout पर प्रिंट करता है. उदाहरण के लिए:

chrome --headless=new --dump-dom https://developer.chrome.com/

यह एचटीएमएल सोर्स कोड को प्रिंट करने से अलग है. एचटीएमएल सोर्स कोड को curl की मदद से प्रिंट किया जा सकता है. आपको --dump-dom का आउटपुट देने के लिए, Chrome सबसे पहले एचटीएमएल कोड को डीओएम में पार्स करता है और ऐसे किसी भी <script> को एक्ज़ीक्यूट करता है जिससे डीओएम में बदलाव हो सकता है. इसके बाद, उस डीओएम को वापस एचटीएमएल की सीरियल स्ट्रिंग में बदल देता है.

--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/

नहीं: --no-pdf-header-footer फ़्लैग वाली सुविधा पहले --print-to-pdf-no-header फ़्लैग के साथ उपलब्ध थी. अगर पुराने वर्शन का इस्तेमाल किया जा रहा है, तो हो सकता है कि आपको फ़्लैग का पुराना नाम इस्तेमाल करना पड़े.

--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 से काफ़ी मिलता-जुलता है.

--remote-debugging-port कमांड-लाइन फ़्लैग का इस्तेमाल करके, Chrome को हेडलेस मोड में लॉन्च करें.

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 रिमोट डीबगिंग का इस्तेमाल करके, हेडलेस टारगेट से कनेक्ट कर सकते हैं और उसकी जांच कर सकते हैं.

  1. chrome://inspect पर जाएं और कॉन्फ़िगर करें... बटन पर क्लिक करें.
  2. WebSocket यूआरएल से आईपी पता और पोर्ट नंबर डालें.
    • पिछले उदाहरण में, मैंने 127.0.0.1:60926 डाला था.
  3. हो गया पर क्लिक करें. आपको एक रिमोट टारगेट दिखेगा, जिसमें उसके सभी टैब और सूची में मौजूद दूसरे टारगेट दिखेंगे.
  4. Chrome DevTools को ऐक्सेस करने के लिए, जांच करें पर क्लिक करें और रिमोट के बिना किए गए टारगेट की जांच करें. इसमें पेज का लाइव व्यू भी शामिल है.

Chrome DevTools, रिमोट तौर पर बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले टारगेट पेज की जांच कर सकता है

सुझाव/राय दें या शिकायत करें

हमें हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) मोड के बारे में, आपके सुझाव, शिकायत या राय का इंतज़ार रहेगा. अगर कोई समस्या आती है, तो गड़बड़ी की शिकायत करें.