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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

উত্স প্যানেলে লেখক/নিয়োজিত দ্বারা ফাইলগুলিকে গোষ্ঠীভুক্ত করুন৷

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

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

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

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

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

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

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

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

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

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

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

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

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

একটি নমনীয় টেমপ্লেট তৈরি করতে কীভাবে <template> এবং <slot> উপাদানগুলি ব্যবহার করবেন তা শিখুন যা তারপরে একটি ওয়েব উপাদানের ছায়া DOM তৈরি করতে ব্যবহার করা যেতে পারে।

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

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

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

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

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

সিএসএস ভেরিয়েবল স্বয়ংসম্পূর্ণ করার সময় অ-রঙ মান পূর্বরূপ দেখুন

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

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

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

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

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

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

জাভাস্ক্রিপ্ট অবজেক্ট বৈশিষ্ট্যগুলির জন্য স্বয়ংসম্পূর্ণতা এখন এই আদেশের উপর ভিত্তি করে প্রদর্শিত হয়:

1. অগণিত সম্পত্তির মালিক
2. অগণিত সম্পত্তির মালিক
3. উত্তরাধিকার সূত্রে প্রাপ্ত গণনাযোগ্য বৈশিষ্ট্য
4. উত্তরাধিকার সূত্রে প্রাপ্ত অ-গণনাযোগ্য সম্পত্তি

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

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

উৎস মানচিত্র উন্নতি

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

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

ক্রোমিয়াম সমস্যা: 1329113 , 1322115

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

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

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

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

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

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

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

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

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

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