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

Kayce Basques

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

• স্থানীয় ওভাররাইড
• নতুন অ্যাক্সেসিবিলিটি টুল
• পরিবর্তন ট্যাব
• নতুন এসইও এবং কর্মক্ষমতা অডিট
• পারফরম্যান্স প্যানেলে একাধিক রেকর্ডিং
• কর্মীদের সাথে নির্ভরযোগ্য কোড স্টেপিং এবং অ্যাসিঙ্ক্রোনাস কোড

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

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

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

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

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

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

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

1. উৎস প্যানেল খুলুন।

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

   

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

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

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

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

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

সীমাবদ্ধতা

• DevTools এলিমেন্টস প্যানেলের DOM ট্রিতে করা পরিবর্তনগুলি সংরক্ষণ করে না। পরিবর্তে উত্স প্যানেলে HTML সম্পাদনা করুন৷
• আপনি যদি শৈলী ফলকে CSS সম্পাদনা করেন এবং সেই CSS এর উৎস একটি HTML ফাইল হয়, তাহলে DevTools পরিবর্তনটি সংরক্ষণ করবে না। পরিবর্তে উত্স প্যানেলে HTML ফাইলটি সম্পাদনা করুন৷

সম্পর্কিত বৈশিষ্ট্য

• কর্মক্ষেত্র DevTools স্বয়ংক্রিয়ভাবে একটি স্থানীয় সংগ্রহস্থলে নেটওয়ার্ক সংস্থানগুলিকে ম্যাপ করে৷ আপনি যখনই DevTools-এ কোনো পরিবর্তন করেন, সেই পরিবর্তনটি আপনার স্থানীয় সংগ্রহস্থলেও সংরক্ষিত হয়।

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

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

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

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

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

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

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

চিত্র 4 । অ্যাক্সেসিবিলিটি প্যানে বর্তমানে এলিমেন্টস প্যানেলে DOM ট্রিতে নির্বাচিত উপাদানটির জন্য ARIA বৈশিষ্ট্য এবং গণনা করা বৈশিষ্ট্য দেখায়, পাশাপাশি অ্যাক্সেসিবিলিটি ট্রিতে এর অবস্থান

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

কালার পিকারে কনট্রাস্ট রেশিও

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

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

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

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

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

চিত্র 6 । প্রসারিত বৈসাদৃশ্য অনুপাত বিভাগ

সম্পর্কিত বৈশিষ্ট্য

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

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

নতুন অডিট

Chrome 65 এসইও অডিটের সম্পূর্ণ নতুন বিভাগ এবং অনেক নতুন পারফরম্যান্স অডিট সহ প্রেরণ করে।

নতুন এসইও অডিট

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

চিত্র 7 । নিরীক্ষার নতুন এসইও বিভাগ

নতুন কর্মক্ষমতা অডিট

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

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

পারফ ব্যাপার! Mynet তাদের পৃষ্ঠা লোডের গতি 4X দ্বারা উন্নত করার পরে, ব্যবহারকারীরা সাইটে 43% বেশি সময় ব্যয় করেছেন, 34% বেশি পৃষ্ঠা দেখেছেন, বাউন্সের হার 24% কমেছে, এবং প্রতি নিবন্ধ পৃষ্ঠাদর্শন প্রতি 25% আয় বেড়েছে৷ আরও জানুন

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

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

• নতুন, ম্যানুয়াল অ্যাক্সেসিবিলিটি অডিট
• অন্যান্য পরবর্তী প্রজন্মের ইমেজ ফর্ম্যাটগুলির মধ্যে এটিকে আরও অন্তর্ভুক্ত করতে WebP অডিটের আপডেটগুলি
• অ্যাক্সেসিবিলিটি স্কোরের একটি পুনর্নির্মাণ
• যদি একটি অ্যাক্সেসিবিলিটি অডিট একটি পৃষ্ঠার জন্য প্রযোজ্য না হয়, তাহলে সেই অডিটটি আর অ্যাক্সেসিবিলিটি স্কোরের জন্য গণনা করা হয় না
• কর্মক্ষমতা এখন রিপোর্টের শীর্ষ বিভাগ

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

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

থ্রেডের মধ্যে বার্তা পাস করে এমন কোডে প্রবেশ করা

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Puppeteer এর সংস্করণ 1.0, Chrome DevTools টিম দ্বারা রক্ষণাবেক্ষণ করা একটি ব্রাউজার অটোমেশন টুল, এখন আউট। আপনি অনেকগুলি কাজ স্বয়ংক্রিয় করতে 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 সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

• crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্যের অনুরোধ জমা দিন।
• more_vert আরও বিকল্প > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন।
• @ ChromeDevTools-এ টুইট করুন।
• DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

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

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