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

জেসলিন ইয়েন

রিলোড করার সময় পারফরম্যান্স প্যানেল সাফ করা হচ্ছে

The Performance panel now clears both the screenshot and trace when you click the Start profiling and reload page button.

পূর্বে, পারফরম্যান্স প্যানেল পূর্ববর্তী রেকর্ডিংগুলির স্ক্রিনশট সহ একটি টাইমলাইন প্রদর্শন করত। এর ফলে প্রকৃত পরিমাপ কখন শুরু হয়েছিল তা দেখা কঠিন হয়ে পড়ে। প্যানেলটি এখন সর্বদা প্রথমে about:blank পৃষ্ঠায় নেভিগেট করে নিশ্চিত করে যে রেকর্ডিংটি একটি ফাঁকা ট্রেস দিয়ে শুরু হয়। এটি পারফরম্যান্স ইনসাইট প্যানেলের সাথে সারিবদ্ধ যা ইতিমধ্যেই একই কাজ করেছে।

রিলোড করার সময় পারফরম্যান্স প্যানেল সাফ করা হচ্ছে।

ক্রোমিয়াম সমস্যা: 1101268 , 1382044

রেকর্ডার আপডেট

রেকর্ডারে আপনার ব্যবহারকারী প্রবাহের কোডটি দেখুন এবং হাইলাইট করুন।

The Recorder now offers split code view, making it easier to view your user flow code. To access the code view, open a user flow and click Show Code .

বাম দিকের প্রতিটি ধাপের উপর কার্সার রাখার সময় রেকর্ডারটি সংশ্লিষ্ট কোডটি হাইলাইট করে, যার ফলে আপনার প্রবাহ ট্র্যাক করা সহজ হয়। আপনি ড্রপডাউন ব্যবহার করে কোড ফর্ম্যাট পরিবর্তন করতে পারেন, যা আপনাকে নাইটওয়াচ টেস্ট স্ক্রিপ্টের মতো ফর্ম্যাটগুলির মধ্যে স্যুইচ করতে দেয়।

রেকর্ডারে কোড ভিউ।

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

রেকর্ডিংয়ের নির্বাচক প্রকারগুলি কাস্টমাইজ করুন

আপনি এমন রেকর্ডিং তৈরি করতে পারেন যা শুধুমাত্র আপনার কাছে গুরুত্বপূর্ণ নির্বাচক প্রকারগুলিকে ক্যাপচার করে। নতুন রেকর্ডিং তৈরি করার সময় নির্বাচক প্রকারগুলিকে কাস্টমাইজ করার নতুন বিকল্পের সাহায্যে, আপনি XPath এর মতো নির্বাচকদের অন্তর্ভুক্ত বা বাদ দিতে পারেন, যাতে আপনি আপনার ব্যবহারকারী প্রবাহে কেবল আপনার পছন্দসই নির্বাচকদের ক্যাপচার করতে পারেন।

নির্বাচকের ধরণ কাস্টমাইজ করার জন্য নতুন বিকল্প।

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

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

The Recorder now allows editing during recording, providing you with the flexibility to make changes in real-time. You no longer need to end the recording to make adjustments.

ব্যবহারকারীর প্রবাহ রেকর্ডিংয়ের সময় সম্পাদনা করা।

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

স্বয়ংক্রিয়ভাবে ইন-প্লেস প্রিটি প্রিন্ট

The Sources panel now automatically pretty prints minified source files in place. You can click on the pretty print button { } to undo it.

পূর্বে, সোর্স প্যানেলে ডিফল্টভাবে মিনিফাই করা কন্টেন্ট দেখাত। কন্টেন্ট ফরম্যাট করার জন্য, আপনাকে ম্যানুয়ালি প্রিটি প্রিন্ট বোতামে ক্লিক করতে হত। তার উপরে, প্রিটি-প্রিন্ট করা কন্টেন্ট একই ট্যাবে প্রদর্শিত হত না, বরং অন্য একটি ::formatted ট্যাবে প্রদর্শিত হত।

Show a minified file before and after automatic in-place pretty print.

ক্রোমিয়াম সমস্যা: 1383453 , 1382752 , 1382397

Vue, SCSS এবং আরও অনেক কিছুর জন্য উন্নত সিনট্যাক্স হাইলাইট এবং ইনলাইন প্রিভিউ

সোর্স প্যানেলটি বেশ কয়েকটি বহুল ব্যবহৃত ফাইল ফরম্যাটের জন্য সিনট্যাক্স হাইলাইটিং উন্নত করেছে, যার ফলে আপনি কোড আরও সহজে পড়তে এবং এর কাঠামো চিনতে পারবেন, যার মধ্যে রয়েছে Vue, JSX, Dart, LESS, SCSS, SASS এবং ইনলাইন CSS।

Vue-তে সিনট্যাক্স হাইলাইটিং।

In addition, DevTools also improved the inline preview for Vue, inline HTML, and TSX. Hover over a variable to preview its value.

Vue-এর ইনলাইন প্রিভিউ।

তা ছাড়া, DevTools এখন Sources প্যানেলে একটি স্টাইলশিটের সোর্স ম্যাপ দেখায়। উদাহরণস্বরূপ, যখন আপনি একটি SCSS ফাইল খোলেন, তখন আপনি সোর্সম্যাপ লিঙ্কে ক্লিক করে সম্পর্কিত CSS ফাইলটি অ্যাক্সেস করতে পারেন।

SASS-এর জন্য উৎস মানচিত্রের লিঙ্ক।

Chromium issues: 1385374 , 1385632 , 1385281 , 1385269 , 1383892 , 1361862 , 1383451 , 1392106 , 1149734

কনসোলে আর্গোনমিক এবং সামঞ্জস্যপূর্ণ স্বয়ংসম্পূর্ণতা

DevTools enhances the autocompletion experience by implementing the following changes:

  • Tab সর্বদা স্বয়ংক্রিয়ভাবে সম্পন্ন করার জন্য ব্যবহৃত হয়।
  • The behavior of Arrow right and Enter varies based on context.
  • The autocompletion experience is consistent across text editors, in the Console , Sources , and Elements panels

For example, here is what happens when you type cons in the Console :

  • The Console displays a list of autocomplete suggestions, with a subtle dotted border around the top option indicating that navigation has not yet begun. Dotted border around the top autocomplete option.

  • The Console executes the line when you press Enter . Previously, it would automatically complete the line with the top suggestion. To auto-complete, press either Tab or Arrow Right . এন্টারে লাইনটি কার্যকর করে।

  • The Console highlights the selected option as you navigate through the suggestion list using the Arrow up and Arrow down shortcuts. সাজেশন নেভিগেশনের সময় হাইলাইটগুলি।

  • To auto-complete with the selected option during navigation, use the keyboard keys Tab , Enter , or Arrow Right . Auto-complete with the selected option during navigation.

  • When editing in the middle of code, for example, when the cursor is between n and s , use Tab for autocompletion, Enter to execute the line, and Arrow Right to move the cursor forward. কোডের মাঝখানে সম্পাদনা করা হচ্ছে।

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

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

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

  • A regression issue in DevTools, where it failed to stop at the debugger statement in inline scripts, has been resolved. ( 1385374 )
  • একটি নতুন কনসোল সেটিং যা আপনাকে ডিফল্টভাবে console.trace() বার্তাগুলি প্রসারিত বা আড়াল করতে দেয়। সেটিংস > পছন্দ > ডিফল্টভাবে console.trace() বার্তাগুলি প্রসারিত করে সেটিংস টগল করুন। ( 1139616 )
  • The Snippets pane in the Sources panel supports enhanced autocomplete, similar to the Console . ( 772949 ) স্নিপেটগুলিতে স্বয়ংক্রিয়ভাবে সম্পন্ন।

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

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

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

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

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

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