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

Kayce Basques

নতুন সমস্যা ট্যাব দিয়ে সাইটের সমস্যা সমাধান করুন

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

শুরু করতে Chrome DevTools ইস্যু ট্যাবের সাথে সমস্যাগুলি খুঁজুন এবং সমাধান করুন ।

সমস্যা ট্যাব।

ক্রোমিয়াম বাগ: #1068116

পরিদর্শন মোড টুলটিপে অ্যাক্সেসযোগ্যতার তথ্য দেখুন

পরিদর্শন মোড টুলটিপ এখন নির্দেশ করে যে উপাদানটির একটি অ্যাক্সেসযোগ্য নাম এবং ভূমিকা আছে এবং এটি কীবোর্ড-ফোকাসযোগ্য ।

অ্যাক্সেসিবিলিটি তথ্য সহ ইনস্পেক্ট মোড টুলটিপ।

ক্রোমিয়াম বাগ: #1040025

কর্মক্ষমতা প্যানেল আপডেট

ফুটারে মোট ব্লকিং টাইম (TBT) তথ্য দেখুন

আপনার লোড পারফরম্যান্স রেকর্ড করার পর, পারফরম্যান্স প্যানেল এখন ফুটারে টোটাল ব্লকিং টাইম (TBT) তথ্য দেখায়। TBT হল একটি লোড পারফরম্যান্স মেট্রিক যা একটি পৃষ্ঠা ব্যবহারযোগ্য হতে কতক্ষণ সময় নেয় তা পরিমাপ করতে সাহায্য করে। এটি মূলত একটি পৃষ্ঠা কতক্ষণ ব্যবহারযোগ্য বলে মনে হয় তা পরিমাপ করে (কারণ এর বিষয়বস্তু স্ক্রীনে রেন্ডার করা হয়েছে) কিন্তু প্রকৃতপক্ষে ব্যবহারযোগ্য নয় কারণ জাভাস্ক্রিপ্ট মূল থ্রেডটিকে ব্লক করছে এবং সেইজন্য পৃষ্ঠাটি ব্যবহারকারীর ইনপুটের প্রতিক্রিয়া জানাতে পারে না। আনুমানিক প্রথম ইনপুট বিলম্বের জন্য TBT হল প্রধান ল্যাব মেট্রিক , যা Google-এর নতুন মূল ওয়েব ভাইটালগুলির মধ্যে একটি।

মোট ব্লকিং টাইম তথ্য পেতে, রিলোড পৃষ্ঠা ব্যবহার করবেন না পৃষ্ঠা পুনরায় লোড করুন রেকর্ডিং পৃষ্ঠা লোড কর্মক্ষমতা জন্য কর্মপ্রবাহ. পরিবর্তে, রেকর্ড ক্লিক করুন রেকর্ড , ম্যানুয়ালি পৃষ্ঠাটি পুনরায় লোড করুন, পৃষ্ঠাটি লোড হওয়ার জন্য অপেক্ষা করুন এবং তারপরে রেকর্ডিং বন্ধ করুন৷ আপনি যদি দেখেন Total Blocking Time: Unavailable তার মানে DevTools Chrome এর অভ্যন্তরীণ প্রোফাইলিং ডেটা থেকে প্রয়োজনীয় তথ্য পায়নি।

একটি পারফরম্যান্স প্যানেল রেকর্ডিংয়ের ফুটারে মোট ব্লকিং সময়ের তথ্য।

ক্রোমিয়াম বাগ: #1054381

নতুন অভিজ্ঞতা বিভাগে লেআউট শিফট ইভেন্ট

পারফরম্যান্স প্যানেলের নতুন অভিজ্ঞতা বিভাগ আপনাকে লেআউট শিফট শনাক্ত করতে সাহায্য করতে পারে। Cumulative Layout Shift (CLS) হল একটি মেট্রিক যা আপনাকে অবাঞ্ছিত ভিজ্যুয়াল অস্থিরতা পরিমাপ করতে সাহায্য করতে পারে এবং এটি Google-এর নতুন মূল ওয়েব ভাইটালগুলির মধ্যে একটি৷

সারাংশ ট্যাবে লেআউট শিফটের বিশদ বিবরণ দেখতে একটি লেআউট শিফট ইভেন্টে ক্লিক করুন। যেখানে লেআউট স্থানান্তর ঘটেছে তা কল্পনা করতে সরানো থেকে সরানো এবং ক্ষেত্রগুলিতে স্থানান্তরিত করুন ।

লেআউট পরিবর্তনের বিশদ বিবরণ।

কনসোলে আরও সঠিক প্রতিশ্রুতি পরিভাষা

একটি Promise লগ করার সময় কনসোল ভুলভাবে Promise অবস্থাকে resolved হিসাবে বর্ণনা করতে ব্যবহৃত হয়:

পুরানো 'সমাধান করা' পরিভাষা ব্যবহার করে কনসোলের একটি উদাহরণ।

কনসোল এখন fulfilled শব্দটি ব্যবহার করে, যা Promise সাথে সারিবদ্ধ করে :

নতুন 'পূর্ণ' পরিভাষা ব্যবহার করে কনসোলের একটি উদাহরণ।

V8 বাগ: #6751

শৈলী ফলক আপডেট

revert কীওয়ার্ডের জন্য সমর্থন

স্টাইল প্যানের স্বয়ংসম্পূর্ণ UI এখন revert CSS কীওয়ার্ড সনাক্ত করে, যা একটি সম্পত্তির ক্যাসকেড করা মানকে সেই মানটিতে ফিরিয়ে দেয় যদি উপাদানটির স্টাইলিংয়ে কোনো পরিবর্তন না করা হতো।

প্রত্যাবর্তনের জন্য একটি সম্পত্তির মান সেট করা।

ক্রোমিয়াম বাগ: #1075437

ছবির পূর্বরূপ

টুলটিপে ইমেজের পূর্বরূপ দেখতে শৈলী ফলকে একটি background-image মানের উপর হোভার করুন।

একটি ব্যাকগ্রাউন্ড-ইমেজ মানের উপর ঘোরানো।

ক্রোমিয়াম বাগ: #1040019

কালার পিকার এখন স্পেস-সেপারেটেড ফাংশনাল কালার নোটেশন ব্যবহার করে

CSS কালার মডিউল লেভেল 4 নির্দিষ্ট করে যে rgb() মত কালার ফাংশন স্পেস-সেপারেটেড আর্গুমেন্ট সমর্থন করবে। উদাহরণস্বরূপ, rgb(0, 0, 0) rgb(0 0 0) এর সমতুল্য।

আপনি যখন কালার পিকার দিয়ে রং নির্বাচন করেন বা স্টাইল প্যানেলে রঙের উপস্থাপনাগুলির মধ্যে বিকল্পে Shift ধরে রেখে রঙের মান ক্লিক করেন, আপনি এখন স্থান-বিচ্ছিন্ন আর্গুমেন্ট সিনট্যাক্স দেখতে পাবেন।

শৈলী ফলকে স্থান-বিচ্ছিন্ন আর্গুমেন্ট ব্যবহার করা।

আপনি কম্পিউটেড প্যানে এবং ইনস্পেক্ট মোড টুলটিপে সিনট্যাক্সও দেখতে পাবেন।

DevTools নতুন সিনট্যাক্স ব্যবহার করছে কারণ আসন্ন CSS ফিচার যেমন color() কমা-বিভাজিত আর্গুমেন্ট সিনট্যাক্স সমর্থন করে না ।

স্থান-বিচ্ছিন্ন আর্গুমেন্ট সিনট্যাক্স কিছু সময়ের জন্য বেশিরভাগ ব্রাউজারে সমর্থিত হয়েছে। দেখুন আমি কি স্থান-বিচ্ছিন্ন কার্যকরী রঙের স্বরলিপি ব্যবহার করতে পারি?

ক্রোমিয়াম বাগ: #1072952

উপাদান প্যানেলে বৈশিষ্ট্য ফলক অবচয়

এলিমেন্টস প্যানেলের বৈশিষ্ট্য ফলকটি অবমূল্যায়ন করা হয়েছে। পরিবর্তে কনসোলে console.dir($0) চালান।

অপ্রচলিত বৈশিষ্ট্য ফলক।

তথ্যসূত্র:

ম্যানিফেস্ট ফলকে অ্যাপ শর্টকাট সমর্থন করে

অ্যাপ শর্টকাট ব্যবহারকারীদের দ্রুত একটি ওয়েব অ্যাপের মধ্যে সাধারণ বা প্রস্তাবিত কাজ শুরু করতে সাহায্য করে। অ্যাপ শর্টকাট মেনু শুধুমাত্র ব্যবহারকারীর ডেস্কটপ বা মোবাইল ডিভাইসে ইনস্টল করা প্রগতিশীল ওয়েব অ্যাপের জন্য দেখানো হয়।

আরও জানতে অ্যাপ শর্টকাট দিয়ে জিনিসগুলি দ্রুত সম্পন্ন করুন দেখুন।

ম্যানিফেস্ট প্যানে অ্যাপ শর্টকাট।

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

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

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

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

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

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

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