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

Jecelyn Yeen

নতুন মিডিয়া প্যানেল

DevTools এখন মিডিয়া প্যানেলে মিডিয়া প্লেয়ারের তথ্য প্রদর্শন করে।

DevTools-এ নতুন মিডিয়া প্যানেলের আগে, ভিডিও প্লেয়ার সম্পর্কে লগিং এবং ডিবাগ তথ্য chrome://media-internals এ পাওয়া যেত।

নতুন মিডিয়া প্যানেল ভিডিও প্লেয়ারের মতো একই ব্রাউজার ট্যাবে ইভেন্ট, লগ, বৈশিষ্ট্য এবং ফ্রেম ডিকোডের টাইমলাইন দেখার একটি সহজ উপায় প্রদান করে। আপনি সম্ভাব্য সমস্যাগুলি দ্রুত লাইভ দেখতে এবং পরিদর্শন করতে পারেন (যেমন কেন ড্রপ করা ফ্রেমগুলি ঘটছে, কেন জাভাস্ক্রিপ্ট অপ্রত্যাশিতভাবে প্লেয়ারের সাথে ইন্টারঅ্যাক্ট করছে)।

ক্রোমিয়াম সমস্যা: ১০১৮৪১৪

এলিমেন্টস প্যানেলের প্রসঙ্গ মেনুর মাধ্যমে নোডের স্ক্রিনশট ক্যাপচার করুন

আপনি এখন এলিমেন্টস প্যানেলের প্রসঙ্গ মেনু ব্যবহার করে নোড স্ক্রিনশট ক্যাপচার করতে পারবেন।

উদাহরণস্বরূপ, আপনি উপাদানটিতে ডান ক্লিক করে এবং ক্যাপচার নোড স্ক্রিনশট নির্বাচন করে বিষয়বস্তু তালিকার একটি স্ক্রিনশট নিতে পারেন।

ক্রোমিয়াম সমস্যা: ১১০০২৫৩

ট্যাব আপডেটের সমস্যা

কনসোল প্যানেলের সমস্যা সতর্কতা বারটি এখন একটি নিয়মিত বার্তা দিয়ে প্রতিস্থাপিত হয়েছে।

থার্ড-পার্টি কুকির সমস্যাগুলি এখন ডিফল্টভাবে "সমস্যা" ট্যাবে লুকানো থাকে। এগুলি দেখতে নতুন " তৃতীয়-পক্ষের কুকির সমস্যা অন্তর্ভুক্ত করুন" চেকবক্সটি সক্ষম করুন।

ক্রোমিয়াম সমস্যা: 1096481 , 1068116 , 1080589

অনুপস্থিত স্থানীয় ফন্টগুলি অনুকরণ করুন

রেন্ডারিং ট্যাবটি খুলুন এবং @font-face নিয়মে অনুপস্থিত local() উৎসগুলি অনুকরণ করতে নতুন Disable local fonts বৈশিষ্ট্যটি ব্যবহার করুন।

উদাহরণস্বরূপ, যখন আপনার ডিভাইসে "Rubik" ফন্টটি ইনস্টল করা থাকে এবং @font-face src নিয়ম এটিকে local() ফন্ট হিসেবে ব্যবহার করে, তখন Chrome আপনার ডিভাইস থেকে local ফন্ট ফাইলটি ব্যবহার করে।

যখন স্থানীয় ফন্টগুলি অক্ষম করা সক্ষম করা হয়, তখন DevTools local() ফন্টগুলিকে উপেক্ষা করে এবং নেটওয়ার্ক থেকে সেগুলি নিয়ে আসে।

প্রায়শই, ডেভেলপার এবং ডিজাইনাররা ডেভেলপমেন্টের সময় একই ফন্টের দুটি ভিন্ন কপি ব্যবহার করেন:

• আপনার ডিজাইন টুলের জন্য একটি স্থানীয় ফন্ট, এবং
• আপনার কোডের জন্য একটি ওয়েব ফন্ট

স্থানীয় ফন্টগুলি অক্ষম করলে আপনার জন্য এটি সহজ হয়ে যায়:

• ওয়েব ফন্ট লোডিং কর্মক্ষমতা এবং অপ্টিমাইজেশন ডিবাগ এবং পরিমাপ করুন
• আপনার CSS @font-face নিয়মের সঠিকতা যাচাই করুন।
• ওয়েব ফন্ট এবং তাদের স্থানীয় সংস্করণের মধ্যে কোন পার্থক্য আছে তা আবিষ্কার করুন

ক্রোমিয়াম সমস্যা: 384968

নিষ্ক্রিয় ব্যবহারকারীদের অনুকরণ করুন

Idle Detection API ডেভেলপারদের নিষ্ক্রিয় ব্যবহারকারীদের সনাক্ত করতে এবং নিষ্ক্রিয় অবস্থার পরিবর্তনের উপর প্রতিক্রিয়া জানাতে সাহায্য করে। আপনি এখন DevTools ব্যবহার করে ব্যবহারকারীর অবস্থা এবং স্ক্রিন অবস্থা উভয়ের জন্যই নিষ্ক্রিয় অবস্থার পরিবর্তনগুলি অনুকরণ করতে পারেন, প্রকৃত নিষ্ক্রিয় অবস্থার পরিবর্তনের জন্য অপেক্ষা করার পরিবর্তে। আপনি Drawer থেকে Sensors ট্যাবটি খুলতে পারেন।

ক্রোমিয়াম সমস্যা: ১০৯০৮০২

prefers-reduced-data অনুকরণ করুন

prefers-reduced-data মিডিয়া কোয়েরি সনাক্ত করে যে ব্যবহারকারী এমন বিকল্প সামগ্রী পরিবেশন করতে চান যা পৃষ্ঠাটি রেন্ডার করার জন্য কম ডেটা ব্যবহার করে।

আপনি এখন prefers-reduced-data মিডিয়া কোয়েরি অনুকরণ করতে DevTools ব্যবহার করতে পারেন।

ক্রোমিয়াম সমস্যা: ১০৯৬০৬৮

নতুন জাভাস্ক্রিপ্ট বৈশিষ্ট্যগুলির জন্য সমর্থন

DevTools এখন জাভাস্ক্রিপ্ট ভাষার কিছু সাম্প্রতিক বৈশিষ্ট্যের জন্য আরও ভালো সমর্থন প্রদান করে:

• লজিক্যাল অ্যাসাইনমেন্ট অপারেটর - DevTools এখন কনসোল এবং সোর্স প্যানেলে নতুন অপারেটর &&= , ||= , এবং ??= এর সাথে লজিক্যাল অ্যাসাইনমেন্ট সমর্থন করে।
• প্রিটি-প্রিন্ট নিউমেরিক সেপারেটর - DevTools এখন সোর্স প্যানেলে নিউমেরিক সেপারেটরগুলিকে সঠিকভাবে প্রিটি-প্রিন্ট করে।

ক্রোমিয়াম সমস্যা: 1086817 , 1080569

লাইটহাউস প্যানেলে লাইটহাউস 6.2

লাইটহাউস প্যানেলটি এখন লাইটহাউস 6.2 চালাচ্ছে। পরিবর্তনগুলির সম্পূর্ণ তালিকার জন্য রিলিজ নোটগুলি দেখুন।

লাইটহাউস ৬.২-এ নতুন অডিট:

• দীর্ঘ মেইন থ্রেড টাস্ক এড়িয়ে চলুন । মেইন থ্রেডের দীর্ঘতম টাস্ক রিপোর্ট করে, যা ইনপুট বিলম্বের সবচেয়ে খারাপ অবদানকারীদের সনাক্ত করার জন্য কার্যকর।
• লিঙ্কগুলি ক্রল করা যায় । অ্যাঙ্কর এলিমেন্টের href অ্যাট্রিবিউটটি উপযুক্ত গন্তব্যস্থলের সাথে লিঙ্ক করে কিনা তা পরীক্ষা করুন, যাতে লিঙ্কগুলি আবিষ্কার করা যায়।
• আকারহীন ছবির উপাদান - ছবির উপাদানগুলিতে স্পষ্ট width এবং height সেট করা আছে কিনা তা পরীক্ষা করুন। স্পষ্ট ছবির আকার লেআউট পরিবর্তন কমাতে এবং CLS উন্নত করতে পারে।
• অ-কম্পোজিট অ্যানিমেশনগুলি এড়িয়ে চলুন । অ-কম্পোজিট অ্যানিমেশনগুলি রিপোর্ট করে যা অস্পষ্ট দেখায় এবং CLS হ্রাস করে।
• unload ইভেন্টগুলি শোনে । unload ইভেন্টটি রিপোর্ট করে। unload ইভেন্টটি নির্ভরযোগ্যভাবে কার্যকর না হওয়ায় এর পরিবর্তে pagehide বা visibilitychange ইভেন্টগুলি ব্যবহার করার কথা বিবেচনা করুন।

লাইটহাউস 6.2-এ আপডেট করা অডিট:

• অব্যবহৃত জাভাস্ক্রিপ্ট সরান । যদি কোনও পৃষ্ঠায় সর্বজনীনভাবে অ্যাক্সেসযোগ্য জাভাস্ক্রিপ্ট সোর্স ম্যাপ থাকে তবে লাইটহাউস এখন অডিট উন্নত করবে।

ক্রোমিয়াম সমস্যা: ৭৭২৫৫৮

সার্ভিস ওয়ার্কার্স প্যানে "অন্যান্য উৎস" তালিকার অবচয়

DevTools এখন একটি নতুন ব্রাউজার ট্যাবে অন্যান্য উৎস থেকে আসা পরিষেবা কর্মীদের সম্পূর্ণ তালিকা দেখার জন্য একটি লিঙ্ক প্রদান করে - chrome://serviceworker-internals/?devtools ।

পূর্বে DevTools অ্যাপ্লিকেশন প্যানেল > পরিষেবা কর্মীদের প্যানেলের অধীনে নেস্টেড একটি তালিকা প্রদর্শন করত।

ক্রোমিয়াম সমস্যা: ৮০৭৪৪০

ফিল্টার করা আইটেমের কভারেজের সারাংশ দেখান

DevTools এখন কভারেজ ট্যাবে ফিল্টার প্রয়োগ করলে কভারেজ তথ্যের সারাংশ গতিশীলভাবে পুনঃগণনা করে এবং প্রদর্শন করে। পূর্বে, কভারেজ ট্যাবে সর্বদা সমস্ত কভারেজ তথ্যের সারাংশ প্রদর্শিত হত।

নিচের উদাহরণে লক্ষ্য করুন কিভাবে সারাংশটি প্রথমে বলেছে যে 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. এবং তারপর বলেছে যে 57 kB of 604 kB (10%) used so far. 546 kB unused.

ক্রোমিয়াম সমস্যা: ১০৬১৩৮৫

অ্যাপ্লিকেশন প্যানেলে নতুন ফ্রেমের বিবরণ দৃশ্য

DevTools এখন প্রতিটি ফ্রেমের জন্য একটি বিস্তারিত ভিউ দেখায়। অ্যাপ্লিকেশন প্যানেলে ফ্রেম মেনুর অধীনে একটি ফ্রেমে ক্লিক করে এটি অ্যাক্সেস করুন।

ক্রোমিয়াম সমস্যা: ১০৯৩২৪৭

খোলা জানালার জন্য ফ্রেমের বিবরণ

DevTools এখন ফ্রেম ট্রির নিচে খোলা উইন্ডো / পপ-আপ প্রদর্শন করে। খোলা উইন্ডোর ফ্রেমের বিবরণ ভিউতে অতিরিক্ত সুরক্ষা তথ্য অন্তর্ভুক্ত থাকে।

ক্রোমিয়াম সমস্যা: ১১০৭৭৬৬

নিরাপত্তা এবং বিচ্ছিন্নতা সম্পর্কিত তথ্য (COEP / COOP)

DevTools এখন ফ্রেমের বিবরণে সুরক্ষিত প্রসঙ্গ, ক্রস-অরিজিন-এম্বেডার-পলিসি (COEP) এবং ক্রস-অরিজিন-ওপেনার-পলিসি (COOP) প্রদর্শন করে।

শীঘ্রই ফ্রেম ডিটেইলস ভিউতে আরও নিরাপত্তা তথ্য যোগ করা হবে।

ক্রোমিয়াম সমস্যা: ১০৫১৪৬৬

এলিমেন্ট এবং নেটওয়ার্ক প্যানেল আপডেট

স্টাইলস প্যানে অ্যাক্সেসযোগ্য রঙের পরামর্শ

DevTools এখন কম রঙের বৈপরীত্যযুক্ত টেক্সটের জন্য রঙের পরামর্শ প্রদান করে।

নিচের উদাহরণে, h1 কম কনট্রাস্ট টেক্সট আছে। এটি ঠিক করতে, স্টাইলস প্যানে color বৈশিষ্ট্যের রঙ চয়নকারী খুলুন। কনট্রাস্ট অনুপাত বিভাগটি প্রসারিত করার পরে, DevTools AA এবং AAA রঙের পরামর্শ প্রদান করে। রঙটি প্রয়োগ করতে প্রস্তাবিত রঙের উপর ক্লিক করুন।

ক্রোমিয়াম সমস্যা: ১০৯৩২২৭

এলিমেন্টস প্যানেলে প্রোপার্টিজ প্যানটি পুনঃস্থাপন করুন

প্রোপার্টিজ প্যানটি ফিরে এসেছে, এটি Chrome 84 এ অবচিত ছিল। DevTools এর ভবিষ্যতের সংস্করণে, আমরা উপাদানগুলির প্রোপার্টিজ পরিদর্শনের জন্য কর্মপ্রণালী উন্নত করতে যাচ্ছি।

ক্রোমিয়াম সমস্যা: 1105205 , 1116085

নেটওয়ার্ক প্যানেলে মানব-পঠনযোগ্য X-Client-Data হেডার মান

নেটওয়ার্ক প্যানেলে কোনও নেটওয়ার্ক রিসোর্স পরিদর্শন করার সময়, DevTools এখন হেডারস প্যানে যেকোনো X-Client-Data হেডার মান কোড হিসাবে ফর্ম্যাট করে।

X-Client-Data HTTP হেডারে আপনার ব্রাউজারে সক্রিয় থাকা পরীক্ষামূলক আইডি এবং Chrome ফ্ল্যাগের একটি তালিকা রয়েছে। raw হেডার মানগুলি অস্বচ্ছ স্ট্রিংগুলির মতো দেখায় কারণ এগুলি base-64-এনকোডেড, সিরিয়ালাইজড প্রোটোকল বাফার । ডেভেলপারদের কাছে বিষয়বস্তু আরও স্বচ্ছ করার জন্য, DevTools এখন ডিকোড করা মানগুলি দেখাচ্ছে।

ক্রোমিয়াম সমস্যা: ১১০৩৮৫৪

স্টাইলস প্যানে কাস্টম ফন্টগুলি স্বয়ংক্রিয়ভাবে সম্পূর্ণ করুন

স্টাইলস প্যানে font-family প্রপার্টি সম্পাদনা করার সময় আমদানি করা ফন্ট ফেসগুলি এখন CSS অটো-কমপ্লিশনের তালিকায় যুক্ত করা হয়।

এই উদাহরণে, 'Noto Sans' হল স্থানীয় মেশিনে ইনস্টল করা একটি কাস্টম ফন্ট। এটি CSS সমাপ্তির তালিকায় প্রদর্শিত হয়। পূর্বে, এটি ছিল না।

ক্রোমিয়াম সমস্যা: ১১০৬২২১

নেটওয়ার্ক প্যানেলে ধারাবাহিকভাবে রিসোর্সের ধরণ প্রদর্শন করুন

DevTools এখন ধারাবাহিকভাবে মূল নেটওয়ার্ক অনুরোধের মতো একই রিসোর্স টাইপ প্রদর্শন করে এবং পুনঃনির্দেশ (স্ট্যাটাস 302) ঘটলে টাইপ কলামের মান যোগ / Redirect ।

পূর্বে DevTools মাঝে মাঝে টাইপটি Other পরিবর্তন করত।

ক্রোমিয়াম সমস্যা: ৯৯৭৬৯৪

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

স্টাইলস প্যান এবং নেটওয়ার্ক প্যানেলের ফিল্টার টেক্সট বক্সগুলিতে, এবং এলিমেন্টস প্যানেলের DOM সার্চ টেক্সট বক্সে এখন ক্লিয়ার বোতাম রয়েছে। ক্লিয়ার ক্লিক করলে আপনার ইনপুট করা যেকোনো টেক্সট মুছে যাবে।

ক্রোমিয়াম সমস্যা: ১০৬৭১৮৪

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

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

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

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

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

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

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