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

জেসলিন ইয়েন

নতুন CSS গ্রিড ডিবাগিং টুল

DevTools now has better support for CSS grid debugging!

সিএসএস গ্রিড ডিবাগিং

যখন আপনার পৃষ্ঠার কোনও HTML উপাদানে display: grid অথবা display: inline-grid প্রয়োগ করা হয়, তখন আপনি Elements প্যানেলে তার পাশে একটি grid ব্যাজ দেখতে পাবেন। পৃষ্ঠায় একটি গ্রিড ওভারলে প্রদর্শন টগল করতে ব্যাজটিতে ক্লিক করুন।

The new Layout pane has a Grid section offering you a number of options for viewing the grids.

আরও জানতে ডকুমেন্টেশনটি দেখুন।

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

নতুন WebAuthn ট্যাব

You can now emulate authenticators and debug the Web Authentication API with the new WebAuthn tab .

Select More options > More tools > WebAuthn to open the WebAuthn tab.

WebAuthn ট্যাব

Prior to the new WebAuthn tab, there was no native WebAuthn debugging support on Chrome. Developers needed physical authenticators to test their web application with Web Authentication API.

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

Check out our documentation to learn more about the WebAuthn feature.

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

উপরের এবং নীচের প্যানেলের মধ্যে সরঞ্জামগুলি সরান

DevTools now support moving tools in DevTools between the top and bottom panel. This way, you can view any two tools at once.

For example, if you would like to view Elements and Sources panel at once, you can right click on the Sources panel, and select Move to bottom to move it to the bottom.

নীচে সরান

Similarly, you can move any bottom tab to the top by right clicking on a tab and select Move to top .

উপরে সরান

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

এলিমেন্ট প্যানেল আপডেট

View the Computed sidebar pane in the Styles pane

You can now toggle the Computed sidebar pane in the Styles pane.

The Computed sidebar pane in the Styles pane is collapsed by default. Click on the button to toggle it.

কম্পিউটেড সাইডবার ফলক

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

কম্পিউটেড প্যানে CSS প্রোপার্টি গ্রুপ করা

You can now group the CSS properties by categories in the Computed pane.

With this new grouping feature, it will be easier to navigate in the Computed pane (less scrolling) and selectively focus on a set of related properties for CSS inspection.

On the Elements panel, select an element. Toggle the Group checkbox to group/ungroup the CSS properties.

CSS বৈশিষ্ট্যগুলিকে গ্রুপ করা হচ্ছে

ক্রোমিয়াম সমস্যা: 1096230 , 1084673 , 1106251

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

The Lighthouse panel is now running Lighthouse 6.4. Check out the release notes for a full list of changes.

বাতিঘর

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

  • Preload fonts . Validates if all fonts that use font-display: optional were preloaded.
  • Valid source maps . Audits if a page has valid source maps for large, first-party JavaScript.
  • [পরীক্ষামূলক] বৃহৎ জাভাস্ক্রিপ্ট লাইব্রেরি । বৃহৎ জাভাস্ক্রিপ্ট লাইব্রেরি খারাপ কর্মক্ষমতা সৃষ্টি করতে পারে। এই অডিটটি moment.js এর মতো সাধারণ, বৃহৎ জাভাস্ক্রিপ্ট লাইব্রেরির সস্তা বিকল্পগুলির পরামর্শ দেয়।

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

সময় বিভাগে performance.mark() ইভেন্টগুলি

The Timings section of a Performance recording now marks performance.mark() events.

Performance.mark ইভেন্ট

নেটওয়ার্ক প্যানেলে নতুন resource-type এবং url ফিল্টার

Use the new resource-type and url keywords in the Network panel to filter network requests.

For example, use resource-type:image to focus on the network requests that are images.

রিসোর্স-টাইপ ফিল্টার

Check out filter requests by properties to discover more special keywords like resource-type and url .

ক্রোমিয়াম সমস্যা: 1121141 , 1104188

ফ্রেমের বিবরণ দেখুন আপডেট

এন্ডপয়েন্টে COEP এবং COOP reporting to প্রদর্শন করুন

You can now view the Cross-Origin Embedder Policy (COEP) and Cross-Origin Opener Policy (COOP) reporting to endpoint under the Security & Isolation section.

The Reporting API defines a new HTTP header, Report-To , that gives web developers a way to specify server endpoints for the browser to send warnings and errors to.

এন্ডপয়েন্টে রিপোর্ট করা

Read this article to learn more about how to enable COEP and COOP and make your website "cross-origin isolated".

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

COEP এবং COOP report-only মোড প্রদর্শন করুন

DevTools now displays report-only label for COEP and COOP that are set to report-only mode.

শুধুমাত্র রিপোর্ট লেবেল

Watch this video to learn about how to prevent information leaks and enable COOP and COEP in your website.

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

আরও সরঞ্জাম মেনুতে Settings বন্ধ করা

The Settings in the More tools menu has been deprecated. Open the Settings from the main panel instead.

প্রধান প্যানেলে সেটিংস

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

পরীক্ষামূলক বৈশিষ্ট্য

View and fix color contrast issues in the CSS Overview panel

CSS Overview panel now displays a list of low color contrast texts of your page.

In this example, the demo page has a low color contrast issue. Click on the issue, you can view a list of elements that have the issue.

কম রঙের বৈপরীত্যের সমস্যা

Click on an element in the list to open the element in Elements panel. DevTools provides auto color suggestion to help you fix the low contrast text.

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

DevTools-এ কীবোর্ড শর্টকাট কাস্টমাইজ করুন

You can now customize the keyboard shortcuts for your favourite commands in DevTools.

Go to Settings > Shortcuts , hovering on a command and click the Edit button (pen icon) to customize the keyboard shortcut.

কীবোর্ড শর্টকাটগুলি কাস্টমাইজ করুন

To reset all shortcuts, click on Restore default shortcuts .

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

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

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

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

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

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

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