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

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

ইস্টার এগ খুঁজুন

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

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

এলিমেন্ট প্যানেল আপডেট

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

এলিমেন্টস > স্টাইলসে একটি ফোকাসড পৃষ্ঠা অনুকরণ করুন

Elements > Styles ট্যাবে এখন Toggle elements state ( :hov ) বোতামের অধীনে "Emulate a focused page" বিকল্পটি রয়েছে। পূর্বে, আপনি এই বিকল্পটি শুধুমাত্র Rendering প্যানেলে খুঁজে পেতেন।

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

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

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

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

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

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

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

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

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

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

দৈর্ঘ্য টুলটি আবার চালু করতে, Styles ট্যাবে সেটিংস > Experiments > check_box মুছে ফেলুন। CSS <length> অথরিং টুল করুন

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

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

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

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

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

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

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

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

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

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

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

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

এই বৈশিষ্ট্যটি চালু করার জন্য DevTools টিম চার্লস ভাজ্যাককে ধন্যবাদ জানাতে চায়।

অতিরিক্তভাবে, EventStream ট্যাব এখন কেবল EventSource API নয়, fetch/XHR এর মাধ্যমে সার্ভার কর্তৃক প্রেরিত ইভেন্টগুলিও ক্যাপচার করে। এই ডেমো পৃষ্ঠায় এটি চেষ্টা করে দেখুন।

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

নেটওয়ার্ক > কুকিজ-এ থার্ড-পার্টি কুকিজের জন্য অব্যাহতির কারণ সহ টুলটিপস

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

থার্ড-পার্টি কুকির জন্য অব্যাহতির কারণ সহ একটি টুলটিপ দেখানোর আগে এবং পরে।

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

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

সোর্সে সকল ব্রেকপয়েন্ট সক্রিয় এবং নিষ্ক্রিয় করুন

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

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

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

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

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

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

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

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

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

লাইটহাউস প্যানেল এখন লাইটহাউস ১১.৫.০ চালায়। পরিবর্তনগুলির সম্পূর্ণ তালিকা দেখুন।

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

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

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 সম্পর্কিত নতুন বৈশিষ্ট্য, আপডেট বা অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন।

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

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