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

Kayce Basques
Kayce Basques
X GitHub

Chrome 67-এ DevTools-এ নতুন ফিচার এবং বড় পরিবর্তনগুলি অন্তর্ভুক্ত রয়েছে:

রিলিজ নোটের ভিডিও ভার্সন:

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

নতুন নেটওয়ার্ক সার্চ প্যানে 'cache-control' টেক্সট সার্চ করা।

ছবি ১। নতুন নেটওয়ার্ক সার্চ প্যানে 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 হিসেবে কপি করুন বিকল্প বেছে নিন যাতে আপনার ক্লিপবোর্ডে সেই রিকোয়েস্টের জন্য 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"
});

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

নতুন অডিট

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

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

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

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

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

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

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

ট্রেস দেখুন

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

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

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

ইনফাইনাইট লুপ বন্ধ করুন

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

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

উপরের ভিডিওতে, setInterval() টাইমারের মাধ্যমে ঘড়ি আপডেট করা হচ্ছে। ইনফিনিট লুপ চালু করুন বিকল্পে ক্লিক করলে এমন একটি do...while লুপ চালু হয় যা কখনও বন্ধ হয় না। বর্তমান জাভাস্ক্রিপ্ট কল বন্ধ করুন বন্ধ করুন বেছে নেওয়ার সময় ইন্টারভাল চালু ছিল না বলে এটি আবার চালু করা হয়েছে।

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

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

'বটম-আপ' ট্যাবে ব্যবহারকারীর টাইমিং পরিমাপ দেখা।

ছবি ৮। বটম-আপ ট্যাবে ব্যবহারকারীর টাইমিং পরিমাপ দেখা। ব্যবহারকারীর টাইমিং বিভাগের বাঁদিকে নীল রঙের বারটি দেখায় যে এটি বেছে নেওয়া হয়েছে।

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

মেমরি প্যানেলে জাভাস্ক্রিপ্ট VM ইনস্ট্যান্স বেছে নিন

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

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

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

developers.google.com ইনস্ট্যান্সের পাশে ২টি ভ্যালু আছে: 8.7 MB এবং 13.3 MB। বাঁদিকের মানটি জাভাস্ক্রিপ্টের কারণে বরাদ্দ করা মেমরিকে দেখায়। ডানদিকের মানটি সেই VM ইনস্ট্যান্সের কারণে বরাদ্দ করা সমস্ত OS মেমরিকে দেখায়। ডানদিকের ভ্যালু বাঁদিকের ভ্যালুর সাথে অন্তর্ভুক্ত। Chrome-এর টাস্ক ম্যানেজারে, বাঁদিকের মান JavaScript Memory-এর সাথে এবং ডানদিকের মান Memory Footprint-এর সাথে সম্পর্কিত।

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

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

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

ছবি ১০। বাঁদিকে পুরনো UI-তে, পৃষ্ঠার রিসোর্স দেখানো ট্যাবকে নেটওয়ার্ক বলা হয়, যেখানে ডানদিকে নতুন UI-তে এটিকে পৃষ্ঠা বলা হয়

ডার্ক থিম সংক্রান্ত আপডেট

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

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

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

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

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

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

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

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

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

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

ছবি ১৩। পারফর্ম্যান্স রেকর্ডিংয়ে প্রসেস-প্রতি ফ্লেম চার্ট

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

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

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

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

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

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