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

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

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

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

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

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

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

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

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

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

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

এন্ডপয়েন্ট বিভাগ আপনাকে Reporting-Endpoints শিরোনামে কনফিগার করা সমস্ত এন্ডপয়েন্টের একটি ওভারভিউ দেয়।

রিপোর্টিং API ফলক

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

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

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

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

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

আরও ভাল কনসোল স্টাইলিং, ফর্ম্যাটিং এবং ফিল্টারিং

ANSI এস্কেপ কোড দিয়ে লগ মেসেজ সঠিকভাবে স্টাইল করুন

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

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

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

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

কনসোল স্টাইলিং

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

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

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

কনসোল মেসেজে ফর্ম্যাট স্পেসিফায়ার সমর্থন করে

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

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

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

উপরন্তু, যদি একটি কনসোল বার্তা দেখানো হয়, এটি যে গোষ্ঠীর (বা পূর্বপুরুষ গোষ্ঠী) সেটিও এখন দেখানো হয়৷

কনসোল গ্রুপ ফিল্টার

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

উৎস মানচিত্র উন্নতি

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

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

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

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

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

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

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

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

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

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

ALT_TEXT_HERE

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

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

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

তা ছাড়া, যখন অটো ডার্ক থিম সক্ষম করা হয়, তখন এমুলেট প্রিফার-কালার-স্কিম ড্রপডাউন অক্ষম হয়ে যাবে এবং পছন্দ-রঙ-স্কিম: অন্ধকার স্বয়ংক্রিয়ভাবে সেট করা হবে।

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

অটো ডার্ক থিম এমুলেশন

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

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

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

এখানে Google Pixelbook ডিভাইসের টাচস্ক্রিন দিয়ে ক্যাপচার করা একটি উদাহরণ রয়েছে।

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

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

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

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

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

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

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

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

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

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