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

কেইস বাস্ক
Kayce Basques
X GitHub

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

রিলিজ নোটের ভিডিও সংস্করণ :

নেটওয়ার্ক প্যানেলটি খুলুন এবং তারপর নতুন নেটওয়ার্ক অনুসন্ধান প্যানেলটি খুলতে Command + F (Mac) অথবা Control +F (Windows, Linux, ChromeOS) টিপুন। DevTools আপনার প্রদত্ত কোয়েরির জন্য সমস্ত নেটওয়ার্ক অনুরোধের হেডার এবং বডি অনুসন্ধান করে।

নতুন নেটওয়ার্ক অনুসন্ধান ফলক ব্যবহার করে 'ক্যাশ-কন্ট্রোল' লেখাটি অনুসন্ধান করা হচ্ছে।

চিত্র ১. নতুন নেটওয়ার্ক অনুসন্ধান ফলক ব্যবহার করে টেক্সট cache-control অনুসন্ধান করা হচ্ছে

ম্যাচ কেস ক্লিক করুন ম্যাচ কেস আপনার কোয়েরি কেস-সংবেদনশীল করতে। নিয়মিত এক্সপ্রেশন ব্যবহার করুন ক্লিক করুন রেগুলার এক্সপ্রেশন ব্যবহার করুন আপনার প্রদত্ত প্যাটার্নের সাথে মেলে এমন কোনও ফলাফল দেখানোর জন্য। আপনার RegEx কে ফরোয়ার্ড স্ল্যাশ দিয়ে মোড়ানোর দরকার নেই।

নেটওয়ার্ক অনুসন্ধান ফলকে একটি নিয়মিত অভিব্যক্তি কোয়েরি।

চিত্র ২। নেটওয়ার্ক অনুসন্ধান ফলকে একটি নিয়মিত অভিব্যক্তি কোয়েরি।

গ্লোবাল সার্চ প্যানের UI এখন নতুন নেটওয়ার্ক সার্চ প্যানের UI এর সাথে মিলে যায়। এটি এখন স্ক্যানযোগ্যতা বৃদ্ধির জন্য ফলাফলগুলিকে সুন্দরভাবে প্রিন্ট করে।

পুরাতন এবং নতুন UI।

চিত্র ৩। বাম দিকে পুরাতন UI এবং ডানদিকে নতুন UI

গ্লোবাল সার্চ খুলতে Command + Option + F (Mac) অথবা Control + Shift + F (Windows, Linux, ChromeOS) টিপুন। আপনি কমান্ড মেনু দিয়েও এটি খুলতে পারেন।

স্টাইলস প্যানে CSS ভেরিয়েবলের মান প্রিভিউ

যখন কোনও CSS রঙের বৈশিষ্ট্যের মান, যেমন background-color বা color , একটি CSS ভেরিয়েবলে সেট করা হয়, তখন DevTools এখন সেই রঙের একটি প্রিভিউ দেখায়।

CSS ভেরিয়েবলের রঙের মানগুলির একটি উদাহরণ।

চিত্র ৪। বাম দিকের পুরাতন UI তে, color: var(--main-color) এর পাশে কোনও রঙের পূর্বরূপ নেই, যেখানে ডানদিকের নতুন UI তে, আছে

ফেচ হিসেবে কপি করুন

একটি নেটওয়ার্ক অনুরোধে ডান-ক্লিক করুন এবং তারপর আপনার ক্লিপবোর্ডে সেই অনুরোধের জন্য fetch() -equivalent কোডটি অনুলিপি করতে Copy > Copy As Fetch নির্বাচন করুন।

একটি অনুরোধের জন্য fetch() - সমতুল্য কোডটি অনুলিপি করা হচ্ছে।

চিত্র ৫। একটি অনুরোধের জন্য fetch() -সমতুল্য কোড অনুলিপি করা

DevTools নিম্নলিখিত কোড তৈরি করে:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

অডিট প্যানেল আপডেট

নতুন অডিট

অডিট প্যানেলে দুটি নতুন অডিট রয়েছে, যার মধ্যে রয়েছে:

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

নতুন কনফিগারেশন বিকল্পগুলি

আপনি এখন অডিট প্যানেলটি এতে কনফিগার করতে পারেন:

  • ডেস্কটপ ভিউপোর্ট এবং ব্যবহারকারী এজেন্ট সেটিংস সংরক্ষণ করুন। অন্য কথায়, আপনি অডিট প্যানেলকে একটি মোবাইল ডিভাইস সিমুলেট করা থেকে বিরত রাখতে পারেন।
  • নেটওয়ার্ক এবং CPU থ্রটলিং অক্ষম করুন।
  • অডিট জুড়ে LocalStorage এবং IndexedDB এর মতো স্টোরেজ সংরক্ষণ করুন।

নতুন অডিট কনফিগারেশন বিকল্প।

চিত্র ৬। নতুন অডিট কনফিগারেশন বিকল্পগুলি

ট্রেস দেখুন

একটি পৃষ্ঠা অডিট করার পর, পারফরম্যান্স প্যানেলে আপনার অডিট যে লোড পারফরম্যান্স ডেটার উপর ভিত্তি করে তৈরি করা হয়েছে তা দেখতে ভিউ ট্রেস-এ ক্লিক করুন।

ভিউ ট্রেস বোতাম।

চিত্র ৭। ভিউ ট্রেস বোতাম

অসীম লুপ বন্ধ করুন

যদি আপনি for loops, do...while loops, অথবা recursion নিয়ে অনেক কাজ করেন, তাহলে সম্ভবত আপনার সাইট ডেভেলপ করার সময় ভুল করে আপনি একটি infinite loop এক্সিকিউট করেছেন। infinite loop বন্ধ করার জন্য, আপনি এখন যা করতে পারেন:

  1. সোর্স প্যানেলটি খুলুন।
  2. বিরতি ক্লিক করুন বিরতি . বোতামটি Resume Script Execution- এ পরিবর্তিত হয়। জীবনবৃত্তান্ত .
  3. রিজিউম স্ক্রিপ্ট এক্সিকিউশন ধরে রাখুন জীবনবৃত্তান্ত তারপর Stop Current JavaScript Call নির্বাচন করুন থামো .

উপরের ভিডিওতে, ঘড়িটি একটি setInterval() টাইমারের মাধ্যমে আপডেট করা হচ্ছে। Start Infinite Loop এ ক্লিক করলে একটি do...while লুপ চালু হয় যা কখনও থামে না। Stop Current JavaScript Call করার সময় এটি চালু না থাকার কারণে ব্যবধানটি পুনরায় শুরু হয়।থামো নির্বাচিত হয়েছিল।

পারফরম্যান্স ট্যাবে ব্যবহারকারীর সময় নির্ধারণ

পারফরম্যান্স রেকর্ডিং দেখার সময়, সারাংশ , নীচের দিকে , কল ট্রি এবং ইভেন্ট লগ ট্যাবে ব্যবহারকারীর সময় পরিমাপ দেখতে ব্যবহারকারীর সময় বিভাগটি ক্লিক করুন।

"বটম-আপ" ট্যাবে ব্যবহারকারীর সময়ের পরিমাপ দেখা।

চিত্র ৮। " বটম-আপ" ট্যাবে ব্যবহারকারীর সময় পরিমাপ দেখা। "ইউজার টাইমিং" বিভাগের বাম দিকের নীল বারটি নির্দেশ করে যে এটি নির্বাচিত।

সাধারণভাবে, আপনি এখন যেকোনো বিভাগ ( Main Thread , User Timing , GPU , ScriptStreamer , ইত্যাদি) নির্বাচন করতে পারেন এবং ট্যাবগুলিতে সেই বিভাগের কার্যকলাপ দেখতে পারেন।

মেমোরি প্যানেলে জাভাস্ক্রিপ্ট ভিএম ইনস্ট্যান্স নির্বাচন করুন

মেমোরি প্যানেল এখন একটি পৃষ্ঠার সাথে সম্পর্কিত সমস্ত জাভাস্ক্রিপ্ট ভিএম ইনস্ট্যান্সগুলিকে স্পষ্টভাবে তালিকাভুক্ত করে, আগের মতো টার্গেট ড্রপডাউন মেনুর পিছনে লুকানোর পরিবর্তে।

মেমোরি প্যানেলের আগে এবং পরে স্ক্রিনশট।

চিত্র ৯। বাম দিকের পুরাতন UI-তে, জাভাস্ক্রিপ্ট VM ইনস্ট্যান্সগুলি টার্গেট ড্রপডাউন মেনুর পিছনে লুকানো থাকে, যেখানে ডানদিকের নতুন UI-তে সেগুলি Select JavaScript VM Instance টেবিলে দেখানো হয়।

developers.google.com ইনস্ট্যান্সের পাশে দুটি মান রয়েছে: 8.7 MB এবং 13.3 MB । বাম মানটি জাভাস্ক্রিপ্টের কারণে বরাদ্দকৃত মেমোরিকে প্রতিনিধিত্ব করে। ডান মানটি VM ইনস্ট্যান্সের কারণে বরাদ্দকৃত সমস্ত OS মেমোরিকে প্রতিনিধিত্ব করে। ডান মানটি বাম মান সহ। Chrome এর টাস্ক ম্যানেজারে, বাম মানটি JavaScript Memory সাথে এবং ডান মানটি Memory Footprint এর সাথে সম্পর্কিত।

নেটওয়ার্ক ট্যাবের নাম পরিবর্তন করে পৃষ্ঠা ট্যাব করা হয়েছে

সোর্স প্যানেলে, নেটওয়ার্ক ট্যাবটিকে এখন পৃষ্ঠা ট্যাব বলা হয়।

দুটি DevTools উইন্ডো পাশাপাশি, নাম পরিবর্তনের চিত্র প্রদর্শন করছে।

চিত্র ১০। বাম দিকের পুরাতন UI তে, পৃষ্ঠার রিসোর্সগুলি দেখানো ট্যাবটিকে Network বলা হয়, যেখানে ডানদিকের নতুন UI তে এটিকে Page বলা হয়।

ডার্ক থিমের আপডেট

Chrome 67-এ গাঢ় থিমের রঙের স্কিমে বেশ কিছু ছোটখাটো পরিবর্তন আনা হয়েছে। উদাহরণস্বরূপ, ব্রেকপয়েন্ট আইকন এবং বর্তমান এক্সিকিউশন লাইন এখন সবুজ।

নতুন ব্রেকপয়েন্ট আইকন এবং বর্তমান লাইন অফ এক্সিকিউশন কালার স্কিমের একটি স্ক্রিনশট।

চিত্র ১১। নতুন ব্রেকপয়েন্ট আইকন এবং বর্তমান লাইন অফ এক্সিকিউশন কালার স্কিমের একটি স্ক্রিনশট।

নিরাপত্তা প্যানেলে সার্টিফিকেটের স্বচ্ছতা

নিরাপত্তা প্যানেল এখন সার্টিফিকেট স্বচ্ছতার তথ্য রিপোর্ট করে।

নিরাপত্তা প্যানেলে সার্টিফিকেটের স্বচ্ছতার তথ্য।

চিত্র ১২। নিরাপত্তা প্যানেলে সার্টিফিকেশন স্বচ্ছতার তথ্য

পারফরম্যান্স প্যানেলে সাইট আইসোলেশন

যদি আপনার সাইট আইসোলেশন সক্ষম থাকে, তাহলে পারফরম্যান্স প্যানেল এখন প্রতিটি প্রক্রিয়ার জন্য একটি শিখা চার্ট প্রদান করে যাতে আপনি প্রতিটি প্রক্রিয়ার মোট কাজ দেখতে পারেন।

একটি পারফরম্যান্স রেকর্ডিংয়ে প্রতি-প্রক্রিয়া শিখা চার্ট।

চিত্র ১৩। একটি পারফরম্যান্স রেকর্ডিংয়ে প্রতি-প্রক্রিয়া শিখা চার্ট

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

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

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

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

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

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