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

Sofia Emelianova

নেটওয়ার্ক প্যানেলে স্ট্রিমলাইন করা ফিল্টার বার

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

এই সংস্করণে সংশ্লিষ্ট পরীক্ষাটি ডিফল্টরূপে চালু ছিল কিন্তু এটি আবার চালু করা হবে। আপনি crbug.com/1523150 ওয়েবসাইটে অগ্রগতি ট্র্যাক করতে পারেন।

নতুন ফিল্টার বারে দুটি ড্রপ-ডাউন মেনু রয়েছে: একটি অনুরোধের ধরণ নির্বাচন করার জন্য এবং অন্যটি ডেটা এবং এক্সটেনশন URL লুকানোর জন্য অথবা কেবল ব্লক করা কুকি এবং অনুরোধ এবং তৃতীয় পক্ষের অনুরোধগুলি দেখানোর জন্য। উভয় মেনুই মাল্টি-সিলেক্ট সমর্থন করে।

পুরাতন ফিল্টার বারটি অবিলম্বে ফিরিয়ে আনতে, সেটিংস > পরীক্ষা > check_box_outline_blank বন্ধ করুন । নেটওয়ার্ক প্যানেলে ফিল্টার বারের পুনঃডিজাইন করুন ।

এই বৈশিষ্ট্য সম্পর্কে আপনার মতামত crbug.com/1500573 ঠিকানায় জানাতে দ্বিধা করবেন না।

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

উপাদানগুলির উন্নতি

@font-palette-values ​​সাপোর্ট

এলিমেন্টস প্যানেল এখন @font-palette-values ​​CSS at-rule সমর্থন করে। এটি আপনাকে font-palette প্রোপার্টির ডিফল্ট মান কাস্টমাইজ করতে দেয়।

Styles- এ, font-palette প্রপার্টির মান ক্লিক করুন এবং DevTools আপনাকে @font-palette-values ​​ডেডিকেটেড বিভাগে নিয়ে যাবে যেখানে আপনি আপনার কাস্টম মানগুলি সম্পাদনা করতে পারবেন।

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

সমর্থিত কেস: অন্য একটি কাস্টম প্রপার্টির ফলব্যাক হিসেবে কাস্টম প্রপার্টি

Elements > Styles এখন এমন একটি কাস্টম প্রপার্টি সমাধান করে যা অন্য একটি কাস্টম প্রপার্টির ফলব্যাক ।

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

উন্নত সোর্স ম্যাপ সাপোর্ট

সেটিংস > পরীক্ষা > চেকবক্স সোর্স ম্যাপ ব্যবহার করে এক্সপ্রেশনে ভেরিয়েবলের নাম সমাধান করুন ডিফল্টরূপে চালু করা হয়েছে।

DevTools সোর্স ম্যাপ ব্যবহার করে আপনার মূল কোডটি একত্রিত, ক্ষুদ্রীকরণ বা সংকলন করার পরেও Sources এবং Scope- এ ডিবাগ করতে দেয়। এই পরীক্ষাটি আপনাকে DevTools জুড়ে আপনার মূল ভেরিয়েবলের নামগুলি ধারাবাহিকভাবে মূল্যায়ন করতে দেয়, যার মধ্যে রয়েছে কিন্তু সীমাবদ্ধ নয়:

• কনসোলে এক্সপ্রেশন এবং স্বয়ংক্রিয়ভাবে সম্পূর্ণ করার পরামর্শ

  

• লাইভ এক্সপ্রেশন

  

• ঘড়ির এক্সপ্রেশন

  

• শর্তসাপেক্ষ ব্রেকপয়েন্ট এবং লগপয়েন্ট

  

আরও বিস্তারিত জানার জন্য, সংশ্লিষ্ট RFC দেখুন।

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

পারফর্মেন্স প্যানেলের উন্নতি

উন্নত ইন্টারঅ্যাকশন ট্র্যাক

পারফরম্যান্স > ইন্টারঅ্যাকশন ট্র্যাকটিতে এমন কিছু হুইস্কার থাকে যা প্রক্রিয়াকরণের সময় সীমানায় ইনপুট এবং উপস্থাপনার বিলম্ব নির্দেশ করে।

উপরন্তু, যখন আপনি কোনও ইন্টারঅ্যাকশনের উপর কার্সার রাখেন, তখন আপনি সময় সম্পর্কে বিস্তারিত জানার জন্য একটি সহায়ক টুলটিপ দেখতে পাবেন।

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

বটম-আপ, কল ট্রি এবং ইভেন্ট লগ ট্যাবে উন্নত ফিল্টারিং

পারফরম্যান্স প্যানেলের বটম-আপ , কল ট্রি এবং ইভেন্ট লগ ট্যাবগুলিতে উন্নত ফিল্টারিংয়ের জন্য তিনটি নতুন বোতাম রয়েছে:

• ম্যাচ_কেস ম্যাচ কেস ।
• নিয়মিত_অভিব্যক্তি নিয়মিত অভিব্যক্তি ।
• match_word পুরো শব্দ মেলাও ।

উপরন্তু, আপনাকে প্রসঙ্গ ধরে রাখতে সাহায্য করার জন্য, এখন কেবল শীর্ষ স্তরের আইটেমগুলি বটম-আপ ট্যাবে ফিল্টারের সাথে মেলে। পূর্বে, ফিল্টারটি প্রতিটি নোডের সাথে মেলে।

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

সোর্স প্যানেলে ইন্ডেন্টেশন মার্কার

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

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

নেটওয়ার্ক প্যানেলে ওভাররাইড করা হেডার এবং কন্টেন্টের জন্য সহায়ক টুলটিপস

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

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

অনুরোধ ব্লকিং প্যাটার্ন যোগ এবং অপসারণের জন্য নতুন কমান্ড মেনু বিকল্প

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

Add কমান্ড আপনাকে প্যাটার্ন নির্দিষ্ট করার জন্য ডায়ালগে নিয়ে যায় এবং Remove কমান্ড নেটওয়ার্ক রিকোয়েস্ট ব্লকিং প্যানেল না খুলেই সমস্ত প্যাটার্ন সরিয়ে দেয়।

CSP লঙ্ঘনের পরীক্ষাটি সরানো হয়েছে

৮৯ সংস্করণে প্রবর্তিত পরীক্ষামূলক CSP লঙ্ঘন ট্যাবটি অপ্রয়োজনীয় বলে সরানো হয়েছে।

এক নজরে CSP-এর বিস্তারিত দেখতে, Application > Frames > Content Security Policy (CSP) -এ যান।

উপরন্তু, ইস্যু প্যানেল CSP লঙ্ঘনের প্রতিবেদন করে।

বাতিঘর ১১.৩.০

লাইটহাউস প্যানেল এখন লাইটহাউস ১১.৩.০ চালায়। পরিবর্তনগুলির সম্পূর্ণ তালিকা দেখুন। উল্লেখযোগ্য পরিবর্তনগুলির মধ্যে রয়েছে ৪০৪ পৃষ্ঠায় প্রতিবেদন চালানোর ক্ষমতা।

DevTools-এ Lighthouse প্যানেল ব্যবহারের মূল বিষয়গুলি জানতে, Lighthouse: ওয়েবসাইটের গতি অপ্টিমাইজ করুন দেখুন।

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

অ্যাক্সেসযোগ্যতা

এই সংস্করণে নিম্নলিখিত অ্যাক্সেসিবিলিটি উন্নতি রয়েছে:

• নেটওয়ার্ক > পেলোড -এ , আপনি এখন ভিউ সোর্স এবং ভিউ ইউআরএল-এনকোডেড বোতামগুলিকে ট্যাব-ফোকাস করতে পারেন এবং সংশ্লিষ্ট ক্রিয়াটি ট্রিগার করতে এন্টার বা স্পেস টিপুন।
• কনসোলে , বিভ্রান্তি কমাতে, যেসব লিঙ্কগুলি স্ক্রিপ্টগুলিতে নিয়ে যায় যা ডিবাগারে আর উপলব্ধ নেই সেগুলি এখন ধূসর হয়ে গেছে এবং ক্লিক করা যাবে না।
• নেভিগেশন ট্রিতে, যেমন Sources > Page এর ট্রিতে, Enter কী এখন শিশুদের সাথে নোডগুলিকে প্রসারিত এবং সংকুচিত করে।

ক্রোমিয়াম সমস্যা: 1338391 , 1500662 , 1420362 ।

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

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

• পারফরম্যান্স । যদি কোনও রেকর্ডিং ব্যর্থ হয়, তাহলে এখন আপনার কাছে raw ট্রেস ইভেন্ট ডাউনলোড করার এবং কী ভুল হয়েছে তা বের করার চেষ্টা করার বিকল্প রয়েছে ( commit )।
• শো কনসোল শর্টকাট (ম্যাকের জন্য Ctrl + ` , উইন্ডোজ এবং লিনাক্সের জন্য Ctrl + + ) এখন কেবল কনসোলটিই খোলে না বরং দ্বিতীয়বার চাপলে বন্ধও হয়ে যায়।
• ডেভেলপার রিসোর্স । CSS রিসোর্স এবং তাদের সমস্যাগুলি রিপোর্ট করতে বাধা দেওয়া একটি বাগ সংশোধন করা হয়েছে ( 1420362 )।
• উপাদান :
  • আইফ্রেমে ( 1453375 ) উপাদান পরিদর্শনের সাথে একটি বাগ সংশোধন করা হয়েছে।
  • কম্পিউটেড । ডিফল্ট মান রেন্ডারিং থেকে বিরত রাখার একটি বাগ সংশোধন করা হয়েছে ( 1499882 )।
  • অনুসন্ধান । এক বা দুটি অক্ষরের ছোট প্রশ্নের ( 1416457 ) মিলের সংখ্যা গণনা করতে বাধা দেওয়া একটি বাগ সংশোধন করা হয়েছে।
• কনসোল । এখন ফিল্টার বক্সে ( 1346936 ) একটি এস্কেপড অক্ষর দিয়ে শেষ হওয়া নিয়মিত এক্সপ্রেশনগুলিকে সঠিকভাবে পার্স করে।
• সেটিংস > ওয়ার্কস্পেস । একটি বাদ দেওয়া ফোল্ডার ( 1503580 ) যোগ করতে বাধা দেওয়া একটি বাগ সংশোধন করা হয়েছে।
• নেটওয়ার্ক > প্রিভিউ । এখন data: URIs ( 1381791 )।
• মেমোরি । অ্যাকশন বারে ( ১২৭৫৪০৭ ) সঠিক আপলোড লোড এবং ডাউনলোড সেভ বোতাম যোগ করা হয়েছে।

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

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

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

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

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

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

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