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

আপনার পছন্দের ভাষায় DevTools ব্যবহার করুন

Chrome DevTools এখন 80টিরও বেশি ভাষা সমর্থন করে, আপনাকে আপনার পছন্দের ভাষায় কাজ করার অনুমতি দেয়!

সেটিংস খুলুন, তারপর পছন্দগুলি > ভাষা ড্রপডাউনের অধীনে আপনার পছন্দের ভাষা নির্বাচন করুন এবং DevTools পুনরায় লোড করুন।

পছন্দগুলি" width="800" height="494">৷

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

ডিভাইস তালিকায় নতুন Nest Hub ডিভাইস

আপনি এখন ডিভাইস মোডে Nest Hub এবং Nest Hub Max এর মাত্রা অনুকরণ করতে পারেন।

টগল ডিভাইস টুলবার ক্লিক করুন ডিভাইস টুলবার টগল করুন , ডিভাইস তালিকার অধীনে Nest Hub বা Nest Hub Max নির্বাচন করুন।

ডিভাইস মোডে নেস্ট হাব ডিভাইস

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

ফ্রেমের বিশদ বিবরণে অরিজিন ট্রায়াল

আপনি এখন অ্যাপ্লিকেশন প্যানেলের অধীনে ফ্রেম বিশদ দৃশ্যে একটি সাইটের মূল ট্রায়াল সম্পর্কে তথ্য পেতে পারেন।

অরিজিন ট্রায়ালগুলি আপনাকে একটি নতুন বা পরীক্ষামূলক বৈশিষ্ট্যে অ্যাক্সেস দেয়, কার্যকারিতা তৈরি করতে আপনার ব্যবহারকারীরা বৈশিষ্ট্যটি সবার জন্য উপলব্ধ হওয়ার আগে সীমিত সময়ের জন্য চেষ্টা করতে পারেন৷

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

ফ্রেমের বিশদ বিবরণে অরিজিন ট্রায়াল

Chromium সমস্যা: 607555

নতুন CSS কন্টেইনার কোয়েরি ব্যাজ

কন্টেইনার উপাদানগুলির পাশে একটি নতুন কন্টেইনার ব্যাজ যোগ করা হয়েছে (পূর্বক উপাদান যা @container at-rules-এর মানদণ্ডের সাথে মেলে)। নির্বাচিত ধারকটির একটি ওভারলে এবং পৃষ্ঠায় এর সমস্ত অনুসন্ধানকারী বংশধরের প্রদর্শন টগল করতে ব্যাজটিতে ক্লিক করুন৷

CSS কন্টেইনার কোয়েরি ব্যাজ

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

নেটওয়ার্ক ফিল্টার উল্টাতে নতুন চেকবক্স

নেটওয়ার্ক প্যানেলে ফিল্টারগুলিকে উল্টাতে নতুন ইনভার্ট চেকবক্স ব্যবহার করুন।

উদাহরণস্বরূপ, আপনি স্ট্যাটাস 404 সহ নেটওয়ার্ক অনুরোধগুলি ফিল্টার করতে "status-code: 404" টাইপ করতে পারেন। ফিল্টারটি বাতিল করতে ইনভার্ট চেকবক্স সক্রিয় করুন (স্ট্যাটাস 404 সহ নয় এমন সমস্ত নেটওয়ার্ক অনুরোধগুলি দেখান)।

নেটওয়ার্ক ফিল্টার উল্টে দিন

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

কনসোল সাইডবারের আসন্ন অবচয়

ফিল্টার UI টুলবারে সরানোর পক্ষে কনসোল সাইডবার সরানো হবে। আপনার কোন উদ্বেগ বা প্রতিক্রিয়া আছে? আমাদের এই সমস্যা ট্র্যাকার মাধ্যমে জানতে দিন.

কনসোল সাইডবার অবচয় বার্তা

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

সমস্যা ট্যাব এবং নেটওয়ার্ক প্যানেলে কাঁচা Set-Cookie হেডারগুলি প্রদর্শন করুন

DevTools এখন সমস্যা ট্যাবে কাঁচা Set-Cookie হেডার প্রদর্শন করে।

পূর্বে, DevTools নেটওয়ার্ক প্যানেলে বিকৃত কুকি (ভুল Set-Cookie হেডার) দেখায়নি। নেটওয়ার্ক প্যানেলে নতুন response-header-set-cookie ফিল্টার যোগ করে, ব্যবহারকারীরা কাঁচা Set-Cookie হেডার প্রতিক্রিয়া ফিল্টার করতে পারে। DevTools সমস্যা ট্যাবে থাকা কাঁচা Set-Cookie হেডারগুলিকে নেটওয়ার্ক প্যানেলে লিঙ্ক করবে।

সমস্যা ট্যাব এবং নেটওয়ার্ক প্যানেলে কাঁচা 'সেট-কুকি' শিরোনাম

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

কনসোলে নিজস্ব বৈশিষ্ট্য হিসাবে সামঞ্জস্যপূর্ণ প্রদর্শন নেটিভ অ্যাক্সেসর

কনসোল এখন নেটিভ অ্যাকসেসরগুলিকে তাদের নিজস্ব বৈশিষ্ট্য হিসাবে ধারাবাহিকভাবে প্রদর্শন করে।

উদাহরণস্বরূপ, কনসোলে new Int8Array([1, 2, 3]) এক্সপ্রেশনের মূল্যায়ন করার সময়, length , byteOffset এর মতো নেটিভ অ্যাক্সেসরগুলি প্রিভিউতে প্রদর্শিত হয় নি। এই সর্বশেষ আপডেটের সাথে, নেটিভ অ্যাক্সেসরগুলি পূর্বরূপ দেখানো হয় এবং প্রসারিত হলে মানগুলি সাগ্রহে মূল্যায়ন করা হয়।

কনসোলে নিজস্ব বৈশিষ্ট্য হিসাবে সামঞ্জস্যপূর্ণ প্রদর্শন নেটিভ অ্যাক্সেসর

ক্রোমিয়াম সমস্যা: 1076820 , 1199247

#sourceURL সহ ইনলাইন স্ক্রিপ্টগুলির জন্য সঠিক ত্রুটি স্ট্যাক ট্রেস

DevTools এখন সঠিকভাবে #sourceURL এর সাথে ইনলাইন স্ক্রিপ্টগুলি সমাধান করে এবং ডিবাগিংয়ের জন্য সঠিক ত্রুটি স্ট্যাক ট্রেস দেখায়।

পূর্বে DevTools #sourceURL সহ ইনলাইন স্ক্রিপ্টগুলির জন্য ভুল অবস্থান প্রদর্শন করেছিল, খোলার <script> ট্যাগের তুলনায় আশেপাশের নথির সাথে সম্পর্কিত।

#sourceURL সহ ইনলাইন স্ক্রিপ্টগুলির জন্য সঠিক ত্রুটি স্ট্যাক ট্রেস

ক্রোমিয়াম সমস্যা: 1183990 , 578269

কম্পিউটেড প্যানে রঙের বিন্যাস পরিবর্তন করুন

আপনি এখন কম্পিউটেড প্যানে যেকোন এলিমেন্টের কালার ফরম্যাট পরিবর্তন করতে পারেন Shift + কালার প্রিভিউতে ক্লিক করে।

রঙের বিন্যাস পরিবর্তন করতে রঙের পূর্বরূপে Shift+ক্লিক করুন

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

নেটিভ HTML টুলটিপ দিয়ে কাস্টম টুলটিপ প্রতিস্থাপন করুন

DevTools এখন সমস্ত উপাদান জুড়ে নেটিভ HTML টুলটিপ গ্রহণ করে। একটি নেটিভ HTML টুলটিপের স্টাইলিং না থাকার কারণে DevTools-এ একটি কাস্টম টুলটিপ প্রয়োগ করা হয়েছে দীর্ঘদিন ধরে।

দুর্ভাগ্যবশত, একটি কাস্টম টুলটিপ বাস্তবায়ন বজায় রাখা জটিল এবং আমরা নিয়মিত জটিল ত্রুটির মধ্যে পড়ি।

কাস্টম ইমপ্লিমেন্টেশনের সুবিধাগুলি পুনঃমূল্যায়ন করার পরে, আমরা দেখতে পাই যে নেটিভ HTML টুলটিপগুলি DevTools-এর জন্য যথেষ্ট এবং টুলটিপগুলি গ্রহণ করা আমাদের ব্যবহারকারীদের জন্য বিভিন্ন ধরণের সমস্যা প্রতিরোধ করে৷

DevTools টুলটিপ

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

[পরীক্ষামূলক] সমস্যা ট্যাবে সমস্যাগুলি লুকান

সমস্যা ট্যাবে সমস্যা লুকাতে হাইড ইস্যু মেনু পরীক্ষা চালু করুন। এইভাবে, আপনি আপনার গুরুত্বপূর্ণ বিষয়গুলিতে ফোকাস করতে পারেন।

ইস্যু ট্যাবে, একটি সমস্যা হোভার করুন, সমস্যা মেনুতে ক্লিক করুন আরও ডানদিকে, এটি লুকাতে এই জাতীয় সমস্যাগুলি লুকান নির্বাচন করুন৷

পরীক্ষামূলক লুকান সমস্যা প্রসঙ্গ মেনু

Chromium সমস্যা: 1175722

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

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

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

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

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

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

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

,

আপনার পছন্দসই ভাষায় ডিভটুলগুলি ব্যবহার করুন

ক্রোম ডেভটুলগুলি এখন 80 টিরও বেশি ভাষা সমর্থন করে, আপনাকে আপনার পছন্দসই ভাষায় কাজ করার অনুমতি দেয়!

সেটিংস খুলুন, তারপরে পছন্দগুলি > ভাষা ড্রপডাউন এবং পুনরায় লোড ডিভটুলগুলির অধীনে আপনার পছন্দসই ভাষা নির্বাচন করুন।

পছন্দগুলি "প্রস্থ =" 800 "উচ্চতা =" 494 ">

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

ডিভাইস তালিকায় নতুন নেস্ট হাব ডিভাইস

আপনি এখন ডিভাইস মোডে নেস্ট হাব এবং নেস্ট হাব ম্যাক্সের মাত্রাগুলি অনুকরণ করতে পারেন।

টগল ডিভাইস সরঞ্জামদণ্ডে ক্লিক করুন ডিভাইস টুলবার টগল করুন , ডিভাইস তালিকার অধীনে নেস্ট হাব বা নেস্ট হাব ম্যাক্স নির্বাচন করুন।

ডিভাইস মোডে নেস্ট হাব ডিভাইস

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

ফ্রেমের বিশদ বিবরণ দেখুন

আপনি এখন অ্যাপ্লিকেশন প্যানেলের অধীনে ফ্রেমের বিশদ বিবরণে কোনও সাইটের উত্স ট্রায়াল সম্পর্কে তথ্য পেতে পারেন।

অরিজিন ট্রায়ালগুলি আপনাকে একটি নতুন বা পরীক্ষামূলক বৈশিষ্ট্যে অ্যাক্সেস দেয়, কার্যকারিতা তৈরি করতে আপনার ব্যবহারকারীরা বৈশিষ্ট্যটি প্রত্যেকের জন্য উপলব্ধ করার আগে সীমিত সময়ের জন্য চেষ্টা করতে পারেন।

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

ফ্রেমের বিশদ বিবরণ দেখুন

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

নতুন সিএসএস কনটেইনার কোয়েরি ব্যাজ

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

সিএসএস কনটেইনার কোয়েরি ব্যাজ

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

নেটওয়ার্ক ফিল্টারগুলি উল্টাতে নতুন চেকবক্স

নেটওয়ার্ক প্যানেলে ফিল্টারগুলি উল্টাতে নতুন ইনভার্ট চেকবক্সটি ব্যবহার করুন।

উদাহরণস্বরূপ, আপনি স্ট্যাটাস 404 সহ নেটওয়ার্ক অনুরোধগুলি ফিল্টার করতে "স্ট্যাটাস-কোড: 404" টাইপ করতে পারেন। ফিল্টারটিকে উপেক্ষা করতে ইনভার্ট চেকবক্সটি সক্ষম করুন (সমস্ত নেটওয়ার্ক অনুরোধগুলি যা 404 এর সাথে নেই) দেখান)।

নেটওয়ার্ক ফিল্টারগুলি উল্টান

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

কনসোল সাইডবারের আসন্ন অবমূল্যায়ন

কনসোল সাইডবারটি ফিল্টার ইউআইকে সরঞ্জামদণ্ডে সরিয়ে নেওয়ার পক্ষে সরানো হবে। আপনার কি কোনও উদ্বেগ বা প্রতিক্রিয়া আছে? এই ইস্যু ট্র্যাকারের মাধ্যমে আমাদের জানান।

কনসোল সাইডবার অবমূল্যায়ন বার্তা

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

ইস্যু ট্যাব এবং নেটওয়ার্ক প্যানেলে কাঁচা Set-Cookie শিরোনাম প্রদর্শন করুন

ডিভটুলগুলি এখন ইস্যু ট্যাবে কাঁচা Set-Cookie শিরোনাম প্রদর্শন করে।

পূর্বে, ডিভটুলগুলি নেটওয়ার্ক প্যানেলে ত্রুটিযুক্ত কুকিজ (ভুল Set-Cookie শিরোনাম) দেখায় না। নেটওয়ার্ক প্যানেলে নতুন response-header-set-cookie ফিল্টার যুক্ত হওয়ার সাথে সাথে ব্যবহারকারীরা কাঁচা Set-Cookie শিরোনাম প্রতিক্রিয়া ফিল্টার করতে পারেন। ডেভটুলগুলি কাঁচা Set-Cookie শিরোনামগুলি ইস্যু ট্যাবে নেটওয়ার্ক প্যানেলে লিঙ্ক করবে।

ইস্যু ট্যাব এবং নেটওয়ার্ক প্যানেলে কাঁচা 'সেট-কুকি' শিরোনাম

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

কনসোলে নিজস্ব বৈশিষ্ট্য হিসাবে ধারাবাহিক প্রদর্শন নেটিভ অ্যাকসেসরগুলি

কনসোলটি এখন দেশীয় অ্যাকসেসরগুলিকে ধারাবাহিকভাবে তাদের নিজস্ব সম্পত্তি হিসাবে প্রদর্শন করে।

উদাহরণস্বরূপ, কনসোলে new Int8Array([1, 2, 3]) এক্সপ্রেশনটি মূল্যায়ন করার সময়, length মতো নেটিভ অ্যাকসেসর, byteOffset পূর্বরূপে প্রদর্শিত হয়নি। এই সর্বশেষ আপডেটের সাথে, নেটিভ অ্যাকসেসরগুলি পূর্বরূপে প্রদর্শিত হয় এবং মানগুলি প্রসারিত করার সময় অধীর আগ্রহে মূল্যায়ন করা হয়।

কনসোলে নিজস্ব বৈশিষ্ট্য হিসাবে ধারাবাহিক প্রদর্শন নেটিভ অ্যাকসেসরগুলি

ক্রোমিয়াম ইস্যু: 1076820 , 1199247

#সাউসরেল সহ ইনলাইন স্ক্রিপ্টগুলির জন্য যথাযথ ত্রুটি স্ট্যাক ট্রেসগুলি

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

পূর্বে ডেভটুলগুলি উদ্বোধনী <script> ট্যাগের তুলনায় আশেপাশের নথির তুলনায় #sourceURL সহ ইনলাইন স্ক্রিপ্টগুলির জন্য ভুল অবস্থান প্রদর্শন করেছিল।

#সাউসরেল সহ ইনলাইন স্ক্রিপ্টগুলির জন্য যথাযথ ত্রুটি স্ট্যাক ট্রেসগুলি

ক্রোমিয়াম ইস্যু: 1183990 , 578269

গণিত ফলকে রঙের ফর্ম্যাট পরিবর্তন করুন

আপনি এখন শিফট দ্বারা গণিত ফলকের যে কোনও উপাদানের রঙিন ফর্ম্যাটটি পরিবর্তন করতে পারেন + রঙের পূর্বরূপে ক্লিক করুন।

শিফট+রঙ ফর্ম্যাট পরিবর্তন করতে রঙ প্রাকদর্শন ক্লিক করুন

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

নেটিভ এইচটিএমএল টুলটিপগুলির সাথে কাস্টম টুলটিপগুলি প্রতিস্থাপন করুন

ডেভটুলগুলি এখন সমস্ত উপাদান জুড়ে দেশীয় এইচটিএমএল টুলটিপগুলি গ্রহণ করে। নেটিভ এইচটিএমএল টুলটিআইপি স্টাইলিংয়ের অভাবের কারণে ডেভটুলসের দীর্ঘকাল ধরে একটি কাস্টম টুলটিআইপি বাস্তবায়ন রয়েছে।

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

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

ডিভটুলস টুলটিপ

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

[পরীক্ষামূলক] ইস্যু ট্যাবে সমস্যাগুলি লুকান

ইস্যু ট্যাবে ইস্যুগুলি লুকানোর জন্য হাইড ইস্যু মেনু পরীক্ষাটি সক্ষম করুন। এইভাবে, আপনি আপনার কাছে গুরুত্বপূর্ণ বিষয়গুলিতে মনোনিবেশ করতে পারেন।

ইস্যু ট্যাবে, কোনও সমস্যা হোভার, ইস্যু মেনুতে ক্লিক করুন আরও ডানদিকে, এটি লুকানোর জন্য এই জাতীয় সমস্যাগুলি লুকান নির্বাচন করুন।

পরীক্ষামূলক আড়াল ইস্যু প্রসঙ্গ মেনু

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

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

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

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

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

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

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

,

Use DevTools in your preferred language

Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language!

Open Settings , then select your preferred language under the Preferences > Language dropdown and reload DevTools.

Preferences" width="800" height="494">

Chromium issue: 1163928

New Nest Hub devices in the Device list

You can now simulate the dimensions of Nest Hub and Nest Hub Max in the Device mode .

Click Toggle Device Toolbar ডিভাইস টুলবার টগল করুন , select Nest Hub or Nest Hub Max under the device list.

Nest Hub device in the Device mode

Chromium issue: 1223525

Origin trials in the Frame details view

You can now get information about a site's origin trials in the frame details view under the Application panel.

Origin trials gives you access to a new or experimental feature, to build functionality your users can try out for a limited time before the feature is made available to everyone.

Open a page with origin trials (eg demo page ). In the Application panel, scroll down to the Frames section and select the top frame.

Origin trials in the Frame details view

Chromium issue: 607555

New CSS container queries badge

A new container badge is added next to the container elements (the ancestor elements that match the criteria of @container at-rules). Click the badge to toggle the display of an overlay of the chosen container and all its querying descendants on the page.

CSS container queries badge

Chromium issue: 1146422

New checkbox to invert the network filters

Use the new Invert checkbox to invert the filters in the Network panel.

For example, you can type "status-code: 404" to filter the network requests with status 404. Enable the Invert checkbox to negate the filter (show all network requests which are not with status 404).

Invert the network filters

Chromium issue: 1054464

Upcoming deprecation of the Console sidebar

The Console sidebar will be removed in favor of moving the filter UI to the toolbar. Do you have any concerns or feedback? Let us know via this issue tracker .

Console sidebar deprecation message

Chromium issue: 1232937

Display raw Set-Cookie headers in the Issues tab and Network panel

DevTools now displays raw Set-Cookie headers in the Issues tab.

Previously, DevTools did not show malformed cookies (incorrect Set-Cookie header) in the Network panel. With the new response-header-set-cookie filter added in the Network panel, users can filter the raw Set-Cookie header response. DevTools will link the raw Set-Cookie headers in the Issues tab to the Network panel.

Raw 'Set-Cookie' headers in the Issues tab and Network panel

Chromium issue: 1179186

Consistent display native accessors as own properties in the Console

The Console now displays native accessors as their own properties consistently.

For example, when evaluating the new Int8Array([1, 2, 3]) expression in the Console , native accessors like length , byteOffset did not display in the preview. With this latest update, native accessors are shown in the preview and values are eagerly evaluated when expanded.

Consistent display native accessors as own properties in the Console

Chromium issues: 1076820 , ​​1199247

Proper error stack traces for inline scripts with #sourceURL

DevTools now resolves inline scripts with #sourceURL properly and shows proper error stack traces for debugging.

Previously DevTools displayed incorrect location for inline scripts with #sourceURL , relative to the surrounding document rather than relative to the opening <script> tag.

Proper error stack traces for inline scripts with #sourceURL

Chromium issues: 1183990 , ​​578269

Change color format in the Computed pane

You can now change the color format of any element in the Computed pane by Shift + click on the color preview.

Shift+Click the color preview to change color format

Chromium issue: 1226371

Replace custom tooltips with native HTML tooltips

DevTools now adopts native HTML tooltips across all components. DevTools has had a custom tooltip implementation for a long time due to the lack of styling of a native HTML tooltip.

Unfortunately, maintaining a custom tooltip implementation is complicated and we regularly run into complicated bugs.

After reweighting the benefits of the custom implementations, we find that the native HTML tooltips are sufficient for DevTools and adopting the tooltips prevents a vast variety of problems for our users.

DevTools tooltip

Chromium issue: 1223391

[Experimental] Hide issues in the Issues tab

Enable the hide issues menu experiment to hide issues in the Issues tab. This way, you can focus on the important issues that matter to you.

In the Issue tab, hover an issue, click on the issue menu আরও on the right, select Hide issues like this to hide it.

Experimental hide issue context menu

Chromium issue: 1175722

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.

,

Use DevTools in your preferred language

Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language!

Open Settings , then select your preferred language under the Preferences > Language dropdown and reload DevTools.

Preferences" width="800" height="494">

Chromium issue: 1163928

New Nest Hub devices in the Device list

You can now simulate the dimensions of Nest Hub and Nest Hub Max in the Device mode .

Click Toggle Device Toolbar ডিভাইস টুলবার টগল করুন , select Nest Hub or Nest Hub Max under the device list.

Nest Hub device in the Device mode

Chromium issue: 1223525

Origin trials in the Frame details view

You can now get information about a site's origin trials in the frame details view under the Application panel.

Origin trials gives you access to a new or experimental feature, to build functionality your users can try out for a limited time before the feature is made available to everyone.

Open a page with origin trials (eg demo page ). In the Application panel, scroll down to the Frames section and select the top frame.

Origin trials in the Frame details view

Chromium issue: 607555

New CSS container queries badge

A new container badge is added next to the container elements (the ancestor elements that match the criteria of @container at-rules). Click the badge to toggle the display of an overlay of the chosen container and all its querying descendants on the page.

CSS container queries badge

Chromium issue: 1146422

New checkbox to invert the network filters

Use the new Invert checkbox to invert the filters in the Network panel.

For example, you can type "status-code: 404" to filter the network requests with status 404. Enable the Invert checkbox to negate the filter (show all network requests which are not with status 404).

Invert the network filters

Chromium issue: 1054464

Upcoming deprecation of the Console sidebar

The Console sidebar will be removed in favor of moving the filter UI to the toolbar. Do you have any concerns or feedback? Let us know via this issue tracker .

Console sidebar deprecation message

Chromium issue: 1232937

Display raw Set-Cookie headers in the Issues tab and Network panel

DevTools now displays raw Set-Cookie headers in the Issues tab.

Previously, DevTools did not show malformed cookies (incorrect Set-Cookie header) in the Network panel. With the new response-header-set-cookie filter added in the Network panel, users can filter the raw Set-Cookie header response. DevTools will link the raw Set-Cookie headers in the Issues tab to the Network panel.

Raw 'Set-Cookie' headers in the Issues tab and Network panel

Chromium issue: 1179186

Consistent display native accessors as own properties in the Console

The Console now displays native accessors as their own properties consistently.

For example, when evaluating the new Int8Array([1, 2, 3]) expression in the Console , native accessors like length , byteOffset did not display in the preview. With this latest update, native accessors are shown in the preview and values are eagerly evaluated when expanded.

Consistent display native accessors as own properties in the Console

Chromium issues: 1076820 , ​​1199247

Proper error stack traces for inline scripts with #sourceURL

DevTools now resolves inline scripts with #sourceURL properly and shows proper error stack traces for debugging.

Previously DevTools displayed incorrect location for inline scripts with #sourceURL , relative to the surrounding document rather than relative to the opening <script> tag.

Proper error stack traces for inline scripts with #sourceURL

Chromium issues: 1183990 , ​​578269

Change color format in the Computed pane

You can now change the color format of any element in the Computed pane by Shift + click on the color preview.

Shift+Click the color preview to change color format

Chromium issue: 1226371

Replace custom tooltips with native HTML tooltips

DevTools now adopts native HTML tooltips across all components. DevTools has had a custom tooltip implementation for a long time due to the lack of styling of a native HTML tooltip.

Unfortunately, maintaining a custom tooltip implementation is complicated and we regularly run into complicated bugs.

After reweighting the benefits of the custom implementations, we find that the native HTML tooltips are sufficient for DevTools and adopting the tooltips prevents a vast variety of problems for our users.

DevTools tooltip

Chromium issue: 1223391

[Experimental] Hide issues in the Issues tab

Enable the hide issues menu experiment to hide issues in the Issues tab. This way, you can focus on the important issues that matter to you.

In the Issue tab, hover an issue, click on the issue menu আরও on the right, select Hide issues like this to hide it.

Experimental hide issue context menu

Chromium issue: 1175722

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.