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

Kayce Basques

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

• কর্মক্ষমতা মনিটর . রিয়েল-টাইমে একটি পৃষ্ঠার কর্মক্ষমতা দেখুন।
• কনসোল সাইডবার । কনসোলের আওয়াজ হ্রাস করুন এবং আপনার জন্য গুরুত্বপূর্ণ বার্তাগুলিতে ফোকাস করুন৷
• অনুরূপ কনসোল বার্তাগুলিকে গোষ্ঠীভুক্ত করুন । কনসোল এখন ডিফল্টরূপে অনুরূপ বার্তাগুলিকে একত্রিত করে।

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

কর্মক্ষমতা মনিটর

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

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

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

কেন পারফ লোড করা গুরুত্বপূর্ণ : BookMyShow যখন গতির উপর ফোকাস করে এমন একটি প্রগতিশীল ওয়েব অ্যাপ তৈরি করেছিল তখন রূপান্তরগুলিতে 80% বৃদ্ধি পেয়েছে৷ আরও জানুন

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

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

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

   চিত্র 1 । কর্মক্ষমতা মনিটর

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

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

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

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

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

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

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

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

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

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

গোষ্ঠীর অনুরূপ কনসোল বার্তা

কনসোল এখন ডিফল্টরূপে অনুরূপ বার্তাগুলিকে একত্রিত করে। উদাহরণস্বরূপ, চিত্র 3-তে বার্তাটির 27টি উদাহরণ রয়েছে [Violation] Avoid using document.write() ।

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

এটি প্রসারিত করতে একটি গোষ্ঠীতে ক্লিক করুন এবং বার্তাটির প্রতিটি উদাহরণ দেখুন৷

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

এই বৈশিষ্ট্যটি নিষ্ক্রিয় করতে গ্রুপ অনুরূপ চেকবক্সটি আনচেক করুন।

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

• আপনি console.group() দিয়ে আপনার নিজের কনসোল বার্তাগুলিকে গোষ্ঠীবদ্ধ করতে পারেন।

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

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

এই বৈশিষ্ট্যটি Chrome 65-এ শিপিং করা হচ্ছে, যা Chrome 64-এর প্রায় 6 সপ্তাহ পরে অবতরণ করবে৷ আরও জানতে স্থানীয় ওভাররাইডগুলি দেখুন৷ আপনি যদি Windows বা Mac এ থাকেন, তাহলে আপনি Chrome Canary ডাউনলোড করে এখনই Chrome 65 ব্যবহার করে দেখতে পারেন।

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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