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

Kayce Basques

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

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

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

পারফরম্যান্স মনিটর

কোনও পৃষ্ঠার লোড বা রানটাইম পারফরম্যান্সের বিভিন্ন দিকের রিয়েল-টাইম ভিউ পেতে পারফরম্যান্স মনিটর ব্যবহার করুন, যার মধ্যে রয়েছে:

• CPU ব্যবহার।
• জাভাস্ক্রিপ্টের হিপ সাইজ।
• পৃষ্ঠায় মোট DOM নোড, জাভাস্ক্রিপ্ট ইভেন্ট লিসেনারের সংখ্যা, ডকুমেন্ট এবং ফ্রেম।
• প্রতি সেকেন্ডে লেআউট এবং স্টাইল পুনঃগণনা।

যদি ব্যবহারকারীরা রিপোর্ট করেন যে আপনার অ্যাপটি ধীর বা অস্থির লাগছে, তাহলে সূত্রের জন্য পারফরম্যান্স মনিটরটি পরীক্ষা করুন।

লোড পারফর্ম কেন গুরুত্বপূর্ণ : BookMyShow গতির উপর দৃষ্টি নিবদ্ধ করে একটি প্রোগ্রেসিভ ওয়েব অ্যাপ তৈরি করার মাধ্যমে রূপান্তরে ৮০% বৃদ্ধি পেয়েছে। আরও জানুন ।

পারফরম্যান্স মনিটর ব্যবহার করতে:

1. কমান্ড মেনু খুলুন।

2. Performance টাইপ করা শুরু করুন তারপর Show Performance Monitor নির্বাচন করুন।

   চিত্র ১. পারফরম্যান্স মনিটর

3. একটি মেট্রিক দেখানো বা লুকানোর জন্য এটিতে ক্লিক করুন। চিত্র 1-এ CPU ব্যবহার , JS হিপ আকার এবং JS ইভেন্ট লিসেনারের চার্ট দেখানো হয়েছে।

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

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

যদি আপনি সবেমাত্র পারফরম্যান্স বিশ্লেষণ দিয়ে শুরু করেন, তাহলে প্রস্তাবিত পথ হল প্রথমে অডিট প্যানেল ব্যবহার করা, এবং তারপর পারফরম্যান্স প্যানেল বা পারফরম্যান্স মনিটর ব্যবহার করে আরও তদন্ত করা।

কনসোল সাইডবার

বড় সাইটগুলিতে, কনসোলটি দ্রুত অপ্রাসঙ্গিক বার্তায় ভরে যেতে পারে। শব্দ কমাতে এবং আপনার জন্য গুরুত্বপূর্ণ বার্তাগুলিতে ফোকাস করতে নতুন কনসোল সাইডবার ব্যবহার করুন।

চিত্র ২. শুধুমাত্র ত্রুটি বার্তা দেখানোর জন্য কনসোল সাইডবার ব্যবহার করা

কনসোল সাইডবারটি ডিফল্টরূপে লুকানো থাকে। কনসোল সাইডবার দেখান ক্লিক করুন এটা দেখানোর জন্য।

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

• ফিল্টার টেক্সট বক্স। কিছু টেক্সট লিখুন এবং কনসোল শুধুমাত্র সেই টেক্সট ধারণকারী বার্তাগুলি দেখায়। এছাড়াও রেজেক্স প্যাটার্ন, নেতিবাচক ফিল্টার এবং URL ফিল্টার সমর্থন করে।

একই রকম কনসোল বার্তাগুলিকে গ্রুপ করুন

কনসোল এখন ডিফল্টরূপে একই ধরণের বার্তাগুলিকে একসাথে গোষ্ঠীভুক্ত করে। উদাহরণস্বরূপ, চিত্র 3-এ [Violation] Avoid using document.write() ।

চিত্র ৩। কনসোল একই ধরণের বার্তাগুলিকে একসাথে গ্রুপ করার একটি উদাহরণ

একটি গ্রুপকে প্রসারিত করতে এবং বার্তার প্রতিটি উদাহরণ দেখতে তার উপর ক্লিক করুন।

চিত্র ৪। কনসোল বার্তাগুলির একটি বর্ধিত গোষ্ঠীর উদাহরণ

এই বৈশিষ্ট্যটি নিষ্ক্রিয় করতে Group Similar চেকবক্সটি আনচেক করুন।

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

• আপনি console.group() ব্যবহার করে আপনার নিজস্ব কনসোল বার্তাগুলিকে গ্রুপ করতে পারেন।

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

ওহো! আমরা মূলত এই বৈশিষ্ট্যটি Chrome 64-এ চালু করার জন্য নির্ধারণ করেছিলাম, কিন্তু কিছু জটিলতা দূর করার জন্য এটিকে সময়সীমার কাছাকাছি সময়ে সরিয়ে নিয়েছিলাম। স্পষ্টতই, নতুন কি আছে UI সময়মতো আপডেট হয়নি। দুঃখিত!

এই বৈশিষ্ট্যটি Chrome 65-এ পাঠানো হচ্ছে, যা Chrome 64-এর প্রায় 6 সপ্তাহ পরে আসবে। আরও জানতে Local Overrides দেখুন। আপনি যদি Windows বা Mac ব্যবহার করেন, তাহলে Chrome Canary ডাউনলোড করে এখনই Chrome 65 ব্যবহার করে দেখতে পারেন।

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

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

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

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

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

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

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