Chrome हेडलेस मोड

Mathias Bynens

Peter Kvitek

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

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

हेडलेस मोड का इस्तेमाल करना

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

chrome --headless

हेडलेस मोड के पुराने वर्शन का इस्तेमाल करना

पहले, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला मोड, ब्राउज़र के अलग और वैकल्पिक तौर पर लागू होने वाला वर्शन था. इसे Chrome की बाइनरी के हिस्से के तौर पर शिप किया जाता था. इसने //chrome में, Chrome ब्राउज़र का कोई कोड शेयर नहीं किया.

Chrome में अब हेडलेस और हेडफ़ुल मोड एक ही हैं.

फ़िलहाल, हेडलेस मोड का पुराना वर्शन इनके साथ उपलब्ध है:

chrome --headless=old

Puppeteer में

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

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'true', // (default) enables Headless
  // `headless: 'old'` enables old 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'))
  .build();

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

// …

await driver.quit();

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

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

हेडलेस मोड में, ये कमांड-लाइन फ़्लैग उपलब्ध हैं.

--dump-dom

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

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

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

--screenshot

--screenshot फ़्लैग, टारगेट पेज का स्क्रीनशॉट लेता है और उसे मौजूदा वर्किंग डायरेक्ट्री में screenshot.png के तौर पर सेव करता है. यह --window-size फ़्लैग के साथ इस्तेमाल करने पर, खास तौर पर मददगार होता है.

उदाहरण के लिए:

chrome --headless --screenshot --window-size=412,892 https://developer.chrome.com/

--print-to-pdf

--print-to-pdf फ़्लैग, टारगेट पेज को मौजूदा वर्किंग डायरेक्ट्री में output.pdf नाम के PDF के तौर पर सेव करता है. उदाहरण के लिए:

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

इसके अलावा, प्रिंट हेडर (मौजूदा तारीख और समय के साथ) और फ़ुटर (यूआरएल और पेज नंबर के साथ) को हटाने के लिए, --no-pdf-header-footer फ़्लैग जोड़ा जा सकता है.

chrome --headless --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 --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 --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 --print-to-pdf --allow-chrome-scheme-url chrome://gpu

डीबग

बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले मोड में, Chrome दिखता नहीं है. इसलिए, किसी समस्या को हल करना मुश्किल हो सकता है. बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome को ठीक उसी तरह डीबग किया जा सकता है जिस तरह ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome को डीबग किया जाता है.

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

chrome --headless --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 को ऐक्सेस करने और रिमोट हेडलेस टारगेट की जांच करने के लिए, जांच करें पर क्लिक करें. इसमें पेज का लाइव व्यू भी शामिल है.

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

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