এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

স্বয়ংক্রিয় জায়গায় সুন্দর মুদ্রণ

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

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

স্বয়ংক্রিয় জায়গায় সুন্দর মুদ্রণের আগে এবং পরে একটি ছোট ফাইল দেখান।

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

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

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

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

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

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

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

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

ক্রোমিয়াম সমস্যা: 1385374 , 1385632 , 1385281 , 1385269 , 1383892 , 1361862 , 1383451 , 1392106 , 1149734

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

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

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

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

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

ক্রোমিয়াম সমস্যা: 1399436 , 1276960

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

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

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

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

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

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

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

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