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

Jecelyn Yeen

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

এখন আপনি যখন "প্রোফাইলিং শুরু করুন এবং পৃষ্ঠা পুনরায় লোড করুন" বোতামে ক্লিক করেন তখন পারফরম্যান্স প্যানেল স্ক্রিনশট এবং ট্রেস উভয়ই সাফ করে দেয়।

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

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

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

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

রেকর্ডারটি এখন স্প্লিট কোড ভিউ অফার করে, যার ফলে আপনার ব্যবহারকারীর প্রবাহ কোড দেখা সহজ হয়। কোড ভিউ অ্যাক্সেস করতে, একটি ব্যবহারকারীর প্রবাহ খুলুন এবং কোড দেখান ক্লিক করুন।

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

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

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

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

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

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

রেকর্ডার এখন রেকর্ডিংয়ের সময় সম্পাদনা করার অনুমতি দেয়, যা আপনাকে রিয়েল-টাইমে পরিবর্তন করার নমনীয়তা প্রদান করে। সমন্বয় করার জন্য আপনাকে আর রেকর্ডিং শেষ করতে হবে না।

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

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

সোর্স প্যানেল এখন স্বয়ংক্রিয়ভাবে প্রিটি মিনিফাই করা সোর্স ফাইলগুলিকে জায়গায় প্রিন্ট করে। আপনি প্রিটি প্রিন্ট বোতামে ক্লিক করে { } এটি পূর্বাবস্থায় ফেরাতে পারেন।

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

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

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

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

এছাড়াও, DevTools Vue, inline HTML এবং TSX এর জন্য ইনলাইন প্রিভিউ উন্নত করেছে। একটি ভ্যারিয়েবলের মান প্রিভিউ করার জন্য তার উপর কার্সার রাখুন।

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

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

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

DevTools নিম্নলিখিত পরিবর্তনগুলি বাস্তবায়নের মাধ্যমে স্বয়ংসম্পূর্ণতার অভিজ্ঞতা উন্নত করে:

• Tab সর্বদা স্বয়ংক্রিয়ভাবে সম্পন্ন করার জন্য ব্যবহৃত হয়।
• Arrow right এবং Enter এর আচরণ প্রসঙ্গের উপর নির্ভর করে পরিবর্তিত হয়।
• কনসোল , সোর্স এবং এলিমেন্টস প্যানেলে টেক্সট এডিটরগুলিতে অটোকমপ্লিশন অভিজ্ঞতা সামঞ্জস্যপূর্ণ।

উদাহরণস্বরূপ, কনসোলে cons টাইপ করলে যা ঘটে তা এখানে দেওয়া হল:

• কনসোলটি স্বয়ংক্রিয়ভাবে সম্পূর্ণ হওয়ার পরামর্শের একটি তালিকা প্রদর্শন করে, উপরের বিকল্পের চারপাশে একটি সূক্ষ্ম বিন্দুযুক্ত সীমানা নির্দেশ করে যে নেভিগেশন এখনও শুরু হয়নি।

• যখন আপনি Enter চাপবেন তখন কনসোল লাইনটি কার্যকর করবে। পূর্বে, এটি উপরের পরামর্শ সহ স্বয়ংক্রিয়ভাবে লাইনটি সম্পূর্ণ করবে। স্বয়ংক্রিয়ভাবে সম্পূর্ণ করতে, Tab অথবা Arrow Right টিপুন।

• Arrow up এবং Arrow down শর্টকাট ব্যবহার করে পরামর্শ তালিকার মধ্য দিয়ে নেভিগেট করার সময় কনসোল নির্বাচিত বিকল্পটি হাইলাইট করে।

• নেভিগেশনের সময় নির্বাচিত বিকল্পটি স্বয়ংক্রিয়ভাবে সম্পূর্ণ করতে, কীবোর্ড কীগুলি Tab , Enter , অথবা Arrow Right ব্যবহার করুন।

• কোডের মাঝখানে সম্পাদনা করার সময়, উদাহরণস্বরূপ, যখন কার্সারটি n এবং s মধ্যে থাকে, তখন স্বয়ংক্রিয়ভাবে সম্পন্ন করার জন্য Tab , লাইনটি কার্যকর করার জন্য Enter এবং কার্সারটিকে এগিয়ে নিয়ে যাওয়ার জন্য Arrow Right ব্যবহার করুন।

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

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

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

• DevTools-এ একটি রিগ্রেশন সমস্যা, যেখানে এটি ইনলাইন স্ক্রিপ্টে debugger স্টেটমেন্টে থামাতে ব্যর্থ হয়েছিল, তা সমাধান করা হয়েছে। ( 1385374 )
• একটি নতুন কনসোল সেটিং যা আপনাকে ডিফল্টভাবে console.trace() বার্তাগুলি প্রসারিত বা আড়াল করতে দেয়। সেটিংস > পছন্দ > ডিফল্টভাবে console.trace() বার্তাগুলি প্রসারিত করে সেটিংস টগল করুন। ( 1139616 )
• সোর্স প্যানেলের স্নিপেটস প্যানটি কনসোলের মতো উন্নত অটোকম্পলিট সমর্থন করে। ( 772949 )

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

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

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

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

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

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

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