DevTools এ নতুন কি আছে (Chrome 65)

কেইস বাস্ক
Kayce Basques
X GitHub

Chrome 65-এ DevTools-এ আসা নতুন বৈশিষ্ট্যগুলির মধ্যে রয়েছে:

নীচে এই রিলিজ নোটগুলির ভিডিও সংস্করণটি পড়ুন, অথবা দেখুন।

স্থানীয় ওভাররাইড

লোকাল ওভাররাইড আপনাকে DevTools-এ পরিবর্তন করতে দেয় এবং পৃষ্ঠা লোডের সময় সেই পরিবর্তনগুলি ধরে রাখতে দেয়। পূর্বে, DevTools-এ করা যেকোনো পরিবর্তন পৃষ্ঠাটি পুনরায় লোড করার সময় হারিয়ে যেত। লোকাল ওভাররাইড কয়েকটি ব্যতিক্রম ছাড়া বেশিরভাগ ফাইল প্রকারের জন্য কাজ করে। সীমাবদ্ধতা দেখুন।

লোকাল ওভাররাইড ব্যবহার করে পৃষ্ঠা লোড জুড়ে একটি CSS পরিবর্তন অব্যাহত রাখা।

চিত্র ১. লোকাল ওভাররাইড ব্যবহার করে পৃষ্ঠা লোড জুড়ে CSS পরিবর্তন অব্যাহত রাখা

কিভাবে এটা কাজ করে:

  • আপনি একটি ডিরেক্টরি নির্দিষ্ট করেন যেখানে DevTools পরিবর্তনগুলি সংরক্ষণ করবে।
  • যখন আপনি DevTools-এ পরিবর্তন করেন, তখন DevTools পরিবর্তিত ফাইলের একটি কপি আপনার ডিরেক্টরিতে সংরক্ষণ করে।
  • যখন আপনি পৃষ্ঠাটি পুনরায় লোড করেন, তখন DevTools নেটওয়ার্ক রিসোর্সের পরিবর্তে স্থানীয়, পরিবর্তিত ফাইলটি পরিবেশন করে।

স্থানীয় ওভাররাইড সেট আপ করতে:

  1. সোর্স প্যানেলটি খুলুন।

  2. ওভাররাইড ট্যাবটি খুলুন।

    ওভাররাইড ট্যাব

    চিত্র ২। ওভাররাইড ট্যাব

  3. সেটআপ ওভাররাইডস ক্লিক করুন।

  4. আপনার পরিবর্তনগুলি কোন ডিরেক্টরিতে সংরক্ষণ করতে চান তা নির্বাচন করুন।

  5. আপনার ভিউপোর্টের উপরে, DevTools-কে ডিরেক্টরিতে পড়ার এবং লেখার অ্যাক্সেস দিতে Allow- এ ক্লিক করুন।

  6. আপনার পরিবর্তনগুলি করুন।

সীমাবদ্ধতা

  • DevTools এলিমেন্টস প্যানেলের DOM ট্রিতে করা পরিবর্তনগুলি সংরক্ষণ করে না। পরিবর্তে Sources প্যানেলে HTML সম্পাদনা করুন।
  • যদি আপনি Styles প্যানেলে CSS সম্পাদনা করেন এবং সেই CSS এর উৎস একটি HTML ফাইল হয়, তাহলে DevTools পরিবর্তনটি সংরক্ষণ করবে না। পরিবর্তে Sources প্যানেলে HTML ফাইলটি সম্পাদনা করুন।
  • ওয়ার্কস্পেস । DevTools স্বয়ংক্রিয়ভাবে নেটওয়ার্ক রিসোর্সগুলিকে স্থানীয় সংগ্রহস্থলে ম্যাপ করে। যখনই আপনি DevTools-এ কোনও পরিবর্তন করেন, তখন সেই পরিবর্তনটি আপনার স্থানীয় সংগ্রহস্থলেও সংরক্ষিত হয়।

পরিবর্তন ট্যাব

নতুন Changes ট্যাবের মাধ্যমে DevTools-এ আপনার স্থানীয়ভাবে করা পরিবর্তনগুলি ট্র্যাক করুন।

পরিবর্তন ট্যাব

চিত্র ৩। পরিবর্তন ট্যাব

নতুন অ্যাক্সেসিবিলিটি টুল

নতুন অ্যাক্সেসিবিলিটি ফলকটি ব্যবহার করে কোনও উপাদানের অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলি পরীক্ষা করুন এবং কালার পিকারে টেক্সট উপাদানগুলির কনট্রাস্ট অনুপাত পরীক্ষা করুন যাতে নিশ্চিত করা যায় যে এগুলি কম দৃষ্টি প্রতিবন্ধকতা বা রঙ-দৃষ্টির ঘাটতিযুক্ত ব্যবহারকারীদের কাছে অ্যাক্সেসযোগ্য।

অ্যাক্সেসিবিলিটি ফলক

বর্তমানে নির্বাচিত উপাদানের অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলি অনুসন্ধান করতে এলিমেন্টস প্যানেলের অ্যাক্সেসিবিলিটি প্যানটি ব্যবহার করুন।

অ্যাক্সেসিবিলিটি ফলক

চিত্র ৪। অ্যাক্সেসিবিলিটি প্যানে এলিমেন্টস প্যানেলের DOM ট্রিতে বর্তমানে নির্বাচিত উপাদানটির ARIA বৈশিষ্ট্য এবং গণনাকৃত বৈশিষ্ট্যগুলি দেখানো হয়েছে, পাশাপাশি অ্যাক্সেসিবিলিটি ট্রিতে এর অবস্থানও দেখানো হয়েছে।

অ্যাক্সেসিবিলিটি প্যানটি কীভাবে কাজ করছে তা দেখতে নীচের লেবেলিংয়ে রব ডডসনের A11ycast দেখুন।

কালার পিকারে কনট্রাস্ট অনুপাত

কালার পিকার এখন আপনাকে টেক্সট এলিমেন্টের কনট্রাস্ট রেশিও দেখাবে। টেক্সট এলিমেন্টের কনট্রাস্ট রেশিও বাড়ালে আপনার সাইটটি কম দৃষ্টিশক্তির সমস্যা বা রঙ-দৃষ্টির ঘাটতিযুক্ত ব্যবহারকারীদের কাছে আরও অ্যাক্সেসযোগ্য হয়ে উঠবে। কনট্রাস্ট রেশিও কীভাবে অ্যাক্সেসযোগ্যতাকে প্রভাবিত করে সে সম্পর্কে আরও জানতে রঙ এবং কনট্রাস্ট দেখুন।

আপনার টেক্সট এলিমেন্টের রঙের বৈপরীত্য উন্নত করলে আপনার সাইটটি সকল ব্যবহারকারীর জন্য আরও ব্যবহারযোগ্য হয়ে ওঠে। অন্য কথায়, যদি আপনার টেক্সট ধূসর এবং সাদা ব্যাকগ্রাউন্ডের হয়, তাহলে তা পড়া কারো পক্ষে কঠিন হবে।

হাইলাইট করা H1 উপাদানের বৈসাদৃশ্য অনুপাত পরীক্ষা করা হচ্ছে।

চিত্র ৫। হাইলাইট করা h1 উপাদানের বৈসাদৃশ্য অনুপাত পরীক্ষা করা

চিত্র ৫- এ, ৪.৬১-এর পাশে দুটি চেকমার্কের অর্থ হল এই উপাদানটি উন্নত প্রস্তাবিত বৈসাদৃশ্য অনুপাত (AAA) পূরণ করে। যদি এটিতে কেবল একটি চেকমার্ক থাকে, তাহলে এর অর্থ হবে এটি সর্বনিম্ন প্রস্তাবিত বৈসাদৃশ্য অনুপাত (AA) পূরণ করেছে।

আরও দেখান ক্লিক করুন আরও দেখান কনট্রাস্ট রেশিও বিভাগটি প্রসারিত করতে। কালার স্পেকট্রাম বাক্সের সাদা রেখাটি প্রস্তাবিত কনট্রাস্ট রেশিও পূরণ করে এমন রঙ এবং যেগুলি পূরণ করে না তার মধ্যে সীমানা নির্দেশ করে। উদাহরণস্বরূপ, যেহেতু চিত্র 6- এর ধূসর রঙ সুপারিশ পূরণ করে, তার মানে হল সাদা রেখার নীচের সমস্ত রঙও সুপারিশ পূরণ করে।

সম্প্রসারিত বৈপরীত্য অনুপাত বিভাগ।

চিত্র ৬। বর্ধিত বৈপরীত্য অনুপাত বিভাগ

অডিট প্যানেলে একটি স্বয়ংক্রিয় অ্যাক্সেসিবিলিটি অডিট রয়েছে যা নিশ্চিত করে যে একটি পৃষ্ঠার প্রতিটি টেক্সট উপাদানের পর্যাপ্ত বৈসাদৃশ্য অনুপাত রয়েছে।

অ্যাক্সেসিবিলিটি পরীক্ষা করার জন্য অডিট প্যানেল কীভাবে ব্যবহার করবেন তা জানতে Chrome DevTools-এ Run Lighthouse দেখুন, অথবা নীচের A11ycast দেখুন।

নতুন অডিট

Chrome 65 সম্পূর্ণ নতুন ধরণের SEO অডিট এবং অনেক নতুন পারফরম্যান্স অডিট নিয়ে আসে।

নতুন SEO অডিট

নতুন SEO বিভাগের প্রতিটি অডিটে আপনার পৃষ্ঠাগুলি পাস করছে কিনা তা নিশ্চিত করা আপনার সার্চ ইঞ্জিন র‍্যাঙ্কিং উন্নত করতে সাহায্য করতে পারে।

নতুন SEO বিভাগ অডিট।

চিত্র ৭। অডিটের নতুন SEO বিভাগ

নতুন কর্মক্ষমতা নিরীক্ষা

Chrome 65 অনেক নতুন পারফরম্যান্স অডিটও সরবরাহ করে:

  • জাভাস্ক্রিপ্ট বুট-আপের সময় বেশি
  • স্ট্যাটিক অ্যাসেটের উপর অদক্ষ ক্যাশে নীতি ব্যবহার করে
  • পৃষ্ঠা পুনঃনির্দেশনা এড়িয়ে চলে
  • ডকুমেন্ট প্লাগইন ব্যবহার করে
  • সিএসএস মিনিফাই করুন
  • জাভাস্ক্রিপ্ট মিনিফাই করুন

পারফর্মেন্স গুরুত্বপূর্ণ! মাইনেট তাদের পেজ লোড স্পিড ৪ গুণ উন্নত করার পর, ব্যবহারকারীরা সাইটে ৪৩% বেশি সময় ব্যয় করেছেন, ৩৪% বেশি পেজ দেখেছেন, বাউন্স রেট ২৪% কমেছে এবং প্রতি আর্টিকেল পেজভিউতে আয় ২৫% বেড়েছে। আরও জানুন ।

টিপস! যদি আপনি আপনার পৃষ্ঠাগুলির লোড কর্মক্ষমতা উন্নত করতে চান, কিন্তু কোথা থেকে শুরু করবেন তা জানেন না, তাহলে অডিট প্যানেলটি ব্যবহার করে দেখুন। আপনি এটিকে একটি URL দেন এবং এটি আপনাকে সেই পৃষ্ঠাটি কীভাবে উন্নত করতে পারেন তার বিভিন্ন উপায়ের একটি বিস্তারিত প্রতিবেদন দেয়। শুরু করুন ।

অন্যান্য আপডেট

কর্মীদের সাথে নির্ভরযোগ্য কোড স্টেপিং এবং অ্যাসিঙ্ক্রোনাস কোড

Chrome 65 Step Into- তে আপডেট নিয়ে এসেছে ধাপে ধাপে থ্রেড এবং অ্যাসিঙ্ক্রোনাস কোডের মধ্যে বার্তা প্রেরণকারী কোডে পদক্ষেপ নেওয়ার সময় বোতাম। আপনি যদি পূর্ববর্তী পদক্ষেপের আচরণ চান, তাহলে আপনি নতুন পদক্ষেপ ব্যবহার করতে পারেন ধাপ পরিবর্তে, বোতাম।

থ্রেডের মধ্যে বার্তা প্রেরণকারী কোডে প্রবেশ করা

যখন আপনি এমন কোডে প্রবেশ করেন যা থ্রেডগুলির মধ্যে বার্তা প্রেরণ করে, তখন DevTools এখন আপনাকে প্রতিটি থ্রেডে কী ঘটে তা দেখায়।

উদাহরণস্বরূপ, চিত্র ৮- এর অ্যাপটি প্রধান থ্রেড এবং কর্মী থ্রেডের মধ্যে একটি বার্তা প্রেরণ করে। প্রধান postMessage() কলে প্রবেশ করার পর, DevTools কর্মী থ্রেডে onmessage হ্যান্ডলারে বিরতি দেয়। onmessage হ্যান্ডলার নিজেই প্রধান থ্রেডে একটি বার্তা পোস্ট করে। সেই কলে প্রবেশ করলে DevTools মূল থ্রেডে ফিরে আসে।

Chrome 65-এ মেসেজ-পাসিং কোডে পা রাখা।

চিত্র ৮। Chrome 65-এ মেসেজ-পাসিং কোডে প্রবেশ করা

যখন আপনি Chrome এর পূর্ববর্তী সংস্করণগুলিতে এই ধরণের কোডে প্রবেশ করেছিলেন, তখন Chrome আপনাকে কেবল কোডের মূল-থ্রেড-সাইডটি দেখিয়েছিল, যেমনটি আপনি চিত্র 9 এ দেখতে পাচ্ছেন।

Chrome 63-এ মেসেজ-পাসিং কোডে পা রাখা।

চিত্র ৯। Chrome 63-এ মেসেজ-পাসিং কোডে প্রবেশ করা

অ্যাসিঙ্ক্রোনাস কোডে পা রাখা

অ্যাসিঙ্ক্রোনাস কোডে পা রাখার সময়, DevTools এখন ধরে নেয় যে আপনি অ্যাসিঙ্ক্রোনাস কোডটি থামাতে চান যা অবশেষে চলে।

উদাহরণস্বরূপ, চিত্র ১০- এ setTimeout() এ পা রাখার পর, DevTools পর্দার আড়ালে সেই বিন্দু পর্যন্ত সমস্ত কোড চালায়, এবং তারপর setTimeout() এ পাস করা ফাংশনে বিরতি দেয়।

Chrome 65-এ অ্যাসিঙ্ক্রোনাস কোডে পা রাখা।

চিত্র ১০। Chrome 65-এ অ্যাসিঙ্ক্রোনাস কোডে প্রবেশ করা

যখন আপনি Chrome 63-এ এই ধরণের কোডে পা রাখেন, তখন DevTools কোডে বিরতি দেয় কারণ এটি কালানুক্রমিকভাবে চলে, যেমনটি আপনি চিত্র 11- এ দেখতে পাচ্ছেন।

Chrome 63-এ অ্যাসিঙ্ক্রোনাস কোডে পা রাখা।

চিত্র ১১। Chrome 63-এ অ্যাসিঙ্ক্রোনাস কোডে প্রবেশ করা

পারফরম্যান্স প্যানেলে একাধিক রেকর্ডিং

পারফরম্যান্স প্যানেল এখন আপনাকে অস্থায়ীভাবে ৫টি পর্যন্ত রেকর্ডিং সংরক্ষণ করতে দেয়। আপনার DevTools উইন্ডোটি বন্ধ করলে রেকর্ডিংগুলি মুছে ফেলা হয়। পারফরম্যান্স প্যানেলের সাথে আরাম পেতে "রানটাইম পারফরম্যান্স বিশ্লেষণ শুরু করুন" দেখুন।

পারফরম্যান্স প্যানেলে একাধিক রেকর্ডিংয়ের মধ্যে নির্বাচন করা।

চিত্র ১২। পারফরম্যান্স প্যানেলে একাধিক রেকর্ডিংয়ের মধ্যে নির্বাচন করা

বোনাস: Puppeteer 1.0 দিয়ে DevTools অ্যাকশনগুলি স্বয়ংক্রিয় করুন

Chrome DevTools টিম দ্বারা পরিচালিত একটি ব্রাউজার অটোমেশন টুল, Puppeteer-এর সংস্করণ 1.0 এখন বাজারে এসেছে। আপনি Puppeteer ব্যবহার করে অনেক কাজ স্বয়ংক্রিয় করতে পারেন যা পূর্বে শুধুমাত্র DevTools-এর মাধ্যমে উপলব্ধ ছিল, যেমন স্ক্রিনশট ক্যাপচার করা:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

এটিতে পিডিএফ তৈরির মতো অনেক সাধারণভাবে কার্যকর অটোমেশন কাজের জন্য API রয়েছে:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

আরও জানতে "কুইক স্টার্ট" দেখুন।

আপনি DevTools খোলার আগে DevTools এর বৈশিষ্ট্যগুলি ব্রাউজ করার সময় Puppeteer ব্যবহার করতে পারেন। উদাহরণের জন্য DevTools খোলা ছাড়াই DevTools বৈশিষ্ট্যগুলি ব্যবহার করা দেখুন।

প্রিভিউ চ্যানেলগুলি ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev , অথবা Beta ব্যবহার করার কথা বিবেচনা করুন। এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

DevTools সম্পর্কিত নতুন বৈশিষ্ট্য, আপডেট বা অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন।

DevTools-এ নতুন কী আছে

DevTools সিরিজে নতুন কী কী বিষয় অন্তর্ভুক্ত করা হয়েছে তার একটি তালিকা।