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

Jecelyn Yeen

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

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

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

পছন্দসমূহ" width="800" height="494">

ক্রোমিয়াম সমস্যা: ১১৬৩৯২৮

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

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

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

ক্রোমিয়াম সমস্যা: ১২২৩৫২৫

ফ্রেমের বিবরণ ভিউতে অরিজিন ট্রায়াল

আপনি এখন অ্যাপ্লিকেশন প্যানেলের অধীনে ফ্রেম ডিটেইলস ভিউতে একটি সাইটের অরিজিন ট্রায়াল সম্পর্কে তথ্য পেতে পারেন।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

সমস্যা ট্যাবে, একটি সমস্যা নিয়ে যান, সমস্যা মেনুতে ক্লিক করুন। ডানদিকে, "এই ধরনের সমস্যা লুকান " নির্বাচন করুন।

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

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

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

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

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

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

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

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

Jecelyn Yeen

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

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

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

পছন্দসমূহ" width="800" height="494">

ক্রোমিয়াম সমস্যা: ১১৬৩৯২৮

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

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

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

ক্রোমিয়াম সমস্যা: ১২২৩৫২৫

ফ্রেমের বিবরণ ভিউতে অরিজিন ট্রায়াল

আপনি এখন অ্যাপ্লিকেশন প্যানেলের অধীনে ফ্রেম ডিটেইলস ভিউতে একটি সাইটের অরিজিন ট্রায়াল সম্পর্কে তথ্য পেতে পারেন।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

সমস্যা ট্যাবে, একটি সমস্যা নিয়ে যান, সমস্যা মেনুতে ক্লিক করুন। ডানদিকে, "এই ধরনের সমস্যা লুকান " নির্বাচন করুন।

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

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

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

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

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

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

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

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