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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

prefers-reduced-data media ক্যোয়ারী শনাক্ত করে যে ব্যবহারকারী বিকল্প কন্টেন্ট পরিবেশন করা পছন্দ করেন কিনা যা পেজ রেন্ডার করার জন্য কম ডেটা ব্যবহার করে।

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

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

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

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

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

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

লাইটহাউস প্যানেলে বাতিঘর 6.2

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

বাতিঘর 6.2-এ নতুন অডিট:

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

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

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

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

পরিষেবা কর্মী ফলকে "অন্যান্য উত্স" তালিকার অবমূল্যায়ন৷

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

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

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

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

যখন কভারেজ ট্যাবে ফিল্টার প্রয়োগ করা হয় তখন 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. CSS ফিল্টারিং প্রয়োগ করার পরে।

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

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

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

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

খোলা উইন্ডোগুলির জন্য ফ্রেমের বিশদ বিবরণ

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

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

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

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

ফ্রেমের বিশদ বিবরণ শীঘ্রই আরও নিরাপত্তা তথ্য যোগ করা হবে।

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

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

শৈলী ফলকে অ্যাক্সেসযোগ্য রঙের পরামর্শ

DevTools এখন কম রঙের বৈসাদৃশ্য পাঠ্যের জন্য রঙের পরামর্শ প্রদান করে।

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

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

উপাদান প্যানেলে বৈশিষ্ট্য ফলক পুনঃস্থাপন করুন

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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