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) চালান।

তথ্যসূত্র:

• console.dir()
• $0

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

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

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

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

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

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

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

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

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

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

Kayce Basques

নতুন ইস্যু ট্যাব দিয়ে সাইট ইস্যুগুলি ঠিক করুন

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

শুরু করার জন্য ক্রোম ডিভটুলস ইস্যু ট্যাবের সাথে সমস্যাগুলি সন্ধান করুন এবং সমাধান করুন ।

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

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

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

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

পারফরম্যান্স প্যানেল আপডেট

পাদচরণে মোট ব্লকিং সময় (টিবিটি) তথ্য দেখুন

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

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

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

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

পারফরম্যান্স প্যানেলের নতুন অভিজ্ঞতা বিভাগ আপনাকে লেআউট শিফট সনাক্ত করতে সহায়তা করতে পারে। ক্রমবর্ধমান লেআউট শিফট (সিএলএস) একটি মেট্রিক যা আপনাকে অযাচিত ভিজ্যুয়াল অস্থিরতার পরিমাণ নির্ধারণে সহায়তা করতে পারে এবং এটি গুগলের নতুন কোর ওয়েব ভিটালগুলির মধ্যে একটি।

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

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

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

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

ভি 8 বাগ: #6751

স্টাইলস ফলক আপডেট

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

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

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

চিত্র পূর্বরূপ

একটি সরঞ্জামদণ্ডে চিত্রের পূর্বরূপ দেখতে স্টাইলস ফলকে একটি background-image মান ধরে রাখুন।

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

রঙিন পিকার এখন স্পেস-বিচ্ছিন্ন কার্যকরী রঙ স্বরলিপি ব্যবহার করে

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

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

আপনি গণিত ফলক এবং পরিদর্শন মোড টুলটিপে সিনট্যাক্সও দেখতে পাবেন।

ডেভটুলস নতুন সিনট্যাক্স ব্যবহার করছে কারণ আসন্ন সিএসএস বৈশিষ্ট্যগুলি color() মতো বৈশিষ্ট্যগুলি অবমূল্যায়িত কমা-বিচ্ছিন্ন আর্গুমেন্ট সিনট্যাক্সকে সমর্থন করে না ।

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

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

উপাদান প্যানেলে সম্পত্তি ফলকের অবমূল্যায়ন

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

তথ্যসূত্র:

• console.dir()
• $0

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

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

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

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

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

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

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

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

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

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