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 সিরিজে নতুন কী আছে তাতে কভার করা হয়েছে এমন সবকিছুর একটি তালিকা।

ক্রোম 126

ক্রোম 125

ক্রোম 124

ক্রোম 123

ক্রোম 122

ক্রোম 121

ক্রোম 120

ক্রোম 119

ক্রোম 118

ক্রোম 117

ক্রোম 116

ক্রোম 115

ক্রোম 114

ক্রোম 113

ক্রোম 112

ক্রোম 111

ক্রোম 110

ক্রোম 109

ক্রোম 108

ক্রোম 107

ক্রোম 106

ক্রোম 105

ক্রোম 104

ক্রোম 103

ক্রোম 102

ক্রোম 101

ক্রোম 100

ক্রোম 99

ক্রোম 98

ক্রোম 97

ক্রোম 96

ক্রোম 95

ক্রোম 94

ক্রোম 93

ক্রোম 92

ক্রোম 91

ক্রোম 90

ক্রোম ৮৯

ক্রোম ৮৮

ক্রোম 87

ক্রোম 86

ক্রোম 85

ক্রোম 84

ক্রোম 83

ক্রোম 82

Chrome 82 বাতিল করা হয়েছে

ক্রোম 81

ক্রোম 80

ক্রোম 79

ক্রোম 78

ক্রোম 77

ক্রোম 76

ক্রোম 75

ক্রোম 74

ক্রোম 73

ক্রোম 72

ক্রোম 71

ক্রোম 70

Chrome 68

Chrome 67

Chrome 66

ক্রোম 65

ক্রোম 64

Chrome 63

Chrome 62

Chrome 61

ক্রোম 60

Chrome 59

,

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

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

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

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

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

অ্যাপ্লিকেশন প্যানেলে নতুন প্রতিবেদন এপিআই ফলক

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

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

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

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

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

এপিআই ফলক প্রতিবেদন

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

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

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

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

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

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

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

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

নোড.জেএস বিকাশকারীদের পক্ষে এএনএসআই এস্কেপ সিকোয়েন্সগুলির মাধ্যমে লগ বার্তাগুলি রঙিন করা সাধারণ, প্রায়শই চক , রঙ , এএনএসআই-কালারস , ক্লিউর ইত্যাদির মতো কিছু স্টাইলিং লাইব্রেরির সাহায্যে

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

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

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

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

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

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

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

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

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

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

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

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

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

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

উত্স মানচিত্র ফাইলগুলির সাথে ক্রোম এক্সটেনশন ডিবাগ করুন

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

উত্স মানচিত্র ফাইলগুলির সাথে ক্রোম এক্সটেনশন ডিবাগ করুন

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

উত্স প্যানেলে উন্নত উত্স ফোল্ডার গাছ

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

উত্স প্যানেলে উন্নত উত্স ফোল্ডার গাছ

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

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

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

Alt_text_ এখানে

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

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

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

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

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

অটো ডার্ক থিম অনুকরণ

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

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

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

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

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

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

এই প্রকাশে এগুলি কিছু লক্ষণীয় সমাধান:

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

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

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করা

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

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

ডিভটুলসে নতুন কি

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

ক্রোম 114

Chrome 113

ক্রোম 112

ক্রোম 111

Chrome 110

ক্রোম 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

ক্রোম 104

Chrome 103

Chrome 102

Chrome 101

ক্রোম 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

ক্রোম 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

ক্রোম 87

ক্রোম 86

ক্রোম 85

Chrome 84

ক্রোম 83

Chrome 82

ক্রোম 82 বাতিল করা হয়েছিল

Chrome 81

Chrome 80

ক্রোম 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

ক্রোম 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

ক্রোম 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59

,

Throttling WebSocket requests

The Network panel now supports throttling web socket requests. Previously, the network throttling didn't work on web socket requests.

Open the Network panel, click on a web socket request and open the Messages tab to observe the message transfers. Select Slow 3G to throttle the speed.

Throttling WebSocket requests

Chromium issue: 423246

New Reporting API pane in the Application panel

Use the new Reporting API pane to monitor the reports generated on your page and their status.

The Reporting API is designed to help you monitor security violations of your page, deprecated API calls, and more.

Open a page which uses the Reporting API (eg demo page ). In the Application panel, scroll down to the Background services section and select the Reporting API pane.

The Reports section shows you a list of reports generated on your page and their status. Click on it to view the report's details.

The Endpoints section gives you an overview of all the endpoints configured in the Reporting-Endpoints header.

Reporting API pane

Chromium issue: 1205856

Support wait until element is visible/clickable in the Recorder panel

When replaying a user flow recording, the Recorder panel will now wait until the element is visible or clickable in the viewport or try to automatically scroll the element into the viewport before replaying the step. Previously, the replay would fail immediately.

Here is an example of an off-screen menu positioned outside of the viewport and slide in when activated. The user flow is to toggle the menu, and click on the menu item. Previously, the replay would fail at the last step, because the menu item is still sliding in and not visible in the viewport yet. এটা এখন ঠিক করা হয়েছে।

Chromium issue: 1257499

Better console styling, formatting and filtering

Properly style log messages with ANSI escape code

You can now use the ANSI escape sequences to properly style console messages. Previously, DevTools console had very limited (and partly broken) support for ANSI escape sequences.

It is common for Node.js developers to colorize log messages via ANSI escape sequences, often with the help of some styling libraries like chalk , colors , ansi-colors , kleur , etc.

With these changes, you can now debug your Node.js applications seamlessly using DevTools, with proper colorized console messages. Open this demo to view it yourself!

To learn more about formatting & styling console messages with DevTools, go to format and style messages in the Console documentation.

console styling

Chromium issues: 1282837 , 1282076

Properly support %s , %d , %i and %f format specifiers

The Console now properly performs the %s , %d , %i , and %f type conversions as specified in the Console Standard . Previously, the conversation result was inconsistent.

support format specifiers in console messege

Chromium issues: 1277944 , 1282076

More intuitive console group filter

When filtering the console message, a console message is now shown if its message content matches the filter or the title of the group (or the ancestor group) matches the filter. Previously, the console group title would show despite the filter.

In addition, if a console message is shown, the group (or the ancestor group) it belongs to is now shown as well.

console group filter

Chromium issue: 1068788

Source maps improvements

Debug Chrome extension with source map files

You can now debug Chrome extension with source map files. Previously, DevTools only supported inline sourcemap for Chrome extension debugging.

Debug Chrome extension with source map files

Chromium issue: 212374

Improved source folder tree in the Sources panel

The source folder tree in the Sources panel is now improved with less clutter in the folder structures and naming (eg “../”, “./”, etc). Under the hood, this is the result of normalizing the absolute source URLs in the source maps.

Improved source folder tree in the Sources panel

Chromium issue: 1284737

Display worker source files in the Sources panel

Worker (eg web worker, service worker) source files with relative SourceURL are now displayed in the Source panel. Previously, worker source files were not handled correctly.

ALT_TEXT_HERE

Chromium issue: 1277002

Chrome's Auto Dark Theme updates

The Auto Dark Theme emulation UI is now simplified. It is a checkbox now, it was a dropdown previously.

Apart from that, when the Auto Dark Theme is enabled, the Emulate prefers-color-scheme dropdown will be disabled and set to prefers-color-scheme: dark automatically.

Chrome 96 introduces an Origin Trial for Auto Dark Theme on Android. With this feature, the browser applies an automatically generated dark theme to light themed sites, when the user has opted into dark themes in the Operating System.

Auto Dark Theme emulation

Chromium issue: 1243309

Touch-friendly color-picker and split pane

You can now select color, and resize the Drawer in DevTools with fingers or stylus on touchscreen devices.

Here is an example captured with the Google Pixelbook device touchscreen.

Chromium issues: 1284245 , 1284995

Miscellaneous highlights

These are some noteworthy fixes in this release:

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Submit a suggestion or feedback to us via crbug.com .
  • Report a DevTools issue using the More optionsআরও > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools .
  • Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

ক্রোম 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

ক্রোম 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

ক্রোম 86

ক্রোম 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled .

Chrome 81

Chrome 80

ক্রোম 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

ক্রোম 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

ক্রোম 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59