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

Jecelyn Yeen

ডিবাগিংয়ের সময় ফ্রেম পুনরায় চালু করুন

রিস্টার্ট ফ্রেম বৈশিষ্ট্যটি ফিরে এসেছে! কোনও ফাংশনের কোথাও পজ করা থাকলে আপনি পূর্ববর্তী কোডটি পুনরায় চালাতে পারেন। পূর্বে, স্থিতিশীলতার সমস্যার কারণে Chrome 92-এ এই বৈশিষ্ট্যটি অবচিত এবং সরানো হয়েছিল।

এই উদাহরণে , ডিবাগারটি প্রথমে toggleColorScheme ফাংশনের শেষের কাছাকাছি ব্রেকপয়েন্টে (লাইন 343) থামানো হয়েছিল। toggleColorScheme ফাংশনের শুরু থেকে ডিবাগিং পুনরায় চালু করতে, Debugger প্যানে Call stack বিভাগটি প্রসারিত করুন, toggleColorScheme এ ডান ক্লিক করুন এবং Restart frame নির্বাচন করুন।

ক্রোমিয়াম সমস্যা: ১৩০৩৫২১

রেকর্ডার প্যানেলে ধীর গতিতে রিপ্লে করার বিকল্পগুলি

আপনি এখন ব্যবহারকারীর প্রবাহকে আরও ধীর গতিতে রিপ্লে করতে পারবেন — ধীর, খুব ধীর এবং অত্যন্ত ধীর। এই বিকল্পগুলি আপনাকে স্ক্রিনে প্রতিটি ধাপের রিপ্লে আরও ভালভাবে পর্যবেক্ষণ করতে দেয়।

রেকর্ডার প্যানেলটি খুলুন এবং একটি নতুন রেকর্ডিং শুরু করুন । রেকর্ডিং সম্পন্ন হলে, রিপ্লে ড্রপ-ডাউন বোতামে ক্লিক করুন। রিপ্লে শুরু করতে একটি গতি নির্বাচন করুন।

ক্রোমিয়াম সমস্যা: ১৩০৬৭৫৬

রেকর্ডার প্যানেলের জন্য একটি এক্সটেনশন তৈরি করুন

আপনার পছন্দের ফর্ম্যাটে রিপ্লে স্ক্রিপ্ট রপ্তানি করতে আপনি এখন একটি Chrome এক্সটেনশন তৈরি বা ইনস্টল করতে পারেন। কীভাবে একটি তৈরি করবেন তা জানতে রেকর্ডার এক্সটেনশন API ডকুমেন্টেশন দেখুন।

একটি ডেমো এক্সটেনশন ইনস্টল করতে, ডকুমেন্টেশনে বর্ণিত এই পদক্ষেপগুলি অনুসরণ করুন।

ক্রোমিয়াম সমস্যা: ১৩২৫৭৫১

সোর্স প্যানেলে লেখক/প্রয়োগকৃত অনুসারে ফাইলগুলিকে গ্রুপ করুন

সোর্স প্যানেলে আপনার ফাইলগুলি সংগঠিত করার জন্য নতুন গ্রুপ ফাইলস বাই অথরড / ডিপ্লয়ড বিকল্পটি সক্ষম করুন। ফ্রেমওয়ার্ক (উদাহরণস্বরূপ, রিঅ্যাক্ট, অ্যাঙ্গুলার) দিয়ে ওয়েব অ্যাপ্লিকেশন তৈরি করার সময়, বিল্ড টুলগুলি (উদাহরণস্বরূপ, ওয়েবপ্যাক, ভাইট) দ্বারা তৈরি মিনিফাই করা ফাইলগুলির কারণে সোর্স ফাইলগুলি নেভিগেট করা কঠিন হতে পারে।

এই চেকবক্সের সাহায্যে, আপনি দ্রুত ফাইল অনুসন্ধানের জন্য ফাইলগুলিকে 2টি বিভাগে ভাগ করতে পারেন:

• Authored । আপনার IDE তে দেখা সোর্স ফাইলের মতোই। DevTools সোর্স ম্যাপের (আপনার বিল্ড টুল দ্বারা সরবরাহিত) উপর ভিত্তি করে এই ফাইলগুলি তৈরি করে।
• স্থাপন করা হয়েছে । ব্রাউজার যে প্রকৃত ফাইলগুলি পড়ে। সাধারণত এই ফাইলগুলি ছোট করা হয়।

এই React ডেমো দিয়ে নিজেই চেষ্টা করে দেখুন!

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

পারফরম্যান্স ইনসাইট প্যানেলে নতুন ব্যবহারকারীর সময় ট্র্যাক

পারফরম্যান্স ইনসাইট প্যানেলে নতুন ইউজার টাইমিং ট্র্যাক ব্যবহার করে আপনার রেকর্ডিংয়ে performance.measure() চিহ্নগুলি ভিজ্যুয়ালাইজ করুন।

উদাহরণস্বরূপ, এই ওয়েব পৃষ্ঠাটি টেক্সট লোড হওয়ার অতিবাহিত সময় গণনা করার জন্য performance.measure() পদ্ধতি ব্যবহার করে।

যখন আপনি পৃষ্ঠার লোড পরিমাপ শুরু করেন, তখন রেকর্ডিংয়ে ব্যবহারকারীর সময় ট্র্যাকটি প্রদর্শিত হয়। পাশের ফলকে এর বিশদ দেখতে সময় আইটেমটিতে ক্লিক করুন।

ক্রোমিয়াম সমস্যা: ১৩২২৮০৮

একটি এলিমেন্টের নির্ধারিত স্লট প্রকাশ করুন

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

এই উদাহরণে কয়েকটি নামযুক্ত স্লট সহ কার্ড রয়েছে। একটি কার্ডের person-occupation স্লটটি পরীক্ষা করুন, তার নির্ধারিত স্লটটি দেখতে তার পাশের slot ব্যাজে ক্লিক করুন।

<template> এবং <slot> এলিমেন্ট ব্যবহার করে একটি নমনীয় টেমপ্লেট তৈরি করতে শিখুন যা পরে একটি ওয়েব কম্পোনেন্টের শ্যাডো DOM পূরণ করতে ব্যবহার করা যেতে পারে।

ক্রোমিয়াম সমস্যা: ১০১৮৯০৬

পারফরম্যান্স রেকর্ডিংয়ের জন্য হার্ডওয়্যার কনকারেন্সি সিমুলেট করুন

পারফরম্যান্স প্যানেলে নতুন হার্ডওয়্যার কনকারেন্সি সেটিং ডেভেলপারদের navigator.hardwareConcurrency দ্বারা রিপোর্ট করা মান কনফিগার করার অনুমতি দেয়।

কিছু অ্যাপ্লিকেশন তাদের অ্যাপ্লিকেশনের সমান্তরালতার মাত্রা নিয়ন্ত্রণ করতে navigator.hardwareConcurrency ব্যবহার করে, উদাহরণস্বরূপ, Emscripten pthread পুলের আকার নিয়ন্ত্রণ করতে। এই বৈশিষ্ট্যের সাহায্যে, ডেভেলপাররা বিভিন্ন কোর কাউন্ট দিয়ে তাদের অ্যাপ্লিকেশনের কর্মক্ষমতা পরীক্ষা করতে পারে।

ক্রোমিয়াম সমস্যা: ১২৯৭৪৩৯

CSS ভেরিয়েবলগুলি স্বয়ংক্রিয়ভাবে পূরণ করার সময় রঙহীন মানের পূর্বরূপ দেখুন

CSS ভেরিয়েবলগুলি স্বয়ংক্রিয়ভাবে পূরণ করার সময়, DevTools এখন নন-কালার ভেরিয়েবলটিকে একটি অর্থপূর্ণ মান দিয়ে পূর্ণ করে যাতে আপনি নোডে মানটি কী ধরণের পরিবর্তন আনবে তা পূর্বরূপ দেখতে পারেন।

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

ব্যাক/ফরোয়ার্ড ক্যাশে প্যানে ব্লকিং ফ্রেমগুলি সনাক্ত করুন

অ্যাপ্লিকেশন প্যানেলের ব্যাক/ফরোয়ার্ড ক্যাশে প্যানে নতুন ফ্রেম বিভাগ রয়েছে যা আপনাকে ব্লকিং ফ্রেমগুলি সনাক্ত করতে সাহায্য করবে যা পৃষ্ঠাটিকে bfcache এর জন্য যোগ্য হতে বাধা দিচ্ছে।

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

জাভাস্ক্রিপ্ট অবজেক্টের জন্য উন্নত স্বয়ংসম্পূর্ণ পরামর্শ।

জাভাস্ক্রিপ্ট অবজেক্ট প্রোপার্টিজের অটোকমপ্লিশন এখন এই ক্রমের উপর ভিত্তি করে প্রদর্শিত হবে:

1. নিজস্ব অগণনীয় বৈশিষ্ট্য
2. নিজস্ব অগণনীয় বৈশিষ্ট্য
3. উত্তরাধিকারসূত্রে প্রাপ্ত অগণিত বৈশিষ্ট্য
4. উত্তরাধিকারসূত্রে প্রাপ্ত অগণিত বৈশিষ্ট্য

পূর্বে, ডেভেলপারদের জন্য প্রাসঙ্গিক সম্পত্তি খুঁজে পাওয়া কঠিন ছিল কারণ পরামর্শটি উত্তরাধিকারসূত্রে প্রাপ্ত সম্পত্তির চেয়ে কেবল নিজস্ব সম্পত্তিকে অগ্রাধিকার দিত এবং সমস্ত উত্তরাধিকারসূত্রে প্রাপ্ত সম্পত্তিকে সমান অগ্রাধিকার দেওয়া হত।

ক্রোমিয়াম সমস্যা: ১২৯৯২৪১

সোর্স ম্যাপের উন্নতি

সামগ্রিক ডিবাগিং অভিজ্ঞতা উন্নত করার জন্য সোর্স ম্যাপের কিছু সংশোধন এখানে দেওয়া হল:

• ব্রেকপয়েন্ট এখন ইনলাইন <script> এ sourceURL টীকা সহ কাজ করে।
• ডিবাগার এখন সোর্স ম্যাপের সাহায্যে স্কোপ ভিউতে ব্লক স্কোপড ভেরিয়েবলগুলি সমাধান করে।
• ডিবাগার এখন সোর্স ম্যাপের সাহায্যে স্কোপ ভিউতে তীর ফাংশনের ভেরিয়েবলগুলি সমাধান করে।

ক্রোমিয়াম সমস্যা: ১৩২৯১১৩ , ১৩২২১১৫

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

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

• সোর্স প্যানেলের জন্য অটো-কমপ্লিশন সেটিং ঠিক করা হয়েছে। পূর্বে, অটো-কমপ্লিশন সর্বদা অন ইভেন সেটিংটি অক্ষম করা ছিল। ( 1323286 )
• সর্বশেষ রঙিন স্কিম ফর্ম্যাটটি বিশ্লেষণ করার জন্য অ্যাপ্লিকেশন প্যানেলে ম্যানিফেস্ট ট্যাবটি আপডেট করা হয়েছে। ( 1318305 )
• পারফরম্যান্স ইনসাইট প্যানেলে <script async> রেন্ডারিং ব্লকিং সমস্যার জন্য পরামর্শগুলি উন্নত করা হয়েছে। পূর্বে, DevTools add async attribute to the script tag পরামর্শ দিয়েছিল যদিও স্ক্রিপ্টটি ইতিমধ্যেই async হিসাবে চিহ্নিত। ( 1334096 )
• পারফরম্যান্স ইনসাইট প্যানেল এখন লেআউট পরিবর্তনের সম্ভাব্য কারণ হিসেবে আইফ্রেম সনাক্ত করে। আপনি ডিটেইলস প্যানে আইফ্রেমের বিবরণ দেখতে পারেন। ( 1328873 )
• কমান্ড মেনুতে ফাইল খোলার সময়, লেখক ফাইলগুলি (সোর্স ম্যাপ দ্বারা তৈরি ফাইলগুলি) এখন উচ্চতর স্থান পায় তাই সেগুলি একই নামের ডিপ্লয় করা স্ক্রিপ্টগুলির উপরে প্রদর্শিত হয়। ( 1312929 )

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

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

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

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

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

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

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