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

Sofia Emelianova

রেকর্ডার এক্সটেনশনের অফিসিয়াল সংগ্রহ লাইভ।

এক্সপোর্ট এবং রিপ্লে রেকর্ডার এক্সটেনশনের অফিসিয়াল সংগ্রহ এখন লাইভ।

রেকর্ডার থেকে সরাসরি সংগ্রহটি খুলতে, রেকর্ডার প্যানেলের শীর্ষে অ্যাকশন বারে ডাউনলোড এক্সপোর্ট > এক্সটেনশন পান... নির্বাচন করুন।

নেটওয়ার্ক উন্নতি

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

স্থিতি কলামে ব্যর্থতার কারণ

এখন স্ট্যাটাস কলামটি সর্বদা ব্যর্থতার কারণ দেখায়। পূর্বে, আপনাকে চেকবক্স বড় অনুরোধ সারি চালু করতে হত অথবা টেবিলে অনুরোধটি নির্বাচন করতে হত।

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

উন্নত কপি সাবমেনু

একটি অনুরোধের কপি সাবমেনু এখন আরও ভালোভাবে সাজানো হয়েছে।

অতিরিক্তভাবে, Copy as cURL বিকল্পটি এখন উইন্ডোজের ক্লিপবোর্ডে সঠিক কমান্ডটি কপি করে।

ক্রোমিয়াম সমস্যা: 1267033 , 1276452 , 798498 ।

কর্মক্ষমতা উন্নতি

এই সংস্করণটি পারফরম্যান্স প্যানেলে বেশ কিছু উন্নতি এনেছে।

টাইমলাইনে ব্রেডক্রাম্বস

পারফরম্যান্স প্যানেলের উপরের টাইমলাইনটি এখন আপনাকে ব্রেডক্রাম্ব সেট করতে এবং তাদের মধ্যে লাফ দিতে দেয়।

একটি ব্রেডক্রাম্ব সেট করতে, টাইমলাইনে একটি রেঞ্জ নির্বাচন করুন, তার উপর কার্সার রাখুন এবং N ms zoom_in বোতামে ক্লিক করুন। আপনি পরপর বেশ কয়েকটি নেস্টেড ব্রেডক্রাম্ব তৈরি করতে পারেন। জুম লেভেলের মধ্যে লাফ দিতে, টাইমলাইনের উপরে চেইনের সংশ্লিষ্ট ব্রেডক্রাম্বে ক্লিক করুন। ব্রেডক্রাম্বগুলি কীভাবে কাজ করছে তা দেখতে পরবর্তী ভিডিওটি দেখুন।

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

মূল ট্র্যাকে ইভেন্টের সূচনাকারীরা

ডিফল্টরূপে পারফরম্যান্স > মেইন ট্র্যাক এখন ইনিশিয়েটার এবং তাদের দ্বারা সৃষ্ট নিম্নলিখিত ইভেন্টগুলিকে সংযুক্ত করে এমন তীরগুলি দেখায়।

• স্টাইল বা লেআউট অবৈধকরণ -> স্টাইল বা লেআউট পুনরায় গণনা করুন
• অ্যানিমেশন ফ্রেমের অনুরোধ করুন -> অ্যানিমেশন ফ্রেম ফায়ার করা হয়েছে
• নিষ্ক্রিয় কলব্যাকের অনুরোধ করুন -> নিষ্ক্রিয় কলব্যাক বন্ধ করুন
• টাইমার ইনস্টল করুন -> টাইমার ফায়ারড
• ওয়েবসকেট তৈরি করুন -> পাঠান... এবং ওয়েবসকেট হ্যান্ডশেক করুন অথবা ওয়েবসকেট ধ্বংস করুন

তীরচিহ্নগুলি দেখতে, ট্রেসে এমন একটি ইভেন্ট খুঁজুন এবং এটিতে ক্লিক করুন। পূর্বে, এই বৈশিষ্ট্যটি একটি পরীক্ষামূলক ছিল।

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

Node.js DevTools-এর জন্য JavaScript VM ইনস্ট্যান্স নির্বাচক মেনু

Node.js DevTools-এর পারফরম্যান্স প্যানেলে, আপনি এখন অ্যাকশন বারের সংশ্লিষ্ট ড্রপ-ডাউন মেনু থেকে একটি JavaScript VM ইনস্ট্যান্স নির্বাচন করতে পারেন। শীঘ্রই বন্ধ হতে যাওয়া JavaScript Profiler- এও একই ধরণের বৈশিষ্ট্য উপলব্ধ ছিল।

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

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

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

পরবর্তী দুটি বৈশিষ্ট্য ছাড়াও, এলিমেন্টস প্যানেল এখন আপনার খোলা শেষ ট্যাবটি মনে রাখে, উদাহরণস্বরূপ Computed অথবা Properties ।

::view-transition ছদ্ম-উপাদানটি এখন Styles-এ সম্পাদনাযোগ্য।

আপনি এখন ইন্সপেক্টর স্টাইল শিট ব্যবহার করে Styles- এ ::view-transition CSS pseudo-elements সম্পাদনা করতে পারেন।

আরও তথ্যের জন্য, View Transitions API এর সাহায্যে মসৃণ এবং সহজ ট্রানজিশন দেখুন।

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

ব্লক কন্টেইনারের জন্য align-content প্রোপার্টি সাপোর্ট

align-content প্রোপার্টি এখন যেকোনো ব্লক কন্টেইনারের সাথে কাজ করে, যার মধ্যে রয়েছে table-caption এবং table-cell । পূর্বে, এটি শুধুমাত্র grid এবং flex এর সাথে কাজ করত।

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

সোর্সে নতুন শর্টকাট এবং কমান্ড

আপনি এখন Sources- এ Cmd (Mac) / Ctrl (Win) + Shift + ক্লিক করে একটি লগপয়েন্ট তৈরি করতে পারেন। এই শর্টকাটটি শর্তসাপেক্ষ ব্রেকপয়েন্টের জন্য বিদ্যমান Cmd (Mac) / Ctrl (Win) + ক্লিকের একটি সংযোজন।

কমান্ড মেনুতে নতুন Reveal active file in navigator sidebar কমান্ডটি পাওয়া যাবে যা Editor এর ড্রপ-ডাউন মেনুতে সংশ্লিষ্ট বিকল্পের মতোই কাজ করবে।

ক্রোমিয়াম সমস্যা: 1486933 , 1467464 ।

অনুকরণকৃত ভাঁজযোগ্য ডিভাইসের জন্য ভঙ্গি সমর্থন

ডিভাইস মোড এখন আপনাকে একটি অনুকরণকৃত ভাঁজযোগ্য ডিভাইসের ভঙ্গি সেট করতে দেয়: ক্রমাগত বা ভাঁজ করা । ক্রমাগত ভঙ্গি একটি "সমতল" অবস্থানকে বোঝায় এবং ভাঁজ করা ডিসপ্লের অংশগুলির মধ্যে একটি কোণ তৈরি করে।

অতিরিক্তভাবে, ডিভাইসের তালিকায় একটি নতুন অনুকরণীয় ফোল্ডেবল ডিভাইস রয়েছে: আসুস জেনবুক ফোল্ড।

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

গতিশীল থিমিং

DevTools এখন স্বয়ংক্রিয়ভাবে Chrome এর রঙের থিমের সাথে মেলে। থিম সেট করতে:

1. একটি নতুন ট্যাব খুলুন এবং ডান নীচের কোণায় সম্পাদনা কাস্টমাইজ ক্রোম ক্লিক করুন।
2. চেহারা বিভাগে, ওয়ালপেপারের মাধ্যমে একটি থিম বেছে নিন । থিম পরিবর্তন করুন অথবা একটি রঙ প্যালেট নির্বাচন করুন।

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

নেটওয়ার্ক এবং অ্যাপ্লিকেশন প্যানেলে তৃতীয় পক্ষের কুকিজ ফেজআউট সতর্কতা প্রদান করে

নেটওয়ার্ক এবং অ্যাপ্লিকেশন প্যানেল উভয়ই এখন ট্র্যাকিং সুরক্ষা থেকে তৃতীয় পক্ষের বিধিনিষেধ দ্বারা প্রভাবিত কুকিজের পাশে সতর্কতাগুলি হাইলাইট করে এবং দেখায়।

নেটওয়ার্কে , একটি সতর্কতা আইকন সহ একটি অনুরোধ খুঁজুন, এটিতে ক্লিক করুন এবং কুকিজ ট্যাব খুলুন।

Application এ, Storage > Cookies এ নেভিগেট করুন এবং একটি ডোমেনে ক্লিক করুন। হলুদ রঙে হাইলাইট করা কুকিজ ব্রাউজারে সংরক্ষণ করা হয় না।

সমস্যাগুলি বর্ণনা করে একটি টুলটিপ দেখতে সতর্কতা আইকনের উপর কার্সার রাখুন এবং আরও তথ্য সহ সমস্যা ট্যাব খুলতে আইকনে ক্লিক করুন।

অতিরিক্তভাবে, টেবিলের কুকিগুলি এখন ডিফল্টরূপে নাম অনুসারে সাজানো হয়।

ক্রোমিয়াম সমস্যা: 1506225 , 1503961 ।

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

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

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

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

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

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

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

ক্রোমিয়াম সমস্যা: 1504938 , 1499868 , 1512161 , 1515224 , 1515418 , 1516998 , 1517015 ।

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

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

• অ্যানিমেশন :
  • স্ক্রিনশট পপওভার রেন্ডারিং আউট অফ বাউন্ডস ( 1506991 ) এর বাগটি ঠিক করা হয়েছে।
  • অপসারণ করা অ্যানিমেশন নোডগুলিকে অপসারণ করা হিসাবে চিহ্নিত না করে বাগটি ঠিক করা হয়েছে ( 1506561 )।
• নেটওয়ার্ক :
  • হেডার ওভাররাইড : হেডার ট্যাবে ( 1507856 ) একটি মিথ্যা বেগুনি বিন্দু আইকন সহ একটি বাগ সংশোধন করা হয়েছে।
  • প্রিভিউ : অপ্রয়োজনীয় ডাবল ডিকোডিং ( 1509336 ) সহ একটি বাগ সংশোধন করা হয়েছে।
  • সংক্ষিপ্ত অনুরোধগুলি প্রদর্শিত না হওয়ার কারণে একটি বাগ সংশোধন করা হয়েছে ( 1509862 )।
• অ্যাপ্লিকেশন > IndexedDB : অন্যান্য প্যানেলের সাথে সামঞ্জস্যের জন্য অ্যাকশন বারে পুনরায় সাজানো বোতাম ( 1393800 )।
• সেন্সর : অনুপলব্ধ অবস্থান ভুল কলব্যাক সহ একটি বাগ সংশোধন করা হয়েছে ( 1486859 )।
• কর্মক্ষমতা :
  • আবর্জনা সংগ্রহ বোতামটিতে এখন "bin" ( 1507530 ) এর পরিবর্তে একটি উপযুক্ত আইকন, "mop" রয়েছে।
  • পারফরম্যান্স ট্রেস এখন about:blank ( 1509947 ) এ নেভিগেট করার সময় ডেটা ধরে রাখে।

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

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

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

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

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

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

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