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

Kayce Basques

আবার স্বাগতম! আমাদের শেষ আপডেটটি, যা Chrome 68 এর জন্য ছিল, প্রায় 12 সপ্তাহ হয়ে গেছে। আমরা Chrome 69 এড়িয়ে গেছি কারণ আমাদের কাছে পর্যাপ্ত নতুন বৈশিষ্ট্য বা UI পরিবর্তন ছিল না যা একটি পোস্টের জন্য উপযুক্ত ছিল।

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

• কনসোলে লাইভ এক্সপ্রেশন ।
• Eager Evaluation এর সময় DOM নোডগুলি হাইলাইট করুন ।
• পারফরম্যান্স প্যানেল অপ্টিমাইজেশন ।
• আরও নির্ভরযোগ্য ডিবাগিং ।
• কমান্ড মেনু থেকে নেটওয়ার্ক থ্রটলিং সক্ষম করুন ।
• স্বয়ংক্রিয়ভাবে শর্তসাপেক্ষ ব্রেকপয়েন্ট পূরণ করুন ।
• AudioContext ইভেন্টগুলিতে বিরতি ।
• ndb দিয়ে Node.js অ্যাপ ডিবাগ করুন ।
• বোনাস টিপ: User Timing API ব্যবহার করে বাস্তব বিশ্বের ব্যবহারকারীদের মিথস্ক্রিয়া পরিমাপ করুন ।

এই ডকুমেন্টটির ভিডিও সংস্করণটি পড়ুন, অথবা দেখুন:

কনসোলে লাইভ এক্সপ্রেশন

যখন আপনি রিয়েল-টাইমে এর মান নিরীক্ষণ করতে চান, তখন আপনার কনসোলের উপরে একটি লাইভ এক্সপ্রেশন পিন করুন।

1. লাইভ এক্সপ্রেশন তৈরি করুন ক্লিক করুন . লাইভ এক্সপ্রেশন UI খোলে।

   

   চিত্র ১। লাইভ এক্সপ্রেশন UI

2. আপনি যে এক্সপ্রেশনটি পর্যবেক্ষণ করতে চান তা টাইপ করুন।

   

   চিত্র ২। লাইভ এক্সপ্রেশন UI-তে Date.now() টাইপ করা

3. আপনার এক্সপ্রেশন সংরক্ষণ করতে লাইভ এক্সপ্রেশন UI এর বাইরে ক্লিক করুন।

   

   চিত্র ৩। একটি সংরক্ষিত লাইভ এক্সপ্রেশন

লাইভ এক্সপ্রেশনের মান প্রতি ২৫০ মিলিসেকেন্ডে আপডেট হয়।

ইগার ইভালুয়েশনের সময় DOM নোডগুলি হাইলাইট করুন

কনসোলে একটি DOM নোডের মূল্যায়ন করে এমন একটি এক্সপ্রেশন টাইপ করুন এবং Eager Evaluation এখন ভিউপোর্টে সেই নোডটি হাইলাইট করবে।

চিত্র ৪। যেহেতু বর্তমান এক্সপ্রেশনটি একটি নোডের মূল্যায়ন করে, তাই সেই নোডটি ভিউপোর্টে হাইলাইট করা হয়েছে।

এখানে কিছু অভিব্যক্তি দেওয়া হল যা আপনার কাজে লাগতে পারে:

• document.activeElement বর্তমানে ফোকাস করা নোডটি হাইলাইট করার জন্য।
• document.querySelector(s) একটি ইচ্ছাকৃত নোড হাইলাইট করার জন্য, যেখানে s হল একটি CSS নির্বাচক। এটি DOM Tree- এর একটি নোডের উপর ঘোরানোর সমতুল্য।
• DOM Tree-তে বর্তমানে নির্বাচিত যেকোনো নোড হাইলাইট করার জন্য $0 ।
• $0.parentElement বর্তমানে নির্বাচিত নোডের প্যারেন্ট হাইলাইট করার জন্য।

পারফর্ম্যান্স প্যানেল অপ্টিমাইজেশন

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

চিত্র ৫। পারফরম্যান্স ডেটা প্রক্রিয়াকরণ এবং লোড করা হচ্ছে

আরও নির্ভরযোগ্য ডিবাগিং

ক্রোম ৭০ কিছু বাগ ঠিক করেছে যার কারণে ব্রেকপয়েন্টগুলি অদৃশ্য হয়ে যাচ্ছিল বা ট্রিগার হচ্ছিল না।

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

কমান্ড মেনু থেকে নেটওয়ার্ক থ্রটলিং সক্ষম করুন

আপনি এখন কমান্ড মেনু থেকে নেটওয়ার্ক থ্রটলিংকে দ্রুত 3G অথবা ধীর 3G তে সেট করতে পারেন।

চিত্র ৬। কমান্ড মেনুতে নেটওয়ার্ক থ্রটলিং কমান্ড

স্বয়ংক্রিয়ভাবে শর্তসাপেক্ষ ব্রেকপয়েন্ট পূরণ করুন

আপনার কন্ডিশনাল ব্রেকপয়েন্ট এক্সপ্রেশনগুলি দ্রুত টাইপ করতে অটোকম্পলিট UI ব্যবহার করুন।

চিত্র ৭। স্বয়ংক্রিয় সম্পূর্ণ UI

তুমি কি জানো? CodeMirror এর মাধ্যমে Autocomplete UI সম্ভব, যা কনসোলকেও শক্তিশালী করে।

অডিওকনটেক্সট ইভেন্টে বিরতি

AudioContext লাইফসাইকেল ইভেন্ট হ্যান্ডলারের প্রথম লাইনে পজ করার জন্য ইভেন্ট লিসেনার ব্রেকপয়েন্টস প্যান ব্যবহার করুন।

AudioContext হল ওয়েব অডিও API-এর অংশ, যা আপনি অডিও প্রক্রিয়াকরণ এবং সংশ্লেষণ করতে ব্যবহার করতে পারেন।

চিত্র ৮। ইভেন্ট লিসেনার ব্রেকপয়েন্ট প্যানে অডিওকনটেক্সট ইভেন্ট

ndb দিয়ে Node.js অ্যাপ ডিবাগ করুন

ndb হল Node.js অ্যাপ্লিকেশনের জন্য একটি নতুন ডিবাগার। DevTools এর মাধ্যমে আপনি যে সাধারণ ডিবাগিং বৈশিষ্ট্যগুলি পান তার উপরে, ndb এছাড়াও অফার করে:

• চাইল্ড প্রসেস সনাক্তকরণ এবং সংযুক্তকরণ।
• মডিউলের আগে ব্রেকপয়েন্ট স্থাপন করা প্রয়োজন।
• DevTools UI এর মধ্যে ফাইল সম্পাদনা করা।
• ডিফল্টরূপে বর্তমান কার্যকরী ডিরেক্টরির বাইরের সমস্ত স্ক্রিপ্ট উপেক্ষা করা।

চিত্র ৯। এনডিবি ইউআই

আরও জানতে ndb এর README দেখুন।

বোনাস টিপ: ইউজার টাইমিং এপিআই ব্যবহার করে বাস্তব বিশ্বের ব্যবহারকারীদের মিথস্ক্রিয়া পরিমাপ করুন

আপনার পৃষ্ঠাগুলিতে গুরুত্বপূর্ণ যাত্রা সম্পন্ন করতে প্রকৃত ব্যবহারকারীদের কত সময় লাগে তা পরিমাপ করতে চান? User Timing API ব্যবহার করে আপনার কোডটি ইন্সট্রুমেন্ট করার কথা বিবেচনা করুন।

উদাহরণস্বরূপ, ধরুন আপনি আপনার কল-টু-অ্যাকশন (CTA) বোতামে ক্লিক করার আগে একজন ব্যবহারকারী আপনার হোমপেজে কতক্ষণ সময় ব্যয় করেন তা পরিমাপ করতে চেয়েছিলেন। প্রথমে, আপনি একটি পৃষ্ঠা লোড ইভেন্টের সাথে সম্পর্কিত একটি ইভেন্ট হ্যান্ডলারে যাত্রার শুরু চিহ্নিত করবেন, যেমন DOMContentLoaded :

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

তারপর, আপনি যাত্রার সমাপ্তি চিহ্নিত করবেন এবং বোতামটি ক্লিক করলে এর সময়কাল গণনা করবেন:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

আপনি আপনার পরিমাপগুলিও বের করতে পারেন, যার ফলে বেনামী, সমষ্টিগত ডেটা সংগ্রহ করার জন্য আপনার বিশ্লেষণ পরিষেবাতে পাঠানো সহজ হয়:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

DevTools আপনার পারফরম্যান্স রেকর্ডিংয়ের User Timing বিভাগে আপনার User Timing পরিমাপ স্বয়ংক্রিয়ভাবে চিহ্নিত করে।

চিত্র ১০। ব্যবহারকারীর সময় নির্ধারণ বিভাগ

কোড ডিবাগিং বা অপ্টিমাইজ করার সময়ও এটি কাজে আসে। উদাহরণস্বরূপ, যদি আপনি আপনার জীবনচক্রের একটি নির্দিষ্ট পর্যায় অপ্টিমাইজ করতে চান, তাহলে আপনার জীবনচক্র ফাংশনের শুরু এবং শেষে window.performance.mark() কল করুন। React ডেভেলপমেন্ট মোডে এটি করে।

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

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

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

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

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

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

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