ক্রোমের হেডলেস মোড এখন অনেক ভালো হয়েছে!
ক্রোমের হেডলেস মোড এখন অনেক ভালো হয়েছে! এই নিবন্ধটি হেডলেসকে Chrome-এর নিয়মিত "হেডফুল" মোডের কাছাকাছি এনে হেডলেসকে ডেভেলপারদের জন্য আরও উপযোগী করে তোলার সাম্প্রতিক ইঞ্জিনিয়ারিং প্রচেষ্টার একটি ওভারভিউ উপস্থাপন করে৷
পটভূমি
2017 সালে , ক্রোম 59 তথাকথিত হেডলেস মোড প্রবর্তন করেছিল, যা আপনাকে কোনও দৃশ্যমান UI ছাড়াই একটি অনুপস্থিত পরিবেশে ব্রাউজার চালাতে দেয়। মূলত, ক্রোম ছাড়াই ক্রোম চলছে!
Puppeteer বা ChromeDriver এর মতো প্রকল্পগুলির মাধ্যমে ব্রাউজার অটোমেশনের জন্য হেডলেস মোড একটি জনপ্রিয় পছন্দ। এখানে একটি প্রদত্ত URL এর একটি PDF ফাইল তৈরি করতে হেডলেস মোড ব্যবহার করার একটি ন্যূনতম কমান্ড-লাইন উদাহরণ রয়েছে:
chrome --headless --print-to-pdf https://developer.chrome.com/
হেডলেস নতুন কি?
আমরা সাম্প্রতিক হেডলেস উন্নতিগুলিতে ডুব দেওয়ার আগে, "পুরানো" হেডলেস কীভাবে কাজ করেছিল তা বোঝা গুরুত্বপূর্ণ। আমরা আগে যে কমান্ড-লাইন স্নিপেটটি দেখিয়েছি সেটি --headless কমান্ড-লাইন পতাকা ব্যবহার করে, পরামর্শ দেয় যে হেডলেস হল নিয়মিত ক্রোম ব্রাউজারের অপারেশনের একটি মোড। সম্ভবত আশ্চর্যজনকভাবে, এটি আসলে সত্য ছিল না। প্রযুক্তিগতভাবে, পুরানো হেডলেস একটি পৃথক, বিকল্প ব্রাউজার বাস্তবায়ন ছিল যা একই ক্রোম বাইনারির অংশ হিসাবে পাঠানো হয়েছিল। এটি //chrome এ কোনো Chrome ব্রাউজার কোড শেয়ার করে না।
আপনি যেমন কল্পনা করতে পারেন, এই পৃথক হেডলেস ব্রাউজারটি বাস্তবায়ন এবং রক্ষণাবেক্ষণের জন্য প্রচুর ইঞ্জিনিয়ারিং ওভারহেড এসেছে — তবে এটিই একমাত্র সমস্যা ছিল না। কারণ হেডলেস একটি পৃথক বাস্তবায়ন ছিল, এটির নিজস্ব বাগ এবং বৈশিষ্ট্য ছিল যা হেডফুল ক্রোমে উপস্থিত ছিল না। এটি একটি বিভ্রান্তিকর পরিস্থিতি তৈরি করেছে যেখানে যেকোনো স্বয়ংক্রিয় ব্রাউজার পরীক্ষা হেডফুল মোডে পাস করতে পারে কিন্তু হেডলেস মোডে ব্যর্থ হতে পারে, বা বিপরীতভাবে - অটোমেশন ইঞ্জিনিয়ারদের জন্য একটি বড় ব্যথার পয়েন্ট। এটি কোনও স্বয়ংক্রিয় পরীক্ষাকেও বাদ দিয়েছে যা ব্রাউজার এক্সটেনশন ইনস্টল করার উপর নির্ভর করে, উদাহরণস্বরূপ। অন্য যেকোন ব্রাউজার-স্তরের কার্যকারিতার ক্ষেত্রেও একই রকম: হেডলেস এর নিজস্ব, আলাদা বাস্তবায়ন না থাকলে, এটি সমর্থিত ছিল না।
2021 সালে, ক্রোম টিম এই সমস্যাটি সমাধান করার জন্য রওনা হয়েছে, এবং মাথাবিহীন এবং হেডফুল মোডগুলিকে একবার এবং সকলের জন্য একত্রিত করেছে।
আমরা ঘোষণা করতে পেরে আনন্দিত যে নতুন হেডলেস মোড এখন Chrome 112-এ উপলব্ধ! এই মোডে, Chrome তৈরি করে কিন্তু কোনো প্ল্যাটফর্ম উইন্ডো প্রদর্শন করে না। অন্যান্য সমস্ত কার্যকারিতা, বিদ্যমান এবং ভবিষ্যতে, কোন সীমাবদ্ধতা ছাড়াই উপলব্ধ।
নতুন হেডলেস ব্যবহার করে দেখুন
নতুন হেডলেস মোড চেষ্টা করতে, --headless=new কমান্ড-লাইন পতাকা পাস করুন:
chrome --headless=new
আপাতত, পুরানো হেডলেস মোড এখনও এর মাধ্যমে উপলব্ধ:
chrome --headless=old
বর্তমানে, --headless কমান্ড-লাইন পতাকাটি একটি সুস্পষ্ট মান ছাড়াই পাস করা এখনও পুরানো হেডলেস মোডটিকে সক্রিয় করে — তবে আমরা সময়ের সাথে সাথে এই ডিফল্টটিকে নতুন হেডলেস এ পরিবর্তন করার পরিকল্পনা করছি।
আমরা ক্রোম বাইনারি থেকে পুরানো হেডলেসকে সম্পূর্ণরূপে সরিয়ে দেওয়ার পরিকল্পনা করছি এবং এই বছরের শেষের দিকে 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();
সেলেনিয়াম-ওয়েবড্রাইভারে নতুন মাথাবিহীন
সেলেনিয়াম-ওয়েবড্রাইভারে নতুন হেডলেস মোড ব্যবহার করতে:
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-এ পার্স করে, যে কোনো <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 নামে একটি পিডিএফ হিসাবে লক্ষ্য পৃষ্ঠাটিকে সংরক্ষণ করে। এখানে একটি উদাহরণ:
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/
--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: chrome:// URL গুলি অ্যাক্সেস করার জন্য --allow-chrome-scheme-url পতাকা প্রয়োজন৷ এই পতাকাটি Chrome 123 থেকে শুরু করে উপলব্ধ। এখানে একটি উদাহরণ দেওয়া হল:
chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu
ডিবাগিং
হেডলেস মোডে ক্রোম কার্যকরভাবে অদৃশ্য হওয়ার কারণে, সমস্যার ক্ষেত্রে কী ঘটছে তা বের করা কঠিন মনে হতে পারে। সৌভাগ্যবশত, হেডফুল ক্রোমের মতোই হেডলেস ক্রোমকে এমনভাবে ডিবাগ করা সম্ভব। কৌশলটি হল হেডলেস মোডে Chrome-কে --remote-debugging-port কমান্ড-লাইন ফ্ল্যাগ দিয়ে চালু করা।
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 রিমোট ডিবাগিং ব্যবহার করতে পারি। এটি করতে, chrome://inspect এ যান, Configure… বোতামে ক্লিক করুন এবং WebSocket URL থেকে IP ঠিকানা এবং পোর্ট নম্বর লিখুন। উপরের উদাহরণে, আমি প্রবেশ করেছি 127.0.0.1:60926 । সম্পন্ন ক্লিক করুন এবং আপনি একটি দূরবর্তী টার্গেট দেখতে পাবেন যার সমস্ত ট্যাব এবং নীচে তালিকাভুক্ত অন্যান্য লক্ষ্যগুলি সহ প্রদর্শিত হবে৷ পরিদর্শনে ক্লিক করুন এবং আপনার কাছে এখন পৃষ্ঠাটির একটি লাইভ ভিউ সহ দূরবর্তী হেডলেস টার্গেট পরিদর্শন করার জন্য Chrome DevTools-এ অ্যাক্সেস আছে!
প্রতিক্রিয়া
আমরা নতুন হেডলেস মোড সম্পর্কে আপনার প্রতিক্রিয়া শোনার জন্য উন্মুখ। আপনি যদি কোনো সমস্যায় পড়েন, অনুগ্রহ করে তাদের রিপোর্ট করুন ।