Chrome हेडलेस मोड

Mathias Bynens
Peter Kvitek
Peter Kvitek

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

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

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

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

हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) के काम करने के तरीके की समीक्षा करने से पहले, यह जानना ज़रूरी है कि "पुराना" बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chromebook काम कर रहा है. पिछला कमांड-लाइन स्निपेट, --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 सबसे पहले एचटीएमएल को पार्स करता है कोड को DOM में बदलकर, किसी भी <script> को एक्ज़ीक्यूट करता है जो DOM को बदल सकता है. उस DOM को वापस HTML की एक सीरियल स्ट्रिंग में बदल देता है.

--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 को प्रिंट करने से पहले 5 सेकंड तक इंतज़ार करने के लिए कहता है है. इसलिए, इस प्रोसेस को चलने में ज़्यादा से ज़्यादा पांच सेकंड लगते हैं.

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

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

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

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

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