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

Sofia Emelianova

Jecelyn Yeen

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

রিপ্লে এক্সটেনশন সমর্থন

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

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

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

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

পিয়ার্স নির্বাচকদের সঙ্গে রেকর্ড

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

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

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

Lighthouse বিশ্লেষণ সহ একটি Puppeteer স্ক্রিপ্ট হিসাবে রপ্তানি করুন

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

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

একটি flow.report.html ফাইলে একটি লাইটহাউস রিপোর্ট পেতে পাপেটিয়ার স্ক্রিপ্টটি চালান ৷

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

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

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

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

উপাদান > শৈলী আপডেট

CSS ডকুমেন্টেশন

দিনে কতবার আপনি CSS বৈশিষ্ট্যের ডকুমেন্টেশন দেখেন? উপাদান > শৈলী ফলক এখন আপনাকে একটি সংক্ষিপ্ত বিবরণ দেখায় যখন আপনি একটি সম্পত্তির উপর ঘোরান।

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

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

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

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

CSS নেস্টিং সমর্থন

উপাদান > শৈলী ফলক এখন CSS নেস্টিং সিনট্যাক্সকে স্বীকৃতি দেয় এবং সঠিক উপাদানগুলিতে নেস্টেড শৈলী প্রয়োগ করে।

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

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

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

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

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

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

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

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

আপনার কোডের সবচেয়ে গুরুত্বপূর্ণ অংশগুলিতে ফোকাস করতে সাহায্য করার জন্য, আপনি এখন উৎস > পৃষ্ঠা ফলকের ফাইল ট্রি থেকে উপেক্ষা তালিকায় অপ্রাসঙ্গিক স্ক্রিপ্ট যোগ করতে পারেন।

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

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

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

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

JavaScript প্রোফাইলার অবচয় শুরু হয়েছে৷

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

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

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

আরও জানুন এবং সংশ্লিষ্ট RFC এবং crbug.com/1354548- এ মতামত প্রদান করুন।

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

কম কনট্রাস্ট অনুকরণ করুন

রেন্ডারিং ট্যাবটি এমুলেট দৃষ্টি ঘাটতি তালিকায় একটি নতুন বিকল্প যোগ করে- হ্রাস করা বৈসাদৃশ্য । এই বিকল্পের সাহায্যে, কম কনট্রাস্ট সংবেদনশীলতার সাথে আপনার ওয়েবসাইটটি কীভাবে দেখায় তা আপনি আবিষ্কার করতে পারেন।

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

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

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

বাতিঘর 10

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

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

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

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

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

আপনার নো-অপ পরিষেবা কর্মী আনয়ন হ্যান্ডলার সরানোর জন্য একটি কনসোল সতর্কতা

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

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

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

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

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

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

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

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

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

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

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

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

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