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

Jecelyn Yeen

ওয়েবসকেট অনুরোধ থ্রটলিং করা হচ্ছে

নেটওয়ার্ক প্যানেল এখন থ্রটলিং ওয়েব সকেট অনুরোধ সমর্থন করে। পূর্বে, ওয়েব সকেট অনুরোধগুলিতে নেটওয়ার্ক থ্রটলিং কাজ করত না।

নেটওয়ার্ক প্যানেলটি খুলুন, একটি ওয়েব সকেট রিকোয়েস্টে ক্লিক করুন এবং বার্তা স্থানান্তর পর্যবেক্ষণ করতে বার্তা ট্যাবটি খুলুন। গতি নিয়ন্ত্রণ করতে স্লো 3G নির্বাচন করুন।

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

অ্যাপ্লিকেশন প্যানেলে নতুন রিপোর্টিং API ফলক

আপনার পৃষ্ঠায় তৈরি হওয়া প্রতিবেদন এবং তাদের স্থিতি পর্যবেক্ষণ করতে নতুন রিপোর্টিং API ফলকটি ব্যবহার করুন।

রিপোর্টিং এপিআই আপনার পৃষ্ঠার নিরাপত্তা লঙ্ঘন, বন্ধ করা এপিআই কল এবং আরও অনেক কিছু পর্যবেক্ষণ করতে সাহায্য করার জন্য ডিজাইন করা হয়েছে।

রিপোর্টিং API ব্যবহার করে এমন একটি পৃষ্ঠা খুলুন (যেমন ডেমো পৃষ্ঠা )। অ্যাপ্লিকেশন প্যানেলে, ব্যাকগ্রাউন্ড পরিষেবা বিভাগে স্ক্রোল করুন এবং রিপোর্টিং API ফলকটি নির্বাচন করুন।

রিপোর্ট বিভাগটি আপনার পৃষ্ঠায় তৈরি হওয়া রিপোর্টগুলির একটি তালিকা এবং তাদের অবস্থা দেখায়। রিপোর্টের বিশদ দেখতে এটিতে ক্লিক করুন।

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

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

রেকর্ডার প্যানেলে উপাদানটি দৃশ্যমান/ক্লিকযোগ্য না হওয়া পর্যন্ত অপেক্ষা করতে সহায়তা করুন

ব্যবহারকারীর ফ্লো রেকর্ডিং রিপ্লে করার সময়, রেকর্ডার প্যানেল এখন ভিউপোর্টে উপাদানটি দৃশ্যমান বা ক্লিকযোগ্য না হওয়া পর্যন্ত অপেক্ষা করবে অথবা ধাপটি রিপ্লে করার আগে উপাদানটিকে স্বয়ংক্রিয়ভাবে ভিউপোর্টে স্ক্রোল করার চেষ্টা করবে। পূর্বে, রিপ্লে অবিলম্বে ব্যর্থ হত।

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

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

উন্নত কনসোল স্টাইলিং, ফর্ম্যাটিং এবং ফিল্টারিং

ANSI এস্কেপ কোড ব্যবহার করে লগ বার্তাগুলিকে সঠিকভাবে স্টাইল করুন

এখন আপনি কনসোল বার্তাগুলিকে সঠিকভাবে স্টাইল করার জন্য ANSI এস্কেপ সিকোয়েন্স ব্যবহার করতে পারেন। পূর্বে, DevTools কনসোলে ANSI এস্কেপ সিকোয়েন্সের জন্য খুব সীমিত (এবং আংশিকভাবে ভেঙে পড়া) সমর্থন ছিল।

Node.js ডেভেলপারদের জন্য ANSI এস্কেপ সিকোয়েন্সের মাধ্যমে লগ বার্তাগুলিকে রঙিন করা সাধারণ, প্রায়শই chalk , colors , ansi-colors , kleur ইত্যাদির মতো কিছু স্টাইলিং লাইব্রেরির সাহায্যে।

এই পরিবর্তনগুলির মাধ্যমে, আপনি এখন DevTools ব্যবহার করে আপনার Node.js অ্যাপ্লিকেশনগুলিকে নির্বিঘ্নে ডিবাগ করতে পারবেন, সঠিক রঙিন কনসোল বার্তা সহ। এটি নিজে দেখার জন্য এই ডেমোটি খুলুন!

DevTools ব্যবহার করে কনসোল বার্তা ফর্ম্যাট এবং স্টাইলিং সম্পর্কে আরও জানতে, কনসোল ডকুমেন্টেশনের ফর্ম্যাট এবং স্টাইল বার্তা বিভাগে যান।

ক্রোমিয়াম সমস্যা: 1282837 , 1282076

%s , %d , %i এবং %f ফর্ম্যাট স্পেসিফায়ারগুলিকে সঠিকভাবে সমর্থন করুন

কনসোল এখন কনসোল স্ট্যান্ডার্ডে উল্লেখিত %s , %d , %i , এবং %f টাইপ রূপান্তরগুলি সঠিকভাবে সম্পাদন করে। পূর্বে, কথোপকথনের ফলাফল অসঙ্গত ছিল।

ক্রোমিয়াম সমস্যা: 1277944 , 1282076

আরও স্বজ্ঞাত কনসোল গ্রুপ ফিল্টার

কনসোল বার্তা ফিল্টার করার সময়, যদি কনসোল বার্তার বিষয়বস্তু ফিল্টারের সাথে মেলে অথবা গ্রুপের (অথবা পূর্বপুরুষ গোষ্ঠীর) শিরোনাম ফিল্টারের সাথে মেলে, তাহলে এখন একটি কনসোল বার্তা প্রদর্শিত হবে। পূর্বে, ফিল্টার থাকা সত্ত্বেও কনসোল গোষ্ঠীর শিরোনাম প্রদর্শিত হত।

এছাড়াও, যদি একটি কনসোল বার্তা দেখানো হয়, তাহলে এটি যে গ্রুপের (অথবা পূর্বপুরুষ গ্রুপের) সাথে সম্পর্কিত তাও এখন দেখানো হবে।

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

সোর্স ম্যাপের উন্নতি

সোর্স ম্যাপ ফাইল দিয়ে Chrome এক্সটেনশন ডিবাগ করুন

আপনি এখন সোর্স ম্যাপ ফাইল দিয়ে Chrome এক্সটেনশন ডিবাগ করতে পারবেন। পূর্বে, DevTools শুধুমাত্র Chrome এক্সটেনশন ডিবাগিংয়ের জন্য ইনলাইন সোর্সম্যাপ সমর্থন করত।

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

সোর্স প্যানেলে উন্নত সোর্স ফোল্ডার ট্রি

সোর্স প্যানেলে সোর্স ফোল্ডার ট্রি এখন উন্নত করা হয়েছে, ফোল্ডার স্ট্রাকচার এবং নামকরণে (যেমন “../”, “./”, ইত্যাদি) কম বিশৃঙ্খলা রয়েছে। মূল বিষয় হল, সোর্স ম্যাপে পরম সোর্স URL গুলিকে স্বাভাবিক করার ফলে এটি সম্ভব হয়েছে।

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

সোর্স প্যানেলে কর্মী সোর্স ফাইলগুলি প্রদর্শন করুন

ওয়ার্কার (যেমন ওয়েব ওয়ার্কার, সার্ভিস ওয়ার্কার) সোর্স ফাইলগুলি যাদের আপেক্ষিক SourceURL আছে এখন সোর্স প্যানেলে প্রদর্শিত হয়। পূর্বে, ওয়ার্কার সোর্স ফাইলগুলি সঠিকভাবে পরিচালনা করা হত না।

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

ক্রোমের অটো ডার্ক থিম আপডেট

অটো ডার্ক থিম ইমুলেশন UI এখন সরলীকৃত। এটি এখন একটি চেকবক্স, আগে এটি একটি ড্রপডাউন ছিল।

তাছাড়া, যখন অটো ডার্ক থিম সক্রিয় করা হবে, তখন Emulate prefers-color-scheme ড্রপডাউনটি অক্ষম হয়ে যাবে এবং স্বয়ংক্রিয়ভাবে prefers-color-scheme: dark এ সেট হবে।

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

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

স্পর্শ-বান্ধব রঙ-পিকার এবং বিভক্ত ফলক

আপনি এখন টাচস্ক্রিন ডিভাইসে আঙুল বা স্টাইলাস দিয়ে DevTools-এ রঙ নির্বাচন করতে এবং ড্রয়ারের আকার পরিবর্তন করতে পারেন।

গুগল পিক্সেলবুক ডিভাইসের টাচস্ক্রিন দিয়ে তোলা একটি উদাহরণ এখানে দেওয়া হল।

ক্রোমিয়াম সমস্যা: 1284245 , 1284995

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

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

• কুকিজ প্যানে কুকিজ সম্পাদনা সংক্রান্ত সমস্যা সমাধান করা হয়েছে। ( 1290196 )
• কমান্ড মেনুতে পূর্ববর্তী কমান্ডটি নির্বাচন করতে Shift + Tab ব্যবহার করুন। ( 1278743 )
• সমস্যা ট্যাবে CORS প্রিফ্লাইট অনুরোধের সমস্যাগুলি রিপোর্ট করুন। ( 1272445 )।
• সমস্যা ট্যাবে ব্যবহারকারী-এজেন্ট ক্লায়েন্টের ইঙ্গিত সম্পর্কিত সমস্যাগুলি রিপোর্ট করুন। ( 1219359 )।
• সোর্স এবং কনসোল প্যানেলে Shift + Delete এবং Page up / Page down আচরণগুলি স্থির করা হয়েছে। ( 1278461 , 1285662 )
• সোর্স প্যানেলে ব্রেকপয়েন্ট অপসারণের ক্ষেত্রে ব্রেকপয়েন্ট সম্পাদনা ডায়ালগটি বন্ধ করুন। (922513)
• DevTools-এ হালকা/অন্ধকার থিম পরিবর্তন করার সময় কোনও রিলোডের প্রয়োজন নেই। ( 1278738 )

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

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

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

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

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

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

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