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

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

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

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

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

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

একটি CSS সম্পত্তির ডকুমেন্টেশন সহ টুলটিপ।

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

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

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

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

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

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

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

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

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

কনসোল এখন ব্রেকপয়েন্ট দ্বারা ট্রিগার করা বার্তাগুলি কীভাবে প্রদর্শন করে তার পরিবর্তন: আইকন এবং সঠিক উত্স লিঙ্ক সহ।

কনসোল এখন আপনাকে 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 এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
  • আরও বিকল্প ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুনআরও > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন
  • @ChromeDevTools- এ টুইট করুন।
  • আমাদের DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

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

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