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

ওয়েব ভাইটাল তথ্য পারফরম্যান্স প্যানেলে পপ আপ হয়

পারফরম্যান্স প্যানেলে একটি ওয়েব ভাইটাল মার্কারে হোভার করুন সূচকটি কী তা বোঝার জন্য - পারফরম্যান্স ভাল কিনা, উন্নতির প্রয়োজন বা খারাপ।

ওয়েব ভাইটাল তথ্য পপ আপ

Chromium সমস্যা: 1147872

CSS স্ক্রোল-স্ন্যাপ কল্পনা করুন

CSS স্ক্রোল-স্ন্যাপ সারিবদ্ধকরণ পরিদর্শন করতে আপনি এখন এলিমেন্টস প্যানেলে scroll-snap ব্যাজ টগল করতে পারেন।

CSS স্ক্রোল-স্ন্যাপ

যখন আপনার পৃষ্ঠায় একটি HTML উপাদান (যেমন এই ডেমো পৃষ্ঠা) এটিতে scroll-snap-type প্রয়োগ করা হয়, আপনি উপাদান প্যানেলে এটির পাশে একটি scroll-snap ব্যাজ দেখতে পাবেন। পৃষ্ঠায় একটি স্ক্রোল-স্ন্যাপ ওভারলে প্রদর্শন টগল করতে ব্যাজটিতে ক্লিক করুন।

উপরের উদাহরণে, আপনি স্ন্যাপ প্রান্তগুলিতে বিন্দু চিহ্ন দেখতে পারেন। স্ন্যাপ আইটেম ড্যাশ আউটলাইন আছে যখন স্ক্রল পোর্ট কঠিন রূপরেখা আছে. স্ক্রোল প্যাডিং সবুজ রঙে ভরা হয় যখন স্ক্রোল মার্জিন কমলা রঙে ভরা হয়।

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

নতুন মেমরি পরিদর্শক

জাভাস্ক্রিপ্টে একটি ArrayBuffer পরিদর্শন করার জন্য নতুন মেমরি পরিদর্শক ব্যবহার করুন, সেইসাথে Wasm মেমরি।

এই ডেমো পৃষ্ঠা খুলুন. উত্স প্যানেলে, demo-js.js ফাইলটি খুলুন এবং লাইন 18 এ একটি ব্রেকপয়েন্ট সেট করুন৷

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

এই নতুন মেমরি পরিদর্শকের সাথে JavaScript ArrayBuffer এবং WebAssembly.Memory পরিদর্শন সম্পর্কে আরও জানতে ডকুমেন্টেশন দেখুন।

স্মৃতি পরিদর্শক

Chromium সমস্যা: 1166577

এলিমেন্টস প্যানেলে নতুন ব্যাজ সেটিংস ফলক

আপনি এখন এলিমেন্টস প্যানেলে ব্যাজ সেটিংসের মাধ্যমে বেছে বেছে ব্যাজ সক্ষম বা অক্ষম করতে পারেন। কাস্টমাইজ করার জন্য এই বৈশিষ্ট্যটি ব্যবহার করুন এবং ওয়েব পৃষ্ঠাগুলি পরিদর্শন করার সময় গুরুত্বপূর্ণ ব্যাজগুলিতে মনোনিবেশ করুন৷

এলিমেন্টস প্যানেলে ব্যাজ সেটিংস প্যানেল

এলিমেন্টস প্যানেলে, যেকোনো উপাদানে ডান ক্লিক করুন। প্রসঙ্গ মেনু থেকে ব্যাজ সেটিংস নির্বাচন করুন, ব্যাজ সেটিংস ফলক উপরে প্রদর্শিত হবে। ব্যাজ দেখাতে/লুকানোর জন্য যেকোনো চেকবক্স সক্রিয় বা অক্ষম করুন।

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

আকৃতির অনুপাতের তথ্য সহ উন্নত চিত্রের পূর্বরূপ

এলিমেন্টস প্যানেলে ইমেজ প্রিভিউ এখন ইমেজ সম্পর্কে আরও তথ্য প্রদর্শন করে - রেন্ডার করা সাইজ, রেন্ডার করা অ্যাসপেক্ট রেশিও, ইন্ট্রিনসিক সাইজ, ইনট্রিনসিক অ্যাসপেক্ট রেশিও এবং ফাইল সাইজ।

এই তথ্যগুলি আপনাকে আপনার ছবিগুলিকে আরও ভালভাবে বুঝতে এবং আপনার প্রয়োজন হলে অপ্টিমাইজেশান প্রয়োগ করতে সহায়তা করে৷

আকৃতির অনুপাতের তথ্য সহ ছবির পূর্বরূপ

ইমেজ অ্যাসপেক্ট রেশিও তথ্য নেটওয়ার্ক প্যানেলে পাওয়া যায় যখন আপনি ছবিটির পূর্বরূপ দেখতে ক্লিক করেন।

নেটওয়ার্ক প্যানেলে ছবির আকৃতির অনুপাতের তথ্য

ক্রোমিয়াম সমস্যা: 1149832 , 1170656

Content-Encoding কনফিগার করার বিকল্পগুলির সাথে নতুন নেটওয়ার্ক শর্ত বোতাম

নেটওয়ার্ক প্যানেলে একটি নতুন নেটওয়ার্ক শর্ত বোতাম যোগ করা হয়েছে। নেটওয়ার্ক শর্ত ট্যাব খুলতে এটিতে ক্লিক করুন।

নেটওয়ার্ক শর্ত ট্যাবে একটি নতুন স্বীকৃত বিষয়বস্তু-এনকোডিং বিকল্প যোগ করা হয়েছে। জিজিপ, ব্রোটলি, বা অন্যান্য ভবিষ্যতের Content-Encoding সমর্থন করে না এমন ব্রাউজারগুলিতে সার্ভারের প্রতিক্রিয়াগুলি সঠিকভাবে এনকোড করা হয়েছে কিনা তা পরীক্ষা করার জন্য এটি কনফিগার করুন৷

বিষয়বস্তু-এনকোডিং কনফিগার করার বিকল্প সহ নতুন নেটওয়ার্ক শর্ত বোতাম

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

শৈলী ফলক বর্ধিতকরণ

শৈলী ফলকে গণনা করা মান দেখার জন্য নতুন শর্টকাট

আপনি এখন শৈলী ফলকে একটি CSS সম্পত্তিতে ডান ক্লিক করতে পারেন এবং গণনা করা CSS মান দেখতে গণনা করা মান দেখুন নির্বাচন করতে পারেন।

গণনা করা মান দেখতে নতুন শর্টকাট

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

accent-color কীওয়ার্ডের জন্য সমর্থন

শৈলী ফলকের স্বয়ংসম্পূর্ণ UI এখন accent-color CSS কীওয়ার্ড সনাক্ত করে, যা ওয়েব বিকাশকারীদের UI নিয়ন্ত্রণের জন্য অ্যাকসেন্ট রঙ নির্দিষ্ট করতে দেয় (যেমন চেকবক্স, রেডিও বোতাম) উপাদান দ্বারা তৈরি।

accent-color CSS প্রপার্টি বর্তমানে পরীক্ষামূলক । এটি পরীক্ষা করতে দয়া করে chrome://flags/#enable-experimental-web-platform-features সক্ষম করুন৷

উচ্চারণ-রঙ

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

রঙ এবং আইকন সহ সমস্যার ধরন শ্রেণীবদ্ধ করুন

ইস্যু ট্যাব এখন সমস্যাগুলিকে পৃষ্ঠার ত্রুটি, আসন্ন ব্রেকিং পরিবর্তন এবং আরও ভাল তীব্রতার ইঙ্গিতের জন্য সম্ভাব্য উন্নতিগুলির মধ্যে শ্রেণীবদ্ধ করে৷ আপনি কনসোলে ইস্যু কাউন্ট বোতামে ক্লিক করে সমস্যা ট্যাব খুলতে পারেন।

  • পৃষ্ঠার ত্রুটি (লাল) । পৃষ্ঠা কার্যকারিতার জন্য অবিলম্বে প্রভাব ফেলে এমন সমস্যা, যেমন সঠিক CORS হেডার সেট না করা ইত্যাদি।
  • আসন্ন ব্রেকিং পরিবর্তন (হলুদ) . যে সমস্যাগুলি ওয়েব প্ল্যাটফর্মের একটি আসন্ন, বেমানান পরিবর্তন সম্পর্কে অবহিত করে যার ফলে পৃষ্ঠা কার্যকারিতা নষ্ট হতে পারে (যেমন CORS RFC 1918 পরিবর্তনের সতর্কতা)।
  • সম্ভাব্য উন্নতি (নীল) । পৃষ্ঠায় সম্ভাব্য উন্নতি, কিন্তু বর্তমানে পৃষ্ঠার মৌলিক কার্যকারিতা নষ্ট করছে না (যেমন অ্যাক্সেসিবিলিটি সমস্যা)

রঙ এবং আইকন সহ সমস্যার ধরন শ্রেণীবদ্ধ করুন

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

ট্রাস্ট টোকেন মুছুন

আপনি এখন অ্যাপ্লিকেশান প্যানেলের অধীনে ট্রাস্ট টোকেন প্যানে নতুন ডিলিট বোতাম দিয়ে ট্রাস্ট টোকেন মুছে ফেলতে পারেন।

ট্রাস্ট টোকেন হল একটি নতুন API যা প্রতারণার বিরুদ্ধে লড়াই করতে এবং প্যাসিভ ট্র্যাকিং ছাড়াই প্রকৃত মানুষের থেকে বটগুলিকে আলাদা করতে সহায়তা করে৷ ট্রাস্ট টোকেন দিয়ে কীভাবে শুরু করবেন তা জানুন।

ট্রাস্ট টোকেন মুছুন

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

ফ্রেম বিশদ দৃশ্যে অবরুদ্ধ বৈশিষ্ট্যগুলির বিশদ বিবরণ দেখুন

আপনি এখন ফ্রেম বিশদ দৃশ্যে অনুমতি নীতি বিভাগের অধীনে অবরুদ্ধ বৈশিষ্ট্যগুলির বিশদ বিবরণ দেখতে পারেন।

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

অনুমতি নীতি হল একটি ওয়েব প্ল্যাটফর্ম API যা একটি ওয়েবসাইটকে তার নিজস্ব ফ্রেমে বা এটি এম্বেড করা আইফ্রেমে ব্রাউজার বৈশিষ্ট্যগুলির ব্যবহারের অনুমতি বা ব্লক করার ক্ষমতা দেয়৷

ফ্রেম বিশদ দৃশ্যে অবরুদ্ধ বৈশিষ্ট্যগুলি৷

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

পরীক্ষা সেটিংয়ে পরীক্ষাগুলি ফিল্টার করুন৷

নতুন এক্সপেরিমেন্ট ফিল্টার দিয়ে দ্রুত পরীক্ষাগুলি খুঁজুন। উদাহরণস্বরূপ, সেটিংস > পরীক্ষা-নিরীক্ষায় যান, ফিল্টার টেক্সটবক্সে, "কনট্রাস্ট" শব্দটি দিয়ে সমস্ত পরীক্ষা ফিল্টার করতে "কন্ট্রাস্ট" টাইপ করুন।

পরীক্ষা সেটিংয়ে পরীক্ষাগুলি ফিল্টার করুন৷

ক্যাশে স্টোরেজ প্যানে নতুন Vary Header কলাম

Vary HTTP প্রতিক্রিয়া শিরোনাম দেখতে ক্যাশে স্টোরেজ প্যানে নতুন Vary Header কলাম ব্যবহার করুন।

হেডার কলাম পরিবর্তন করুন

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

উত্স প্যানেল উন্নতি

নতুন জাভাস্ক্রিপ্ট বৈশিষ্ট্য জন্য সমর্থন

DevTools এখন নতুন প্রাইভেট ব্র্যান্ড চেক জাভাস্ক্রিপ্ট ভাষা বৈশিষ্ট্য সমর্থন করে, ওরফে #foo in obj

এই প্রাইভেট ব্র্যান্ড চেক ফিচারটি যেকোনো প্রদত্ত অবজেক্টে প্রাইভেট ক্লাস ফিল্ড টেস্টিংকে সমর্থন করার জন্য ইন অপারেটরকে প্রসারিত করে।

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

জাভাস্ক্রিপ্ট ব্যক্তিগত ব্র্যান্ড চেক

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

ব্রেকপয়েন্ট ডিবাগিংয়ের জন্য উন্নত সমর্থন

DevTools এখন সঠিকভাবে একাধিক স্ক্রিপ্টে সঠিকভাবে ব্রেকপয়েন্ট সেট করে। আধুনিক জাভাস্ক্রিপ্ট বান্ডলার (যেমন ওয়েবপ্যাক , রোলআপ ) কোড বিভাজন বৈশিষ্ট্য সমর্থন করে - এমন পরিস্থিতিতে রয়েছে যেখানে একটি ভাগ করা উপাদান একাধিক রুটে (কোড বিভক্ত) অন্তর্ভুক্ত করা যেতে পারে।

পূর্বে, DevTools শুধুমাত্র একটি কাঁচা অবস্থানে ব্রেকপয়েন্ট সেট করতে সক্ষম ছিল। এই সাম্প্রতিক উন্নতির মাধ্যমে, DevTools সমস্ত প্রাসঙ্গিক অবস্থানে সঠিকভাবে ব্রেকপয়েন্ট সেট করতে পারে।

ক্রোমিয়াম সমস্যা: 1142705 , 979000 , 1180794

[] স্বরলিপি সহ হোভার পূর্বরূপ সমর্থন করুন

DevTools এখন জাভাস্ক্রিপ্ট সদস্য অভিব্যক্তিতে হোভার প্রিভিউ সমর্থন করে যা উত্স প্যানেলে [] স্বরলিপি ব্যবহার করে।

'[]' স্বরলিপি সহ হোভার পূর্বরূপ সমর্থন করুন

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

HTML ফাইলের উন্নত রূপরেখা

DevTools-এ এখন HTML ফাইলগুলির জন্য আরও ভাল রূপরেখা সমর্থন রয়েছে৷ উত্স প্যানেলে, একটি HTML ফাইল খুলুন। আপনি ম্যাক-এ Cmd + Shift + O বা Windows-এ Ctrl + Shift + O কীবোর্ড দিয়ে কোডের আউটলাইন টগল করতে পারেন।

নীচের উদাহরণে, DevTools এখন আউটলাইনে সমস্ত ফাংশন সঠিকভাবে তালিকাভুক্ত করে। পূর্বে, DevTools শুধুমাত্র কিছু ফাংশন দেখাত।

HTML ফাইলের উন্নত রূপরেখা

ক্রোমিয়াম সমস্যা: 761019 , 1191465

Wasm ডিবাগিংয়ের জন্য সঠিক ত্রুটি স্ট্যাক ট্রেস

DevTools এখন ইনলাইন ফাংশন কল সমাধান করে এবং Wasm ডিবাগিংয়ের জন্য সঠিক ত্রুটি স্ট্যাক ট্রেস দেখায়।

পূর্বে DevTools শুধুমাত্র ত্রুটি স্ট্যাক ট্রেসে জেনেরিক Wasm রেফারেন্স প্রদর্শন করত।

Wasm ডিবাগিংয়ের জন্য সঠিক ত্রুটি স্ট্যাক ট্রেস

বাম দিকের ক্রোমের পুরানো সংস্করণটি ত্রুটি স্ট্যাক ট্রেসে উত্স অবস্থান (যেমন dsquare ) দেখায় না, যেখানে ডানদিকের নতুন সংস্করণটি দেখায়৷

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

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

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

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

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

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

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

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

,

পারফরম্যান্স প্যানেলে ওয়েব ভাইটালস তথ্য পপ আপ

পারফরম্যান্সের সূচক কী তা বোঝার জন্য পারফরম্যান্স প্যানেলে একটি ওয়েব ভাইটাল মার্টারে ঘোরানো - পারফরম্যান্সটি ভাল কিনা, উন্নতি প্রয়োজন বা দরিদ্র।

ওয়েব ভাইটালস তথ্য পপ আপ

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

সিএসএস স্ক্রোল-এসএনএপি ভিজ্যুয়ালাইজ করুন

আপনি এখন সিএসএস স্ক্রোল-এসএনএপি সারিবদ্ধকরণ পরিদর্শন করতে উপাদান প্যানেলে scroll-snap ব্যাজ টগল করতে পারেন।

সিএসএস স্ক্রোল-স্ন্যাপ

যখন আপনার পৃষ্ঠায় একটি এইচটিএমএল উপাদান (যেমন এই ডেমো পৃষ্ঠাটি) এর জন্য scroll-snap-type প্রয়োগ করা হয়, আপনি উপাদান প্যানেলে এর পাশের একটি scroll-snap ব্যাজ দেখতে পাবেন। পৃষ্ঠায় একটি স্ক্রোল-এসএনএপি ওভারলে প্রদর্শন টগল করতে ব্যাজটি ক্লিক করুন।

উপরের উদাহরণে, আপনি স্ন্যাপ প্রান্তগুলিতে ডট চিহ্নগুলি দেখতে পারেন। স্ক্রোল পোর্টটি দৃ solid ় রূপরেখা রয়েছে যখন স্ন্যাপ আইটেমগুলিতে ড্যাশের রূপরেখা রয়েছে। স্ক্রোল প্যাডিং সবুজ রঙে ভরাট হয় যখন স্ক্রোল মার্জিন কমলাতে পূর্ণ হয়।

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

নতুন স্মৃতি পরিদর্শক

জাভাস্ক্রিপ্টে একটি ArrayBuffer পরিদর্শন করতে নতুন মেমরি ইন্সপেক্টর ব্যবহার করুন, পাশাপাশি ডাব্লুএএসএম মেমরি।

এই ডেমো পৃষ্ঠাটি খুলুন। উত্স প্যানেলে, ডেমো-জেএস.জেএস ফাইলটি খুলুন এবং 18 লাইনে একটি ব্রেকপয়েন্ট সেট করুন।

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

এই নতুন মেমরি ইন্সপেক্টরের সাথে জাভাস্ক্রিপ্ট ArrayBuffer এবং WebAssembly.Memory পরিদর্শন সম্পর্কে আরও জানতে ডকুমেন্টেশনটি দেখুন।

স্মৃতি পরিদর্শক

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

উপাদান প্যানেলে নতুন ব্যাজ সেটিংস ফলক

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

উপাদান প্যানেলে ব্যাজ সেটিংস ফলক

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

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

দিক অনুপাতের তথ্যের সাথে বর্ধিত চিত্রের পূর্বরূপ

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

এই তথ্যটি আপনাকে আপনার চিত্রগুলি আরও ভালভাবে বুঝতে এবং আপনার প্রয়োজন হলে অপ্টিমাইজেশন প্রয়োগ করতে সহায়তা করে।

দিক অনুপাতের তথ্য সহ চিত্রের পূর্বরূপ

আপনি যখন চিত্রটির পূর্বরূপ দেখতে ক্লিক করেন তখন চিত্রের দিক অনুপাতের তথ্যগুলি নেটওয়ার্ক প্যানেলেও উপলব্ধ।

নেটওয়ার্ক প্যানেলে চিত্রের দিক অনুপাতের তথ্য

ক্রোমিয়াম ইস্যু: 1149832 , 1170656

Content-Encoding এস কনফিগার করতে বিকল্পগুলির সাথে নতুন নেটওয়ার্ক কন্ডিশন বোতাম

নেটওয়ার্ক প্যানেলে একটি নতুন নেটওয়ার্ক কন্ডিশন বোতাম যুক্ত করা হয়েছে। নেটওয়ার্ক কন্ডিশন ট্যাবটি খুলতে এটিতে ক্লিক করুন।

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

সামগ্রী-এনকোডিং কনফিগার করার বিকল্পগুলির সাথে নতুন নেটওয়ার্ক শর্তাবলী বোতাম

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

শৈলী ফলক বর্ধন

স্টাইলস ফলকে গণিত মান দেখতে নতুন শর্টকাট

আপনি এখন স্টাইলস ফলকের একটি সিএসএস সম্পত্তিতে ডান ক্লিক করতে পারেন এবং গণিত সিএসএস মান দেখতে গণনা করা মান দেখুন নির্বাচন করুন।

গণিত মান দেখতে নতুন শর্টকাট

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

accent-color কীওয়ার্ডের জন্য সমর্থন

স্টাইলস পেনের স্বতঃপ্রকাশিত ইউআই এখন accent-color সিএসএস কীওয়ার্ড সনাক্ত করে, যা ওয়েব বিকাশকারীদের উপাদান দ্বারা উত্পাদিত ইউআই নিয়ন্ত্রণগুলির জন্য অ্যাকসেন্ট রঙ (যেমন চেকবক্স, রেডিও বোতাম) নির্দিষ্ট করতে দেয়।

accent-color সিএসএস সম্পত্তি বর্তমানে পরীক্ষামূলক । দয়া করে chrome://flags/#enable-experimental-web-platform-features

উচ্চারণ-রঙ

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

রঙ এবং আইকন সহ ইস্যু প্রকারগুলি শ্রেণিবদ্ধ করুন

ইস্যু ট্যাব এখন ইস্যুগুলিকে পৃষ্ঠা ত্রুটি, আসন্ন ব্রেকিং পরিবর্তন এবং আরও ভাল তীব্রতার ইঙ্গিতের জন্য সম্ভাব্য উন্নতিগুলিতে শ্রেণিবদ্ধ করে। আপনি কনসোলে ইস্যু কাউন্ট বোতামে ক্লিক করে ইস্যু ট্যাবটি খুলতে পারেন।

  • পৃষ্ঠা ত্রুটি (লাল) । পৃষ্ঠার কার্যকারিতার জন্য তাত্ক্ষণিক প্রভাব ফেলে এমন সমস্যাগুলি যেমন সঠিক কর্স শিরোনাম সেট না করা ইত্যাদি etc.
  • আসন্ন ব্রেকিং পরিবর্তন (হলুদ) । ওয়েব প্ল্যাটফর্মের আসন্ন, বেমানান পরিবর্তন সম্পর্কে অবহিত বিষয়গুলি যা পৃষ্ঠার কার্যকারিতা হ্রাস পেতে পারে (যেমন আসন্ন কর্স আরএফসি 1918 পরিবর্তনগুলির সতর্কতা)।
  • সম্ভাব্য উন্নতি (নীল) । পৃষ্ঠায় সম্ভাব্য উন্নতিগুলি, তবে বর্তমানে পৃষ্ঠার প্রাথমিক কার্যকারিতা ক্ষতিগ্রস্থ করছে না (যেমন অ্যাক্সেসযোগ্যতার সমস্যাগুলি)

রঙ এবং আইকন সহ ইস্যু প্রকারগুলি শ্রেণিবদ্ধ করুন

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

ট্রাস্ট টোকেন মুছুন

আপনি এখন অ্যাপ্লিকেশন প্যানেলের অধীনে ট্রাস্ট টোকেনস পেনে নয়টি মুছুন বোতামের সাথে ট্রাস্ট টোকেনগুলি মুছতে পারেন।

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

ট্রাস্ট টোকেন মুছুন

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

ফ্রেমের বিশদ ভিউতে অবরুদ্ধ বৈশিষ্ট্যগুলিতে বিশদ দেখুন

আপনি এখন ফ্রেমের বিশদ বিবরণে অনুমতি নীতি বিভাগের অধীনে অবরুদ্ধ বৈশিষ্ট্যগুলির বিশদগুলি দেখতে পারেন।

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

অনুমতি নীতি হ'ল একটি ওয়েব প্ল্যাটফর্ম এপিআই যা একটি ওয়েবসাইটকে তার নিজস্ব ফ্রেমে বা আইফ্রেমগুলিতে এম্বেড করে এমন ব্রাউজার বৈশিষ্ট্যগুলির ব্যবহারের অনুমতি বা অবরুদ্ধ করার ক্ষমতা দেয়।

ফ্রেমের বিশদ ভিউতে অবরুদ্ধ বৈশিষ্ট্যগুলি

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

পরীক্ষা -নিরীক্ষা সেটিংয়ে ফিল্টার পরীক্ষা

নতুন পরীক্ষা ফিল্টার দিয়ে দ্রুত পরীক্ষাগুলি সন্ধান করুন। উদাহরণস্বরূপ, ফিল্টার টেক্সটবক্সে সেটিংস > পরীক্ষাগুলিতে যান, "কনট্রাস্ট" শব্দের সাথে সমস্ত পরীক্ষা -নিরীক্ষা ফিল্টার করতে "কনট্রাস্ট" টাইপ করুন।

পরীক্ষা -নিরীক্ষা সেটিংয়ে ফিল্টার পরীক্ষা

ক্যাশে স্টোরেজ ফলকে নতুন Vary Header কলাম

ভ্যারি এইচটিটিপি প্রতিক্রিয়া শিরোনামটি দেখতে ক্যাশে স্টোরেজ ফলকে নতুন Vary Header কলামটি ব্যবহার করুন।

হেডার কলাম পরিবর্তিত

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

উত্স প্যানেল উন্নতি

নতুন জাভাস্ক্রিপ্ট বৈশিষ্ট্যগুলির জন্য সমর্থন

ডেভটুলগুলি এখন নতুন প্রাইভেট ব্র্যান্ড চেক জাভাস্ক্রিপ্ট ভাষা বৈশিষ্ট্য, #foo in obj সমর্থন করে।

এই প্রাইভেট ব্র্যান্ড চেক বৈশিষ্ট্যগুলি কোনও প্রদত্ত অবজেক্টে বেসরকারী শ্রেণীর ক্ষেত্রগুলি পরীক্ষা করার জন্য অপারেটরকে প্রসারিত করে।

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

জাভাস্ক্রিপ্ট ব্যক্তিগত ব্র্যান্ড চেক

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

ব্রেকপয়েন্টস ডিবাগিংয়ের জন্য বর্ধিত সমর্থন

ডেভটুলগুলি এখন সঠিকভাবে একাধিক স্ক্রিপ্টগুলিতে সঠিকভাবে ব্রেকপয়েন্টগুলি সেট করে। আধুনিক জাভাস্ক্রিপ্ট বান্ডলারগুলি (যেমন ওয়েবপ্যাক , রোলআপ ) সমর্থন কোড বিভাজন বৈশিষ্ট্য - এমন একটি দৃশ্য রয়েছে যেখানে একটি ভাগ করা উপাদান একাধিক রুটে অন্তর্ভুক্ত করা যেতে পারে (কোড বিভাজন)।

পূর্বে, ডেভটুলগুলি কেবল একটি কাঁচা স্থানে ব্রেকপয়েন্টগুলি সেট করতে সক্ষম হয়েছিল। এই সর্বশেষ উন্নতির সাথে, ডেভটুলগুলি সমস্ত প্রাসঙ্গিক স্থানে ব্রেকপয়েন্টগুলি সঠিকভাবে সেট করতে পারে।

ক্রোমিয়াম ইস্যু: 1142705 , 979000 , 1180794

[] স্বরলিপি সহ হোভার পূর্বরূপ সমর্থন করুন

দেবটুলগুলি এখন জাভাস্ক্রিপ্ট সদস্য এক্সপ্রেশনগুলিতে হোভার পূর্বরূপের জন্য সমর্থন করে যা উত্স প্যানেলে [] স্বরলিপি ব্যবহার করে।

'[]' স্বরলিপি সহ হোভার পূর্বরূপ সমর্থন করুন

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

এইচটিএমএল ফাইলগুলির উন্নত রূপরেখা

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

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

এইচটিএমএল ফাইলগুলির উন্নত রূপরেখা

ক্রোমিয়াম ইস্যু: 761019 , 1191465

ওয়াসম ডিবাগিংয়ের জন্য যথাযথ ত্রুটি স্ট্যাক ট্রেস

ডিভটুলগুলি এখন ইনলাইন ফাংশন কলগুলি সমাধান করে এবং ওয়াসম ডিবাগিংয়ের জন্য সঠিক ত্রুটি স্ট্যাক ট্রেসগুলি দেখায়।

পূর্বে ডিভটুলগুলি কেবল ত্রুটি স্ট্যাক ট্রেসগুলিতে জেনেরিক ওয়াসম রেফারেন্সগুলি প্রদর্শন করেছিল।

ওয়াসম ডিবাগিংয়ের জন্য যথাযথ ত্রুটি স্ট্যাক ট্রেস

বাম দিকে ক্রোমের পুরানো সংস্করণটি ত্রুটি স্ট্যাকের চিহ্নগুলিতে উত্সের অবস্থান (যেমন dsquare ) দেখায় না, যেখানে ডানদিকে নতুন সংস্করণটি ঘটে।

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

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

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

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

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

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

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

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

,

Web Vitals information pop up in the Performance panel

Hover on a Web Vitals marker in the Performance panel to understand what's the indicator about - whether the performance is good, needs improvement, or poor.

Web Vitals information pop up

Chromium issue: 1147872

Visualize CSS scroll-snap

You can now toggle the scroll-snap badge in the Elements panel to inspect the CSS scroll-snap alignment.

CSS scroll-snap

When an HTML element on your page (eg this demo page) has scroll-snap-type applied to it, you can see a scroll-snap badge next to it in the Elements panel. Click the badge to toggle the display of a scroll-snap overlay on the page.

In the example above, you can see dot marks on snap edges. The scroll port has solid outlined while the snap items have dash outlines. The scroll padding is filled in green color while the scroll margin is filled in orange.

Chromium issue: 862450

New Memory inspector

Use the new Memory inspector to inspect an ArrayBuffer in JavaScript, as well as the Wasm memory.

Open this demo page . In the Sources panel, open the demo-js.js file, and set a breakpoint at line 18.

পৃষ্ঠাটি রিফ্রেশ করুন। Expand the Scope section in the right debugger pane. Notice the new icon next to the buffer value. Click on it to reveal the Memory Inspector .

Check out the documentation to learn more about inspecting JavaScript ArrayBuffer and WebAssembly.Memory with this new Memory inspector.

স্মৃতি পরিদর্শক

Chromium issue: 1166577

New badge settings pane in the Elements panel

You can now selectively enable or disable badges via the Badge settings in the Elements panel. Use this feature to customize and stay focused on the important badges while inspecting web pages.

badge settings pane in the Elements panel

In the Elements panel, right click on any elements. Select Badge settings from the context menu, the badge settings pane appears on top. Enable or disable any checkbox to show/hide the badges.

Chromium issue: 1066772

Enhanced image preview with aspect ratio information

Image previews in the Elements panel now displays more information on the image - rendered size, rendered aspect ratio, intrinsic size, intrinsic aspect ratio, and file size.

This information helps you better understand your images and apply optimization if you need to.

Image preview with aspect ratio information

The image aspect ratio information is available in the Network panel as well when you click to preview the image.

Image aspect ratio information in the Network panel

Chromium issues: 1149832 , 1170656

New network conditions button with options to configure Content-Encoding s

A new network conditions button is added in the Network panel. Click on it to open the Network conditions tab.

A new Accepted Content-Encodings option is added to the Network conditions tab. Configure it to test if server responses are encoded correctly in browsers that do not support gzip, brotli, or other future Content-Encoding s.

New network conditions button with options to configure Content-Encoding

Chromium issue: 1162042

Styles pane enhancements

New shortcut to view computed value in the Styles pane

You can now right click on a CSS property in the Styles pane and select View computed value to view the computed CSS value.

New shortcut to view computed value

Chromium issue: 1076198

Support for the accent-color keyword

The Styles pane's autocomplete UI now detects the accent-color CSS keyword, which allows web developers to specify the accent color for UI controls (eg checkbox, radio button) generated by the element.

The accent-color CSS property is currently experimental . Please enable chrome://flags/#enable-experimental-web-platform-features to test it.

উচ্চারণ-রঙ

Chromium issue: 1092093

Categorize issue types with colors and icons

The Issues tab now categorize issues into page errors, upcoming breaking changes, and possible improvements for better severity indication. You can open the Issues tab by clicking on the issue count button in the Console .

  • Page errors (red) . Issues that have immediate impact for page functionality, such as not setting correct CORS headers, etc.
  • Upcoming breaking changes (yellow) . Issues that inform about an upcoming, incompatible change of the web platform that may result in a loss of page functionality (eg warning of upcoming CORS RFC 1918 changes ).
  • Possible improvements (blue) . Potential improvements on the page, but are currently not impairing basic functionality of the page (eg accessibility issues)

Categorize issue types with colors and icons

Chromium issue: 1183241

Delete Trust tokens

You can now delete trust tokens with the new delete button in the Trust tokens pane, under the Application panel.

Trust Token is a new API to help combat fraud and distinguish bots from real humans, without passive tracking. Learn how to get started with Trust Tokens .

Delete Trust tokens

Chromium issue: 1126824

View details on blocked features in the Frame details view

You can now view details on blocked features under the Permissions policy section in the Frame details view.

Open this demo page. Go to the Application panel and select a frame. In the Permissions Policy section, scroll to the Disabled Features property. Click on Show details to view the details on why the feature is blocked. Click on the icon next to each policy to navigate to the iframe or network request that blocked the feature.

Permissions policy is a web platform API which gives a website the ability to allow or block the use of browser features in its own frame or in iframes that it embeds.

Blocked features in the Frame details view

Chromium issue: 1158827

Filter experiments in the Experiments setting

Find experiments quicker with the new experiment filter. For example, go to Settings > Experiments , in the Filter textbox, type "contrast" to filter all the experiments with the word "contrast".

Filter experiments in the Experiments setting

New Vary Header column in the Cache storage pane

Use the new Vary Header column in the Cache Storage pane to view the Vary HTTP response header.

Vary Header column

Chromium issue: 1186049

Sources panel improvements

Support for new JavaScript features

DevTools now support the new private brand check JavaScript language feature, aka #foo in obj .

This private brand checks feature extends the in operator to support the private class fields testing on any given object.

Try it out in the Console and Sources panel. You can inspect the private fields in the Scope section under the debugger pane as well.

JavaScript private brand checks

Chromium issue: 11374

Enhanced support for breakpoints debugging

DevTools now properly set breakpoints in multiple scripts correctly. Modern JavaScript bundlers (eg Webpack , Rollup ) support code splitting feature - there are scenarios where one shared component can be included in multiple routes (code splits).

Previously, DevTools was only able to set breakpoints on one raw location. With this latest improvement, DevTools can set breakpoints in all relevant locations correctly.

Chromium issues: 1142705 , 979000 , 1180794

Support hover preview with [] notation

DevTools now support for hover preview on JavaScript member expressions that use the [] notation in the Sources panel.

Support hover preview with '[]' notation

Chromium issue: 1178305

Improved outline of HTML files

DevTools now has better outline support for HTML files. In the Sources panel, open a HTML file. You can toggle the code outline with keyboard Cmd + Shift + O in Mac or Ctrl + Shift + O in Windows.

In the example below, DevTools now correctly list all functions in the outline. Previously, DevTools only showed some of the functions.

Improved outline of HTML files

Chromium issue: 761019 , 1191465

Proper error stack traces for Wasm debugging

DevTools now resolves inline function calls and shows proper error stack traces for Wasm debugging.

Previously DevTools only displayed generic Wasm references in the Error stack traces.

Proper error stack traces for Wasm debugging

The old version of Chrome on the left does not show the source location (eg dsquare ) in the Error stack traces, whereas the new version on the right does.

Chromium issue: 1189161

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

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