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

Kayce Basques

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

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

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

নতুন নেটওয়ার্ক অনুসন্ধান ফলক দিয়ে পাঠ্য 'ক্যাশে-নিয়ন্ত্রণ' অনুসন্ধান করা হচ্ছে।

চিত্র 1 । নতুন নেটওয়ার্ক অনুসন্ধান ফলকের সাথে পাঠ্য cache-control জন্য অনুসন্ধান করা হচ্ছে

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

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

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

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

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

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

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

শৈলী ফলকে CSS পরিবর্তনশীল মানের পূর্বরূপ

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

CSS পরিবর্তনশীল রঙের মানগুলির একটি উদাহরণ।

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

আনয়ন হিসাবে অনুলিপি

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

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

চিত্র 5 । একটি অনুরোধের জন্য 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"
});

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

নতুন অডিট

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

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

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

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

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

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

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

ট্রেস দেখুন

একটি পৃষ্ঠা অডিট করার পরে, পারফরম্যান্স প্যানেলে আপনার অডিট ভিত্তিক লোড কর্মক্ষমতা ডেটা দেখতে ট্রেস দেখুন ক্লিক করুন৷

দেখুন ট্রেস বোতাম।

চিত্র 7 । দেখুন ট্রেস বোতাম

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

আপনি যদি for সাথে কাজ করেন, লুপ করার do...while , বা প্রচুর পুনরাবৃত্তি করেন তবে আপনি সম্ভবত আপনার সাইটটি বিকাশ করার সময় ভুলবশত একটি অসীম লুপ কার্যকর করেছেন৷ অসীম লুপ বন্ধ করতে, আপনি এখন করতে পারেন:

  1. উৎস প্যানেল খুলুন।
  2. পজ ক্লিক করুন বিরতি . স্ক্রিপ্ট এক্সিকিউশন পুনরায় শুরু করার জন্য বোতামটি পরিবর্তিত হয় পুনরায় শুরু করুন .
  3. রেজিউম স্ক্রিপ্ট এক্সিকিউশন ধরে রাখুন পুনরায় শুরু করুন তারপর স্টপ কারেন্ট জাভাস্ক্রিপ্ট কল নির্বাচন করুন থামো .

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

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

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

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

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

সাধারণভাবে, আপনি এখন যেকোনো বিভাগ নির্বাচন করতে পারেন ( প্রধান থ্রেড , ইউজার টাইমিং , GPU , স্ক্রিপ্টস্ট্রীমার ইত্যাদি) এবং ট্যাবগুলিতে সেই বিভাগের কার্যকলাপ দেখতে পারেন।

মেমরি প্যানেলে JavaScript VM দৃষ্টান্ত নির্বাচন করুন

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

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

চিত্র 9 । বাম দিকের পুরানো UI-তে, JavaScript VM দৃষ্টান্তগুলি লক্ষ্য ড্রপডাউন মেনুর পিছনে লুকানো থাকে, যেখানে ডানদিকের নতুন UI-তে সেগুলি JavaScript VM ইনস্ট্যান্স সারণীতে দেখানো হয়

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

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

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

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

চিত্র 10 । বাম দিকের পুরানো UI-তে, পৃষ্ঠার সংস্থানগুলি দেখানো ট্যাবটিকে নেটওয়ার্ক বলা হয়, যেখানে ডানদিকের নতুন UI-তে এটিকে পৃষ্ঠা বলা হয়

গাঢ় থিম আপডেট

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

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

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

নিরাপত্তা প্যানেলে শংসাপত্রের স্বচ্ছতা

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

নিরাপত্তা প্যানেলে শংসাপত্রের স্বচ্ছতার তথ্য।

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

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

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

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

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

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

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

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

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

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

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

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