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

Kayce Basques

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

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

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

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

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

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

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

   

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

2. আপনি যে অভিব্যক্তি নিরীক্ষণ করতে চান তা টাইপ করুন।

   

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

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

   

   চিত্র 3 । একটি সংরক্ষিত লাইভ অভিব্যক্তি

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

Eager Evaluation এর সময় DOM নোড হাইলাইট করুন

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

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

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

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

কর্মক্ষমতা প্যানেল অপ্টিমাইজেশান

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

চিত্র 5 । কর্মক্ষমতা ডেটা প্রক্রিয়াকরণ এবং লোড হচ্ছে

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

ক্রোম 70 কিছু বাগ সংশোধন করে যা ব্রেকপয়েন্ট অদৃশ্য হয়ে যায় বা ট্রিগার না করে।

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

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

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

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

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

আপনার শর্তসাপেক্ষ ব্রেকপয়েন্ট এক্সপ্রেশন দ্রুত টাইপ করতে স্বয়ংসম্পূর্ণ UI ব্যবহার করুন।

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

আপনি কি জানেন? স্বয়ংসম্পূর্ণ UI সম্ভব হয়েছে CodeMirror- কে ধন্যবাদ, যা কনসোলকেও ক্ষমতা দেয়।

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

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

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

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

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

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

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

চিত্র 9 । ndb UI

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

বোনাস টিপ: ব্যবহারকারী টাইমিং 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 স্বয়ংক্রিয়ভাবে আপনার পারফরম্যান্স রেকর্ডিংয়ের ব্যবহারকারীর সময় বিভাগে আপনার ব্যবহারকারীর সময় পরিমাপ চিহ্নিত করে।

চিত্র 10 । ব্যবহারকারীর সময় বিভাগ

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

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

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

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

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

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

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

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