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

Sofia Emelianova

Jecelyn Yeen

রেকর্ডার আপডেট

রিপ্লে এক্সটেনশন সাপোর্ট

রেকর্ডার কাস্টম রিপ্লে বিকল্পগুলির জন্য সমর্থন প্রবর্তন করে যা আপনি একটি এক্সটেনশনের মাধ্যমে DevTools-এ এম্বেড করতে পারেন।

উদাহরণ এক্সটেনশনটি ব্যবহার করে দেখুন। কাস্টম রিপ্লে UI খুলতে নতুন কাস্টম রিপ্লে বিকল্পটি নির্বাচন করুন।

আপনার প্রয়োজন অনুসারে রেকর্ডারটি কাস্টমাইজ করতে এবং এটিকে আপনার সরঞ্জামগুলির সাথে একীভূত করতে, আপনার নিজস্ব এক্সটেনশন তৈরি করার কথা বিবেচনা করুন: chrome.devtools.recorder API অন্বেষণ করুন এবং আরও এক্সটেনশন উদাহরণ দেখুন।

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

পিয়ার্স সিলেক্টর দিয়ে রেকর্ড করুন

কাস্টম, CSS, ARIA, টেক্সট এবং XPath সিলেক্টর ছাড়াও, আপনি এখন pierce selectors ব্যবহার করে রেকর্ড করতে পারেন। এই সিলেক্টরগুলি CSS এর মতো আচরণ করে তবে ছায়ার মূলের মধ্য দিয়েও ভেদ করতে পারে।

ছায়া DOM সহ একটি পৃষ্ঠায় একটি নতুন রেকর্ডিং শুরু করুন এবং পরীক্ষা করুন রেকর্ড করার জন্য Selector টাইপগুলিতে Pierce করুন । Shadow DOM-এর উপাদানগুলির সাথে আপনার মিথস্ক্রিয়া রেকর্ড করুন এবং সংশ্লিষ্ট ধাপটি পরীক্ষা করুন।

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

লাইটহাউস বিশ্লেষণের মাধ্যমে পাপেটিয়ার স্ক্রিপ্ট হিসেবে রপ্তানি করুন

রেকর্ডার একটি নতুন রপ্তানি বিকল্প চালু করেছে: পাপেটিয়ার (লাইটহাউস বিশ্লেষণ সহ) । পাপেটিয়ারের সাহায্যে, আপনি ক্রোমকে স্বয়ংক্রিয় এবং নিয়ন্ত্রণ করতে পারেন। লাইটহাউসের সাহায্যে, আপনি আপনার ওয়েবসাইটের কর্মক্ষমতা ক্যাপচার এবং উন্নত করতে পারেন।

আপনার রেকর্ডিং খুলুন, ক্লিক করুন এক্সপোর্ট করুন , নতুন বিকল্পটি নির্বাচন করুন এবং .js ফাইলটি সংরক্ষণ করুন।

flow.report.html ফাইলে Lighthouse রিপোর্ট পেতে Puppeteer স্ক্রিপ্টটি চালান ।

এক্সটেনশন পান

আপনার রেকর্ডার অভিজ্ঞতা কাস্টমাইজ করার জন্য বিকল্পগুলি অন্বেষণ করুন, উদাহরণস্বরূপ, কাস্টম এক্সপোর্ট বিকল্পগুলির সাথে। ক্লিক করে রেকর্ডারের জন্য এক্সটেনশনগুলি পান এক্সপোর্ট করুন > রেকর্ডিংয়ে এক্সটেনশন পান ।

রেকর্ডার এক্সটেনশনের তালিকায় আপনার নিজস্ব এক্সটেনশন যোগ করতে দ্বিধা করবেন না। আমরা তালিকায় আপনারটি দেখার জন্য অধীর আগ্রহে অপেক্ষা করছি!

ক্রোমিয়াম সমস্যা: 1417104 , 1413168 ।

এলিমেন্ট > স্টাইল আপডেট

সিএসএস ডকুমেন্টেশন

আপনি দিনে কতবার CSS প্রোপার্টি সম্পর্কে ডকুমেন্টেশন খোঁজেন? Elements > Styles পেইন এখন যখন আপনি কোনও প্রোপার্টির উপর কার্সার রাখেন তখন আপনাকে একটি সংক্ষিপ্ত বিবরণ দেখায়।

টুলটিপে আরও জানুন লিঙ্ক রয়েছে যা আপনাকে এই প্রপার্টির একটি MDN CSS রেফারেন্সে নিয়ে যাবে।

যদি আপনি CSS ভালোভাবে জানেন, তাহলে টুলটিপগুলি আপনার কাছে বিরক্তিকর মনে হতে পারে। সবগুলো বন্ধ করতে, চেক করুন দেখাবেন না ।

এগুলো আবার চালু করতে, চেক করুন সেটিংস > পছন্দ > উপাদান > CSS ডকুমেন্টেশন টুলটিপ দেখান ।

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

সিএসএস নেস্টিং সাপোর্ট

এলিমেন্টস > স্টাইলস প্যান এখন সিএসএস নেস্টিং সিনট্যাক্স চিনতে পারে এবং সঠিক এলিমেন্টগুলিতে নেস্টেড স্টাইল প্রয়োগ করে।

ক্রোমিয়াম সমস্যা: ১১৭২৯৮৫ ।

কনসোলে লগপয়েন্ট এবং শর্তসাপেক্ষ ব্রেকপয়েন্ট চিহ্নিত করা

উন্নত ব্রেকপয়েন্ট UX আরও উন্নত করে, কনসোল এখন ব্রেকপয়েন্ট দ্বারা ট্রিগার হওয়া বার্তাগুলিকে চিহ্নিত করে:

• console.* কমলা প্রশ্নবোধক চিহ্ন সহ শর্তসাপেক্ষ ব্রেকপয়েন্টে কল করে ?
• গোলাপী দুটি বিন্দু সহ লগপয়েন্ট বার্তা ..

কনসোল এখন আপনাকে VM<number> স্ক্রিপ্টের পরিবর্তে সোর্স ফাইলের ব্রেকপয়েন্টের জন্য সঠিক অ্যাঙ্কর লিঙ্ক দেয় যা Chrome V8 তে যেকোনো জাভাস্ক্রিপ্ট চালানোর জন্য তৈরি করে।

ব্রেকপয়েন্ট এডিটরে সরাসরি যেতে ব্রেকপয়েন্ট বার্তার পাশের লিঙ্কে ক্লিক করুন।

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

ডিবাগিংয়ের সময় অপ্রাসঙ্গিক স্ক্রিপ্টগুলি উপেক্ষা করুন

আপনার কোডের সবচেয়ে গুরুত্বপূর্ণ অংশগুলিতে ফোকাস করতে সাহায্য করার জন্য, আপনি এখন Sources > Page প্যানের ফাইল ট্রি থেকে Ignore List- এ অপ্রাসঙ্গিক স্ক্রিপ্ট যোগ করতে পারেন।

যেকোনো স্ক্রিপ্ট বা ফোল্ডারে ডান-ক্লিক করুন এবং উপেক্ষা-সম্পর্কিত বিকল্পগুলির মধ্যে একটি নির্বাচন করুন। আপনি তালিকা থেকে স্ক্রিপ্ট বা ফোল্ডার যোগ বা অপসারণের বিকল্প দেখতে পাবেন। ডিবাগার তালিকায় যোগ করা স্ক্রিপ্টগুলিকে উপেক্ষা করে এবং কল স্ট্যাকে সেগুলি বাদ দেয়।

ফাইল ট্রিতে সমস্ত উপেক্ষা-তালিকাভুক্ত স্ক্রিপ্ট এবং ফোল্ডার ধূসর হয়ে গেছে।

যদি আপনি একটি উপেক্ষা করা স্ক্রিপ্ট নির্বাচন করেন, তাহলে কনফিগার বোতামটি আপনাকে এখানে নিয়ে যাবে সেটিংস > Ignore List । আপনি ফাইল ট্রি থেকে উপেক্ষা করা উৎসগুলি লুকাতে পারেন > উপেক্ষা-তালিকাভুক্ত উৎসগুলি লুকান .

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

জাভাস্ক্রিপ্ট প্রোফাইলার বন্ধ করা শুরু হয়েছে

Chrome 58 এর প্রথম দিকে, DevTools টিম অবশেষে JavaScript প্রোফাইলারকে অবমূল্যায়ন করার পরিকল্পনা করেছিল এবং Node.js এবং Deno ডেভেলপারদের JavaScript CPU কর্মক্ষমতা প্রোফাইল করার জন্য পারফরম্যান্স প্যানেল ব্যবহার করতে বাধ্য করেছিল।

এই DevTools সংস্করণ (112) চার-পর্যায়ের জাভাস্ক্রিপ্ট প্রোফাইলার অবচয় শুরু করে। জাভাস্ক্রিপ্ট প্রোফাইলার প্যানেল এখন সংশ্লিষ্ট সতর্কতা ব্যানার দেখায়।

প্রোফাইলারের পরিবর্তে, CPU প্রোফাইল করতে পারফরম্যান্স প্যানেল ব্যবহার করুন।

আরও জানুন এবং সংশ্লিষ্ট RFC এবং crbug.com/1354548 ওয়েবসাইটে মতামত দিন।

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

হ্রাসকৃত কন্ট্রাস্ট অনুকরণ করুন

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

মনে রাখবেন যে তালিকার বিকল্পগুলি আপডেট করা হয়েছে যাতে আপনি জানতে পারেন যে বিকল্পগুলি কোন রঙের অসংবেদনশীলতাকে প্রতিনিধিত্ব করে।

DevTools এর সাহায্যে, আপনি একবারে সমস্ত কন্ট্রাস্ট সমস্যা খুঁজে পেতে এবং সমাধান করতে পারেন। আরও তথ্যের জন্য, আপনার ওয়েবসাইটকে আরও পাঠযোগ্য করুন দেখুন।

ক্রোমিয়াম সমস্যা: 1412719 , 1412721 ।

বাতিঘর ১০

লাইটহাউস প্যানেলটি এখন লাইটহাউস 10.0.1 চালায়। আরও বিস্তারিত জানার জন্য, লাইটহাউস 10.0.1 এ নতুন কী আছে তা দেখুন।

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

বাতিঘর > > লিগ্যাসি নেভিগেশন এখন ডিফল্টরূপে অক্ষম করা আছে। এই বিকল্পটি নেভিগেশন মোডে লিগ্যাসি লাইটহাউস কনফিগারেশন ব্যবহার করে।

Lighthouse 10 এখন ডিফল্ট এমুলেশন ডিভাইস হিসেবে Moto G Power ব্যবহার করে। DevTools এই ডিভাইসটি এতে যুক্ত করেছে সেটিংস > ডিভাইস ।

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

আপনার নো-অপ সার্ভিস ওয়ার্কার ফেচ হ্যান্ডলারটি সরানোর জন্য একটি কনসোল সতর্কতা

Chrome 112 নো-অপ (কোনও অপারেশন নয়) পরিষেবা কর্মীদের আনা হ্যান্ডলার এড়িয়ে যায় কারণ এগুলি নেভিগেশনের গতি কমিয়ে দিতে পারে কিন্তু কোনও উদ্দেশ্য পূরণ করে না। আপনার ওয়েবসাইটকে একটি প্রগ্রেসিভ ওয়েব অ্যাপ হিসেবে স্বীকৃতি দেওয়ার জন্য এই ধরণের হ্যান্ডলারের আর প্রয়োজন নেই।

আপনার ওয়েবসাইটে যদি কোনও নো-অপশন ফেচ হ্যান্ডলার খুঁজে পায়, তাহলে কনসোল এখন একটি সতর্কতা দেখাবে। এটি অপসারণের কথা বিবেচনা করুন।

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

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

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

• সোর্স > ব্রেকপয়েন্টস ফলকটি এখন অস্পষ্ট ফাইল নামের ( 1403924 ) পাশে ফাইল পাথের পার্থক্য দেখায়।
• পারফরম্যান্স প্যানেলের ফ্লেম চার্টের প্রধান অংশটি এখন CpuProfiler::StartProfiling কে Profiler Overhead ( 1358602 ) হিসেবে মনোনীত করে।
• DevTools উন্নত স্বয়ংক্রিয়সম্পূর্ণতা:
  • সূত্র : যেকোনো শব্দের ধারাবাহিক সমাপ্তি ( 1320204 )।
  • কনসোল : Arrow down প্রথম পরামর্শ নির্বাচন করে এবং পরামর্শগুলি Tab ইঙ্গিত পায় ( 1276960 )।
• DevTools একটি ইভেন্ট লিসেনার ব্রেকপয়েন্ট যোগ করেছে যাতে আপনি যখন ডকুমেন্ট পিকচার-ইন-পিকচার উইন্ডো ( 1315352 ) খুলবেন তখন বিরতি দিতে পারবেন।
• DevTools একটি সমাধান সেট আপ করে যা Vue2 ওয়েবপ্যাক আর্টিফ্যাক্টগুলিকে জাভাস্ক্রিপ্ট ( 1416562 ) হিসাবে সঠিকভাবে প্রদর্শন করে।
• একটি কনসোল সেটিং আরও ভালো নাম পায়: স্বয়ংক্রিয়ভাবে console.trace() বার্তা প্রসারিত করুন। ( 1139616 )।

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

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

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

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

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

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

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