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

আবার স্বাগতম! 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 সিরিজে নতুন কী আছে তাতে কভার করা হয়েছে এমন সবকিছুর একটি তালিকা।

,

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

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

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

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

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

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

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

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

  1. কমান্ড মেনু খুলুন।
  2. টাইপিং Performance শুরু করুন তারপরে Show Performance Monitor নির্বাচন করুন।

    পারফরম্যান্স মনিটর চিত্র 1 । পারফরম্যান্স মনিটর

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

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

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

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

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

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

কেবল ত্রুটি বার্তাগুলি দেখানোর জন্য কনসোল সাইডবারটি ব্যবহার করে

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

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

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

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

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

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

কনসোলের সাথে একই রকম বার্তাগুলি একত্রিত করার একটি উদাহরণ

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

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

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

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

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

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

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

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

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

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

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

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

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করুন

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

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

ডিভটুলসে নতুন কি

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।