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

সোফিয়া এমেলিয়ানোভা
Sofia Emelianova
GitHub
জেসলিন ইয়েন

নেটওয়ার্ক প্রতিক্রিয়া শিরোনামগুলিকে ওভাররাইড করুন

এখন আপনি নেটওয়ার্ক প্যানেলে রেসপন্স হেডারগুলিকে ওভাররাইড করতে পারবেন। পূর্বে, HTTP রেসপন্স হেডারগুলি নিয়ে পরীক্ষা করার জন্য আপনার ওয়েব সার্ভারে অ্যাক্সেসের প্রয়োজন হত।

রেসপন্স হেডার ওভাররাইডের সাহায্যে, আপনি স্থানীয়ভাবে বিভিন্ন হেডারের জন্য প্রোটোটাইপ সংশোধন করতে পারেন, যার মধ্যে রয়েছে কিন্তু সীমাবদ্ধ নয়:

একটি হেডার ওভাররাইড করতে, নেটওয়ার্ক > হেডার > রেসপন্স হেডার এ নেভিগেট করুন, হেডারের মানের উপর কার্সার রাখুন, ক্লিক করুন সম্পাদনা করুন। এবং এটি সম্পাদনা করুন।

হেডার ওভাররাইডের মাধ্যমে CORS ত্রুটি সংশোধন করা হয়েছে।

আপনি কাস্টম হেডারও যোগ করতে পারেন।

একটি কাস্টম হেডার যোগ করা হচ্ছে।

এক জায়গায় সব ওভাররাইড সম্পাদনা করতে, Sources > Overrides- এ .headers ফাইলটি সম্পাদনা করুন। সেখানে, আপনি ওয়াইল্ডকার্ড ( * ) ব্যবহার করে একাধিক অনুরোধ ওভাররাইড করতে "অ্যাড ওভাররাইড রুল" এ ক্লিক করতে পারেন।

সমস্ত ওভাররাইড সম্পাদনা করা হচ্ছে।

ক্রোমিয়াম সমস্যা: 1288023 ।

Nuxt, Vite, এবং Rollup ডিবাগিং উন্নতি

ডিবাগিংয়ের সময় সমস্যাগুলি দ্রুত চিহ্নিত করতে আপনাকে সাহায্য করার জন্য, উন্নত স্ট্যাক ট্রেস এখন Nuxt 3.3 বা তার পরবর্তী সংস্করণ দ্বারা তৈরি উৎস থেকে আসা ফ্রেমগুলিকে লুকিয়ে রাখে। DevTools এই ধরনের ফ্রেমগুলি এড়িয়ে যায়:

  • কনসোল ট্রেসে, Show N more frames লিঙ্কের অধীনে।
  • সোর্স > কল স্ট্যাক এর অধীনে চেকবক্স। উপেক্ষা-তালিকাভুক্ত ফ্রেমগুলি দেখান ।

থার্ড-পার্টি ইগনোর-লিস্টিং সক্ষম করার আগে এবং পরে স্ট্যাক ট্রেস।

এই উন্নতিগুলি আপনাদের সামনে তুলে ধরার জন্য, DevTools, Nuxt, Vite এবং Rollup টিম x_google_ignoreList সোর্স ম্যাপ এক্সটেনশনটি গ্রহণ করার জন্য সহযোগিতা করেছে:

DevTools টিম এটি সম্ভব করার জন্য Nuxt, Vite এবং Rollup টিমের প্রতি কৃতজ্ঞতা প্রকাশ করতে চায়। আমরা আপনার প্রচেষ্টা এবং সহযোগিতার প্রশংসা করি, যা এই বাস্তবায়নের সাফল্যের জন্য অপরিহার্য ছিল। আপনার অবদানের জন্য আবারও ধন্যবাদ!

এলিমেন্টস > স্টাইলে CSS উন্নতি

অবৈধ CSS বৈশিষ্ট্য এবং মান

CSS সমস্যাগুলি দ্রুত নির্ণয় করতে, Styles প্যানটি এখন নিম্নলিখিতগুলি অতিক্রম করে:

  • CSS প্রোপার্টি অবৈধ হলে একটি সম্পূর্ণ CSS ডিক্লেয়ারেশন (প্রপার্টি এবং মান)।
  • শুধুমাত্র সেই মান যখন CSS প্রোপার্টি বৈধ কিন্তু মানটি অবৈধ।

অবৈধ সম্পত্তির নাম এবং অবৈধ সম্পত্তির মান।

এই উন্নতি সাধনের জন্য DevTools টিম Yisi(一丝) এর প্রতি কৃতজ্ঞতা প্রকাশ করতে চায়।

অ্যানিমেশন শর্টহ্যান্ড প্রোপার্টিতে কী ফ্রেমের লিঙ্ক

animation শর্টহ্যান্ড CSS প্রোপার্টিতে এখন সংশ্লিষ্ট @keyframes at-rules এর লিঙ্ক রয়েছে, যাতে আপনি Styles প্যানে দ্রুত নেভিগেট করতে পারেন।

অ্যানিমেশন শর্টহ্যান্ড প্রপার্টিতে কী ফ্রেমের লিঙ্ক।

ক্রোমিয়াম সমস্যা: 1420656 ।

নতুন কনসোল সেটিং: এন্টারে অটোকম্পলিট

পূর্ববর্তী সংস্করণ (112) থেকে শুরু করে, আপনি Enter টিপলে একটি স্বয়ংক্রিয়-সম্পূর্ণ পরামর্শ প্রয়োগ করার জন্য DevTools কনসোল কনফিগার করতে পারেন।

ডিফল্টরূপে, একটি স্বয়ংক্রিয়ভাবে সম্পূর্ণ পরামর্শ গ্রহণ করতে, আপনি Tab বা Arrow right টিপতে পারেন। Enter দিয়ে স্বয়ংক্রিয়ভাবে সম্পূর্ণ করতে, সক্ষম করুন সেটিংস. সেটিংস > কনসোল > চেকবক্স। এন্টার এ স্বয়ংসম্পূর্ণ পরামর্শ গ্রহণ করুন ।

সেটিংসে সংশ্লিষ্ট চেকবক্স।

অতিরিক্তভাবে, অন্য একটি সেটিং এর টেক্সট এখন আরও ব্যবহারকারী-বান্ধব: চেকবক্স। কোড মূল্যায়নকে ব্যবহারকারীর ক্রিয়া হিসেবে বিবেচনা করুন ।

ক্রোমিয়াম সমস্যা: 1276960 ।

কমান্ড মেনু লেখা ফাইলের উপর জোর দেয়

কমান্ড মেনুতে দ্রুত খোলা ডায়ালগটি এখন উপেক্ষা-তালিকাভুক্ত তৃতীয়-পক্ষের ফাইলগুলিকে ধূসর করে তোলে যাতে আপনার লেখা ফাইলগুলির উপর আরও জোর দেওয়া যায়।

পরিবর্তনের আগে এবং পরে দ্রুত খোলা ডায়ালগে একটি উপেক্ষা-তালিকাভুক্ত স্ক্রিপ্ট।

ক্রোমিয়াম সমস্যা: 1424345 ।

জাভাস্ক্রিপ্ট প্রোফাইলার অবচয়: দ্বিতীয় পর্যায়

Chrome 58 এর প্রথম দিকে, DevTools টিম অবশেষে JavaScript প্রোফাইলারকে অবমূল্যায়ন করার পরিকল্পনা করেছিল এবং Node.js এবং Deno ডেভেলপারদের JavaScript CPU কর্মক্ষমতা প্রোফাইল করার জন্য পারফরম্যান্স প্যানেল ব্যবহার করতে বাধ্য করেছিল।

DevTools সংস্করণ ১১৩ চার-পর্যায়ের জাভাস্ক্রিপ্ট প্রোফাইলার অবচয়নের দ্বিতীয় পর্যায় শুরু করে। এই পর্যায়ে, আপনি এখনও প্যানেলটি খুলতে পারেন কিন্তু এর UI আর উপলব্ধ থাকবে না।

CPU কর্মক্ষমতা প্রোফাইল করতে, Go to Performance panel এ ক্লিক করুন।

জাভাস্ক্রিপ্ট প্রোফাইলার অবচয়।

ক্রোমিয়াম সমস্যা: 1354548 ।

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

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

  • সোর্স প্যানেলে প্রিটি-প্রিন্টিংয়ের ফলে ইউনিকোড অক্ষর সহ ভেরিয়েবলের নামগুলি ভুলভাবে পরিচালনা করার একটি বাগ সংশোধন করা হয়েছে ( 1425055 )।
  • সমস্যা ট্যাবে অ-মানক HTML মান ( 1399414 ) সম্পর্কিত অটোফিল সমস্যাগুলির জন্য একটি নতুন বার্তা যোগ করা হয়েছে।

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

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

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

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

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

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