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 সম্পত্তির মান ক্লিক করুন এবং DevTools আপনাকে @font-palette-values ​​ডেডিকেটেড বিভাগে নিয়ে যাবে যেখানে আপনি আপনার কাস্টম মানগুলি সম্পাদনা করতে পারেন।

শৈলীতে @ফন্ট-প্যালেট-মান বিভাগ।

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

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

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

একটি কাস্টম সম্পত্তির সমাধান করার আগে এবং পরে অন্য একটি কাস্টম এর ফলব্যাক হিসাবে।

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

উন্নত উত্স মানচিত্র সমর্থন

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

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

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

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

কর্মক্ষমতা প্যানেল উন্নতি

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

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

ইন্টারঅ্যাকশন ট্র্যাকে ফিসকার যোগ করার আগে এবং পরে।

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

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

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

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

  • ম্যাচ_কেস ম্যাচ কেস
  • রেগুলার_এক্সপ্রেশন রেগুলার এক্সপ্রেশন
  • match_word পুরো শব্দ মেলে

উন্নত ফিল্টারিংয়ের জন্য তিনটি নতুন বোতাম।

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

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

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

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

উল্লম্ব লাইনের সাথে ইন্ডেন্টেড কোড ব্লক চিহ্নিত করার আগে এবং পরে।

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

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

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

হেডার এবং রেসপন্স ট্যাবে বেগুনি ডট আইকনের পাশে নতুন টুলটিপ।

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

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

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

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

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

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

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

এক নজরে CSP বিবরণ দেখতে, অ্যাপ্লিকেশন > ফ্রেম > বিষয়বস্তু নিরাপত্তা নীতি (CSP) এ নেভিগেট করুন।

অ্যাপ্লিকেশন প্যানেলে বিষয়বস্তুর নিরাপত্তা নীতি।

উপরন্তু, সমস্যা প্যানেল CSP লঙ্ঘনের রিপোর্ট করে।

অ্যাপ্লিকেশন প্যানেলে বিষয়বস্তুর নিরাপত্তা নীতি।

বাতিঘর 11.3.0

Lighthouse প্যানেল এখন Lighthouse 11.3.0 চালায়। পরিবর্তনের সম্পূর্ণ তালিকা দেখুন। উল্লেখযোগ্য পরিবর্তনগুলির মধ্যে 404 পৃষ্ঠায় রিপোর্ট চালানোর ক্ষমতা।

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

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

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

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

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

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

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

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

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

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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