ক্রোম হেডলেস মোড

Mathias Bynens

Peter Kvitek

2017 সালে, Chrome 59 হেডলেস মোড প্রবর্তন করেছে, যা আপনাকে কোনো দৃশ্যমান UI ছাড়াই একটি অনুপস্থিত পরিবেশে ব্রাউজার চালাতে দেয়। মূলত, আপনি ক্রোম ছাড়াই ক্রোম চালাতে পারেন।

Puppeteer বা ChromeDriver- এর মতো প্রকল্পগুলির মাধ্যমে ব্রাউজার অটোমেশনের জন্য হেডলেস মোড একটি জনপ্রিয় পছন্দ। এখানে একটি প্রদত্ত URL এর একটি PDF ফাইল তৈরি করতে হেডলেস মোড ব্যবহার করে একটি ন্যূনতম কমান্ড-লাইন উদাহরণ রয়েছে:

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

কিভাবে মাথাবিহীন কাজ করে

হেডলেস এখন কীভাবে কাজ করে তা পর্যালোচনা করার আগে, "পুরানো" হেডলেস কীভাবে কাজ করে তা বোঝা গুরুত্বপূর্ণ। পূর্ববর্তী কমান্ড-লাইন স্নিপেট --headless কমান্ড-লাইন পতাকা ব্যবহার করে, পরামর্শ দেয় যে হেডলেস হল নিয়মিত ক্রোম ব্রাউজারের অপারেশনের একটি মোড। সম্ভবত আশ্চর্যজনকভাবে, এটি আসলে সত্য ছিল না। প্রকৃতপক্ষে, পুরানো হেডলেস একটি পৃথক, বিকল্প ব্রাউজার বাস্তবায়ন ছিল যা একই ক্রোম বাইনারির অংশ হিসাবে পাঠানো হয়েছিল। এটি //chrome এ কোনো Chrome ব্রাউজার কোড শেয়ার করে না।

একটি পৃথক হেডলেস ব্রাউজার প্রয়োগ করা এবং রক্ষণাবেক্ষণ করা অনেক ইঞ্জিনিয়ারিং ওভারহেডের সাথে এসেছে। এবং, হেডলেস একটি পৃথক বাস্তবায়ন হওয়ায় এর নিজস্ব বাগ এবং বৈশিষ্ট্য ছিল যা হেডফুল ক্রোমে উপস্থিত ছিল না। এটি স্বয়ংক্রিয় ব্রাউজার পরীক্ষার জন্য বিভ্রান্তি তৈরি করেছে, যা হেডফুল মোডে পাস করতে পারে কিন্তু হেডলেস মোডে ব্যর্থ হতে পারে, বা বিপরীতভাবে।

আরও, হেডলেস ব্রাউজার এক্সটেনশন ইনস্টলেশনের উপর নির্ভর করে এমন কোনও স্বয়ংক্রিয় পরীক্ষাকে বাদ দিয়েছে। একই অন্য ব্রাউজার-স্তরের ফাংশন জন্য যায়; হেডলেস এর নিজস্ব, আলাদা বাস্তবায়ন না থাকলে, এটি সমর্থিত ছিল না।

Chrome টিম এখন হেডলেস এবং হেডফুল মোডকে একীভূত করেছে৷

Chrome 112 থেকে নতুন হেডলেস মোড উপলব্ধ৷ এই মোডে, Chrome কোনো প্ল্যাটফর্ম উইন্ডো তৈরি করে, কিন্তু প্রদর্শন করে না৷ অন্যান্য সমস্ত ফাংশন, বিদ্যমান এবং ভবিষ্যত, কোন সীমাবদ্ধতা ছাড়াই উপলব্ধ।

হেডলেস মোড ব্যবহার করুন

নতুন হেডলেস মোড ব্যবহার করতে, --headless=new কমান্ড-লাইন পতাকা পাস করুন:

chrome --headless=new

আপাতত, পুরানো হেডলেস মোড এখনও এর সাথে উপলব্ধ:

chrome --headless=old

দ্রষ্টব্য: একটি সুস্পষ্ট মান ছাড়া --headless কমান্ড-লাইন পতাকা পাস করা এখনও পুরানো হেডলেস মোড সক্রিয় করে, কিন্তু আমরা এই ডিফল্ট পরিবর্তন করতে চাই। আমরা ক্রোম বাইনারি থেকে পুরানো হেডলেস মুছে ফেলতে চাই এবং 2024 সালে পাপেটিয়ারে এই মোডটিকে সমর্থন করা বন্ধ করতে চাই। একই সাথে, যারা এখনও আপগ্রেড করতে পারেননি তাদের জন্য আমরা পুরানো হেডলেস মোডটিকে একটি স্বতন্ত্র বাইনারি হিসাবে উপলব্ধ করব।

পুতুলে

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

সেলেনিয়াম-ওয়েবড্রাইভারে

সেলেনিয়াম-ওয়েবড্রাইভারে নতুন হেডলেস মোড ব্যবহার করতে:

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

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

// …

await driver.quit();

অন্যান্য ভাষার বাইন্ডিং ব্যবহার করে উদাহরণ সহ আরও তথ্যের জন্য সেলেনিয়াম দলের ব্লগ পোস্টটি দেখুন।

কমান্ড লাইন পতাকা

নিম্নলিখিত কমান্ড-লাইন পতাকাগুলি নতুন হেডলেস মোডে উপলব্ধ।

--dump-dom

--dump-dom পতাকা টার্গেট পৃষ্ঠার ক্রমিক DOM কে stdout এ প্রিন্ট করে। উদাহরণ স্বরূপ:

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

এটি HTML সোর্স কোড প্রিন্ট করার থেকে আলাদা, যা আপনি curl দিয়ে করতে পারেন। আপনাকে --dump-dom এর আউটপুট আনতে, Chrome প্রথমে HTML কোডকে একটি DOM-এ পার্স করে, DOM-কে পরিবর্তন করতে পারে এমন যেকোনো <script> এক্সিকিউট করে, তারপর সেই 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 নামে একটি পিডিএফ হিসাবে লক্ষ্য পৃষ্ঠাটিকে সংরক্ষণ করে। উদাহরণ স্বরূপ:

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

ঐচ্ছিকভাবে, আপনি প্রিন্ট হেডার (বর্তমান তারিখ এবং সময় সহ) এবং পাদচরণ (URL এবং পৃষ্ঠা নম্বর সহ) বাদ দিতে --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 পতাকা ক্রোমকে পিডিএফ প্রিন্ট করার আগে 5 সেকেন্ড পর্যন্ত অপেক্ষা করতে বলে। সুতরাং, এই প্রক্রিয়াটি চালানোর জন্য সর্বাধিক 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 সেকেন্ড পরে পৃষ্ঠার অবস্থা ক্যাপচার করবেন এবং পিডিএফ হিসাবে সংরক্ষণ করবেন তা এখানে:

chrome --headless=new --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time

--allow-chrome-scheme-url

chrome:// URL গুলি অ্যাক্সেস করার জন্য --allow-chrome-scheme-url পতাকা প্রয়োজন৷ এই পতাকাটি Chrome 123 থেকে উপলব্ধ। এখানে একটি উদাহরণ দেওয়া হল:

chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu

ডিবাগ

হেডলেস মোডে ক্রোম কার্যকরভাবে অদৃশ্য হওয়ায় সমস্যা সমাধান করা কঠিন মনে হতে পারে। হেডফুল ক্রোমের মতোই হেডলেস ক্রোমকে এমনভাবে ডিবাগ করা সম্ভব।

--remote-debugging-port কমান্ড-লাইন পতাকা সহ হেডলেস মোডে Chrome লঞ্চ করুন।

chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/

এটি stdout এ একটি অনন্য WebSocket URL প্রিন্ট করে, উদাহরণস্বরূপ:

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

একটি হেডফুল ক্রোম উদাহরণে, আমরা তখন হেডলেস টার্গেটের সাথে সংযোগ করতে এবং এটি পরিদর্শন করতে Chrome DevTools রিমোট ডিবাগিং ব্যবহার করতে পারি।

1. chrome://inspect এ যান এবং Configure… বোতামে ক্লিক করুন।
2. WebSocket URL থেকে IP ঠিকানা এবং পোর্ট নম্বর লিখুন।
   • আগের উদাহরণে, আমি প্রবেশ করেছি 127.0.0.1:60926 ।
3. সম্পন্ন ক্লিক করুন. আপনি একটি রিমোট টার্গেট দেখতে পাবেন তার সমস্ত ট্যাব এবং তালিকাভুক্ত অন্যান্য টার্গেট সহ।
4. Chrome DevTools অ্যাক্সেস করতে পরিদর্শনে ক্লিক করুন এবং পৃষ্ঠাটির একটি লাইভ ভিউ সহ দূরবর্তী হেডলেস লক্ষ্য পরিদর্শন করুন৷

প্রতিক্রিয়া

আমরা নতুন হেডলেস মোড সম্পর্কে আপনার প্রতিক্রিয়া শোনার জন্য উন্মুখ। কোনো সমস্যার সম্মুখীন হলে, একটি বাগ ফাইল করুন ।