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

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

ইস্টার ডিম খুঁজুন

এই বছরের এপ্রিল ফুল দিবস উদযাপন করতে, DevTools টিম DevTools-এ কোথাও একটি ইস্টার ডিম লুকিয়ে রেখেছে৷

এটি খুঁজতে, একটি রঙিন 💫 ইমোজি খুঁজুন।

উপাদান প্যানেল আপডেট

এই সংস্করণটি উপাদান প্যানেলে বেশ কিছু আপডেট নিয়ে আসে।

উপাদান > শৈলীতে একটি ফোকাস করা পৃষ্ঠা অনুকরণ করুন

এলিমেন্টস > শৈলী ট্যাবে এখন টগল এলিমেন্ট স্টেট ( :hov ) বোতামের অধীনে একটি ফোকাসড পেজ এমুলেট করুন রয়েছে। পূর্বে, আপনি শুধুমাত্র রেন্ডারিং প্যানেলে এই বিকল্পটি খুঁজে পেতে পারেন।

আপনি যদি পৃষ্ঠা থেকে DevTools-এ ফোকাস স্যুইচ করেন, কিছু ওভারলে উপাদান স্বয়ংক্রিয়ভাবে লুকিয়ে রাখে যদি সেগুলি ফোকাস দ্বারা ট্রিগার হয়। উদাহরণস্বরূপ, ড্রপ-ডাউন তালিকা, মেনু বা তারিখ পিকার। এমুলেট একটি ফোকাসড পৃষ্ঠা বিকল্প আপনাকে এমন একটি উপাদান ডিবাগ করতে দেয় যেন এটি ফোকাসে রয়েছে।

শৈলী ট্যাবে একটি ফোকাস করা পৃষ্ঠা অনুকরণ করার আগে এবং পরে।

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

var() ফলব্যাকে কালার পিকার, অ্যাঙ্গেল ক্লক এবং ইজিং এডিটর

CSS এডিটিং সহজ করতে, Elements > Styles ট্যাব এখন আপনাকে var() ফলব্যাকে Color Picker , Angle Clock এবং Easing Editor ব্যবহার করতে দেয়।

var() ফলব্যাকে কালার পিকার, অ্যাঙ্গেল ক্লক এবং ইজিং এডিটর টুল রেন্ডার করার আগে এবং পরে।

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

CSS দৈর্ঘ্যের টুলটি বাতিল করা হয়েছে

প্রতিক্রিয়ার কারণে CSS দৈর্ঘ্যের অথরিং টুলটি বাতিল করা হয়েছে যে এটি কর্মপ্রবাহকে ধীর করে দেয় এবং খুব বেশি মূল্য যোগ করে না।

আপনি মান সামঞ্জস্য করতে আর টেনে আনতে পারবেন না বা ড্রপ-ডাউন মেনু থেকে একটি ইউনিটের ধরন নির্বাচন করতে পারবেন না। পরিবর্তে, মানটিতে ডাবল ক্লিক করুন এবং একটি নতুন টাইপ করুন।

দৈর্ঘ্য টুলটি আবার চালু করতে, স্টাইল ট্যাবে সেটিংস সেটিংস পরীক্ষা-নিরীক্ষা > ডিপ্রেকেট CSS <length> অথরিং টুলটি পরিষ্কার করুন।

আপনি যদি এখনও এই টুলটি ব্যবহার করতে চান, তাহলে DevTools টিম আপনার মতামত এবং দৈর্ঘ্যের টুলটি আপনার কর্মপ্রবাহে আপনাকে কীভাবে সাহায্য করে তা শুনতে চাই। crbug/1522657- এ মতামত দিতে নির্দ্বিধায়।

অবচয় পরীক্ষা বন্ধ করা হয়েছে।

পারফরম্যান্স > প্রধান ট্র্যাকে নির্বাচিত অনুসন্ধান ফলাফলের জন্য পপওভার

অনুসন্ধানকে আরও সহজ করার জন্য, পারফরম্যান্স > প্রধান ট্র্যাকের ফ্লেম চার্ট এখন আপনাকে সংশ্লিষ্ট ইভেন্টের শীর্ষে একটি পপওভার দেখায় যখন আপনি অনুসন্ধানের ফলাফলের মধ্য দিয়ে যান৷

নির্বাচিত অনুসন্ধান ফলাফলের উপরে একটি পপওভার দেখানোর আগে এবং পরে।

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

নেটওয়ার্ক প্যানেল আপডেট

এই সংস্করণটি নেটওয়ার্ক প্যানেলে কয়েকটি আপডেট নিয়ে আসে।

নেটওয়ার্ক > ইভেন্টস্ট্রিম ট্যাবে বোতাম এবং অনুসন্ধান ফিল্টার সাফ করুন

নেটওয়ার্ক > ইভেন্টস্ট্রিম ট্যাবটি পায়:

  • একটি ক্লিয়ার বোতাম যা টেবিলে ক্যাপচার করা ইভেন্টগুলি সাফ করে।
  • একটি সার্চ ফিল্টার যা রেগুলার এক্সপ্রেশন বোঝে।

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

DevTools টিম এই বৈশিষ্ট্যটি অবতরণের জন্য Charles Vazac কে ধন্যবাদ জানাতে চাই৷

উপরন্তু, ইভেন্টস্ট্রিম ট্যাবটি এখন ইভেন্টগুলিও ক্যাপচার করে যা সার্ভারগুলি ফেচ/এক্সএইচআর-এর মাধ্যমে পাঠায়, শুধুমাত্র EventSource API নয়। এই ডেমো পৃষ্ঠায় এটি চেষ্টা করুন.

ক্রোমিয়াম সমস্যা: 1488863 , 40659493 ।

নেটওয়ার্ক > কুকিজ-এ তৃতীয় পক্ষের কুকির জন্য ছাড়ের কারণ সহ টুলটিপ

নেটওয়ার্ক > কুকিজ ট্যাব এখন কুকিজের পাশে ছাড়ের কারণ সহ টুলটিপ দেখায় যা অন্যথায় তৃতীয় পক্ষের কুকি ফেজআউট দ্বারা ব্লক করা উচিত ছিল।

তৃতীয় পক্ষের কুকির জন্য একটি ছাড়ের কারণ সহ একটি টুলটিপ দেখানোর আগে এবং পরে৷

তৃতীয় পক্ষের কুকি নিম্নলিখিত কারণে অনুমোদিত হতে পারে:

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

উত্সগুলিতে সমস্ত ব্রেকপয়েন্ট সক্ষম এবং অক্ষম করুন৷

উত্স > ব্রেকপয়েন্ট বিভাগটি তার ড্রপ-ডাউন মেনুতে সমস্ত ব্রেকপয়েন্ট বিকল্পগুলি সক্ষম এবং নিষ্ক্রিয় করে ফিরিয়ে আনে। পূর্বে, ব্রেকপয়েন্ট রিডিজাইন দ্বারা এই বিকল্পগুলি বাদ দেওয়া হয়েছিল।

সমস্ত ব্রেকপয়েন্ট সক্রিয় বা নিষ্ক্রিয় করতে, উৎস > ব্রেকপয়েন্টে একটি ব্রেকপয়েন্টে ডান-ক্লিক করুন এবং সংশ্লিষ্ট বিকল্পটি নির্বাচন করুন।

এর আগে এবং পরে সক্রিয় এবং নিষ্ক্রিয় বিকল্পগুলি ফিরিয়ে আনুন।

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

Node.js-এর জন্য DevTools-এ লোড করা স্ক্রিপ্টগুলি দেখুন

Node.js-এর জন্য DevTools এখন সোর্স > স্ক্রিপ্ট- এ নেভিগেশন ট্রিতে লোড করা স্ক্রিপ্ট দেখায়।

লোড করা স্ক্রিপ্টের একটি ট্রি সহ স্ক্রিপ্ট ট্যাব যোগ করার আগে এবং পরে।

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

বাতিঘর 11.5.0

Lighthouse প্যানেল এখন Lighthouse 11.5.0 চালায়। পরিবর্তনের সম্পূর্ণ তালিকা দেখুন।

উল্লেখযোগ্য পরিবর্তনগুলির মধ্যে একটি নতুন অডিট যা লেআউট পরিবর্তনের মূল কারণগুলি অনুমান করে। এই অডিট লেআউট-শিফ্ট-এলিমেন্টের অডিটকে প্রতিস্থাপন করে যা শুধুমাত্র লেআউট শিফট দ্বারা প্রভাবিত উপাদানগুলিকে তালিকাভুক্ত করে।

একটি নতুন অডিট যা লেআউট পরিবর্তনের মূল কারণগুলি অনুমান করে৷

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

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

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

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

  • স্ক্রিন রিডাররা এখন ঘোষণা করে:
    • রেকর্ডার প্যানেলে নির্বাচক প্রকারের পাশে আরও জানুন লিঙ্ক পাঠ্য।
    • যখন কোনো পরীক্ষা-নিরীক্ষা সেটিংস > পরীক্ষা-নিরীক্ষার ফিল্টারের সাথে মেলে না।
    • > শর্টকাটগুলিতে শর্টকাট অপসারণ, নিশ্চিত বা পুনরুদ্ধার করার সময় অ্যাকশন নিশ্চিতকরণ ।
  • সেটিংস > অবস্থানে থাকা সারণীটি এখন অ্যাক্সেসিবিলিটি টুলের জন্য একটি টেবিল হিসেবে সঠিকভাবে রেন্ডার করে।

ক্রোমিয়াম সমস্যা: 1516957 , 324282443 , 324467508 , 324930007 ।

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

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

  • DevTools-এর ফন্টগুলি Chrome ( 1523538 ) এর সাথে মেলে আপডেট করা হয়েছে।
  • পারফরম্যান্স : টাইমলাইনে ঘোরাঘুরি করার সময় স্থির স্ক্রিনশট প্রদর্শন ( 1519469 )।
  • সূত্র : ভাল কোড পাঠযোগ্যতার জন্য সম্পাদকের লাইনের উচ্চতা বৃদ্ধি করা হয়েছে ( 1523640 )।
  • নেটওয়ার্ক > প্রতিক্রিয়া : বিভিন্ন ফরম্যাট এবং এনকোডিং ( 1523128 , 1509336 , 1523128 , 41481944 , 1509336 ) সহ বিভিন্ন প্রদর্শন সমস্যা সমাধান করা হয়েছে৷

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

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

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

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

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

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

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