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

Jecelyn Yeen

প্রিভিউ বৈশিষ্ট্য: পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি

নতুন পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি আপনার জন্য পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি সম্পর্কে একটি সংক্ষিপ্ত বিবরণ পেতে এবং আপনার ওয়েব সামগ্রী কীভাবে সহায়ক প্রযুক্তির সংস্পর্শে আসে তা আরও ভালভাবে বুঝতে সাহায্য করে।

এলিমেন্টস প্যানেলে, অ্যাক্সেসিবিলিটি প্যানটি খুলুন এবং পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি সক্ষম করুন চেকবক্সটি নির্বাচন করুন। তারপর, DevTools পুনরায় লোড করুন এবং আপনি এলিমেন্টস প্যানেলে একটি নতুন অ্যাক্সেসিবিলিটি বোতাম দেখতে পাবেন।

আপনি এটিতে ক্লিক করে পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি ভিউতে টগল করতে পারেন। আপনি নোডগুলি প্রসারিত করতে পারেন অথবা অ্যাক্সেসিবিলিটি প্যানে বিশদ দেখতে ক্লিক করতে পারেন।

একটি নোড নির্বাচন করুন এবং DOM ট্রি ভিউতে ফিরে যান। সংশ্লিষ্ট DOM নোডটি এখন নির্বাচন করা হয়েছে। DOM নোড এবং এর অ্যাক্সেসিবিলিটি ট্রি নোডের মধ্যে ম্যাপিং বোঝার জন্য এটি একটি দুর্দান্ত উপায়। এটি DOM ট্রি ⬌ অ্যাক্সেসিবিলিটি ট্রি ভিউয়ের জন্যও কাজ করে!

পূর্বে, অ্যাক্সেসিবিলিটি ট্রি অ্যাক্সেসিবিলিটি প্যানে পাওয়া যেত। ভিউ সীমিত, এটি আপনাকে শুধুমাত্র একটি একক নোড এবং এর পূর্বসূরীদের অন্বেষণ করতে সক্ষম করে।

আমাদের দল এখনও এই প্রিভিউ বৈশিষ্ট্যটি নিয়ে সক্রিয়ভাবে কাজ করছে। আরও উন্নত বৈশিষ্ট্যের জন্য আমরা আপনার প্রতিক্রিয়া আশা করছি!

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

পরিবর্তন ট্যাবে আরও সুনির্দিষ্ট পরিবর্তনগুলি

পরিবর্তন ট্যাবে কোড পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে প্রিটি-প্রিন্ট করা হয়।

পূর্বে, মিনিফায়েড সোর্স কোডের প্রকৃত পরিবর্তনগুলি ট্রেস করা কঠিন ছিল কারণ সমস্ত কোড একটি একক লাইনে দেখানো হত।

ক্রোমিয়াম সমস্যা: 1238818 , 1268754 , 1086491

ব্যবহারকারীর প্রবাহ রেকর্ডিংয়ের জন্য দীর্ঘ সময়সীমা সেট করুন

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

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

এটি ঠিক করার জন্য আমরা নতুন টাইমআউট সেটিংস ব্যবহার করতে পারি। মেনু আইটেমে ক্লিক করে ধাপটি প্রসারিত করুন। ধাপটি সম্পাদনা করুন "সময়সীমা যোগ করুন" এবং এটি 6000 মিলিসেকেন্ডে সেট করুন (6s এর সমান)।

ঐচ্ছিকভাবে, আপনি সমস্ত ধাপের জন্য রিপ্লে সেটিংসে টাইমআউট সামঞ্জস্য করতে পারেন। রিপ্লে সেটিংস প্রসারিত করুন এবং টাইমআউট মান সম্পাদনা করুন।

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

ব্যাক/ফরোয়ার্ড ক্যাশে ট্যাব ব্যবহার করে নিশ্চিত করুন যে আপনার পৃষ্ঠাগুলি ক্যাশেযোগ্য।

ব্যাক/ফরোয়ার্ড ক্যাশে (বা bfcache) হল একটি ব্রাউজার অপ্টিমাইজেশন যা তাৎক্ষণিকভাবে ব্যাক এবং ফরোয়ার্ড নেভিগেশন সক্ষম করে।

নতুন ব্যাক/ফরোয়ার্ড ক্যাশে ট্যাব আপনার পৃষ্ঠাগুলি পরীক্ষা করে নিশ্চিত করতে সাহায্য করতে পারে যে সেগুলি bfcache-এর জন্য অপ্টিমাইজ করা হয়েছে, এবং যে কোনও সমস্যা যা তাদের যোগ্য হতে বাধা দিচ্ছে তা সনাক্ত করতে পারে।

একটি নির্দিষ্ট পৃষ্ঠা পরীক্ষা করতে, Chrome-এ এটিতে নেভিগেট করুন এবং তারপর DevTools-এ Application > Back-forward Cache- এ যান। এরপর, Test back/forward cache বোতামে ক্লিক করুন এবং DevTools পৃষ্ঠাটি bfcache থেকে পুনরুদ্ধার করা যেতে পারে কিনা তা নির্ধারণ করার জন্য পিছনে এবং পিছনে নেভিগেট করার চেষ্টা করবে।

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

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

নতুন প্রোপার্টিজ প্যান ফিল্টার

যদি আপনি Properties প্যানে একটি নির্দিষ্ট সম্পত্তির উপর ফোকাস করতে চান, তাহলে আপনি এখন নতুন Filter টেক্সটবক্সে সেই সম্পত্তির নাম বা মান টাইপ করতে পারেন।

ডিফল্টরূপে, যেসব বৈশিষ্ট্যের মান null বা undefined , সেগুলি দেখানো হয় না। সমস্ত বৈশিষ্ট্য দেখতে "সব দেখান " চেকবক্সটি সক্রিয় করুন।

এই উন্নত বৈশিষ্ট্যগুলি আপনাকে আপনার পছন্দের সম্পত্তিগুলিতে দ্রুত পৌঁছানোর সুযোগ দেয় এবং এর ফলে আপনার উৎপাদনশীলতা উন্নত হয়!

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

CSS forced-colors মিডিয়া বৈশিষ্ট্যটি অনুকরণ করুন

ফোর্সড-কালারস সিএসএস মিডিয়া বৈশিষ্ট্যটি ব্যবহারকারী এজেন্ট ফোর্সড কালার মোড (যেমন উইন্ডোজ হাই কনট্রাস্ট মোড) সক্ষম করেছে কিনা তা সনাক্ত করতে ব্যবহৃত হয় যেখানে এটি পৃষ্ঠায় ব্যবহারকারী-নির্বাচিত সীমিত রঙের প্যালেট প্রয়োগ করে।

কমান্ড মেনু খুলুন, Show Rendering কমান্ডটি চালান, এবং তারপর Emulate CSS media feature forced-colors ড্রপডাউন সেট করুন।

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

হোভার কমান্ডে রুলার দেখান

আপনি এখন কমান্ড মেনু খুলতে পারেন এবং Show rulers on hover কমান্ডটি চালাতে পারেন। পৃষ্ঠার রুলারগুলি একটি উপাদানের প্রস্থ এবং উচ্চতা পরিমাপ করা সহজ করে তোলে।

পূর্বে, আপনি শুধুমাত্র সেটিংস > রুলার দেখান চেকবক্সের মাধ্যমে পৃষ্ঠা রুলার সক্ষম করতে পারতেন।

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

ফ্লেক্সবক্স এডিটরে row-reverse এবং column-reverse সমর্থন করুন

ফ্লেক্সবক্স এডিটরটি flex-direction row-reverse এবং column-reverse সমর্থন করার জন্য দুটি নতুন বোতাম যুক্ত করেছে।

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

XHR রিপ্লে করার জন্য এবং সমস্ত অনুসন্ধান ফলাফল প্রসারিত করার জন্য নতুন কীবোর্ড শর্টকাট

নেটওয়ার্ক প্যানেলে XHR রিপ্লে করার জন্য কীবোর্ড শর্টকাট

নেটওয়ার্ক প্যানেলে একটি XHR অনুরোধ নির্বাচন করুন এবং XHR রিপ্লে করতে কীবোর্ডে R টিপুন। পূর্বে, আপনি কেবল প্রসঙ্গ মেনু (ডান ক্লিক করুন > XHR রিপ্লে করুন ) এর মাধ্যমে XHR রিপ্লে করতে পারতেন।

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

সমস্ত অনুসন্ধান ফলাফল প্রসারিত করার জন্য কীবোর্ড শর্টকাট

অনুসন্ধান ট্যাবে একটি নতুন শর্টকাট যুক্ত করা হয়েছে যা আপনাকে সমস্ত অনুসন্ধান ফলাফল প্রসারিত এবং সংকোচনের অনুমতি দেয়। পূর্বে, আপনি একবারে একটি ফাইলে ক্লিক করে কেবল অনুসন্ধান ফলাফল প্রসারিত এবং সংকোচন করতে পারতেন।

Esc > 3-ডট মেনু > Search এর মাধ্যমে অনুসন্ধান ট্যাবটি খুলুন। একটি অনুসন্ধান স্ট্রিং (যেমন ফাংশন) লিখুন এবং অনুসন্ধান ফলাফলের তালিকা দেখতে এন্টার টিপুন। অনুসন্ধান ফলাফলগুলিতে ফোকাস করুন এবং অনুসন্ধান ফাইলগুলি প্রসারিত/সংকুচিত করতে নিম্নলিখিত শর্টকাটটি ব্যবহার করুন:

• উইন্ডোজ / লিনাক্স - Ctrl + Shift + { অথবা }
• MacOS - Cmd + Options + { অথবা }

Chrome DevTools-এ কীবোর্ড শর্টকাটগুলির রেফারেন্সের জন্য কীবোর্ড শর্টকাটগুলিতে যান।

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

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

লাইটহাউস প্যানেল এখন লাইটহাউস ৯ চালাচ্ছে। লাইটহাউস এখন একই আইডি শেয়ার করা সমস্ত উপাদানের তালিকা তৈরি করবে।

অ-অনন্য উপাদান আইডি একটি সাধারণ অ্যাক্সেসিবিলিটি সমস্যা। উদাহরণস্বরূপ, একটি aria-labelledby অ্যাট্রিবিউটে উল্লেখিত আইডি একাধিক উপাদানে ব্যবহৃত হয়।

আপডেট সম্পর্কে আরও বিস্তারিত জানার জন্য Lighthouse 9.0-এ নতুন কী আছে তা দেখুন।

​

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

উন্নত উৎস প্যানেল

CodeMirror 6 ব্যবহার করার জন্য সোর্স প্যানেল আপগ্রেড করার সাথে সাথে এর স্থিতিশীলতার অনেক উন্নতি হয়েছে। এখানে কিছু উল্লেখযোগ্য উন্নতি দেওয়া হল:

• বড় ফাইল খোলার সময় উল্লেখযোগ্যভাবে দ্রুত (যেমন WASM, JavaScript)
• কোডের মধ্য দিয়ে যাওয়ার সময় আর এলোমেলো স্ক্রোলিং করার দরকার নেই
• সম্পাদনাযোগ্য উৎসের জন্য উন্নত স্বয়ংক্রিয়-সম্পূর্ণ পরামর্শ (যেমন স্নিপেট, স্থানীয় ওভাররাইড)

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

বিবিধ হাইলাইটস

এই রিলিজে কিছু উল্লেখযোগ্য সংশোধন করা হয়েছে:

• নেটওয়ার্ক অনুরোধের জলপ্রপাত চিত্রটি সঠিকভাবে প্রদর্শন করা হচ্ছে। পূর্বে, স্টাইলটি নষ্ট ছিল। ( 1275501 )
• সোর্স প্যানেলে লম্বা লাইন সহ ডকুমেন্ট অনুসন্ধান করার সময় কোড হাইলাইটটি নষ্ট হয়ে গিয়েছিল। এটি এখন ঠিক করা হয়েছে। ( 1275496 )
• নেটওয়ার্ক অনুরোধে আর কোনও ডুপ্লিকেট পেলোড ট্যাব নেই। ( ১২৭৩৯৭২ )
• পারফরম্যান্স প্যানেলের সারাংশ বিভাগে অনুপস্থিত লেআউট শিফটের বিবরণ ঠিক করা হয়েছে। ( ১২৫৯৬০৬ )
• নেটওয়ার্ক অনুসন্ধান কোয়েরিতে ইচ্ছামত অক্ষর (যেমন , , . ) সমর্থন করে। ( 1267196 )

[পরীক্ষামূলক] রিপোর্টিং API ফলকে শেষ বিন্দু

আপনার পৃষ্ঠায় তৈরি হওয়া প্রতিবেদন এবং তাদের স্থিতি পর্যবেক্ষণ করতে সাহায্য করার জন্য Chrome 96 -এ পরীক্ষামূলক রিপোর্টিং API প্যানটি চালু করা হয়েছিল।

এন্ডপয়েন্টস বিভাগটি এখন উপলব্ধ। এটি আপনাকে Reporting-Endpoints হেডারে কনফিগার করা সমস্ত এন্ডপয়েন্টের একটি সারসংক্ষেপ দেয়।

নিরাপত্তা লঙ্ঘন, অবচিত API কল এবং আরও অনেক কিছু পর্যবেক্ষণ করতে রিপোর্টিং API ব্যবহার করতে শিখুন।

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

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

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

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

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

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

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

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