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

Kayce Basques

কনসোলে let এবং class পুনঃঘোষণার জন্য সমর্থন

কনসোল এখন let এবং class স্টেটমেন্টের পুনঃঘোষণা সমর্থন করে। নতুন জাভাস্ক্রিপ্ট কোড নিয়ে পরীক্ষা-নিরীক্ষা করার জন্য কনসোল ব্যবহার করা ওয়েব ডেভেলপারদের জন্য পুনঃঘোষণা করতে না পারা একটি সাধারণ বিরক্তিকর বিষয় ছিল।

উদাহরণস্বরূপ, পূর্বে, let দিয়ে একটি স্থানীয় ভেরিয়েবল পুনরায় ঘোষণা করার সময়, কনসোল একটি ত্রুটি নিক্ষেপ করত:

এখন, কনসোল পুনঃঘোষণার অনুমতি দেয়:

ক্রোমিয়াম সমস্যা #১০০৪১৯৩

উন্নত ওয়েবঅ্যাসেম্বলি ডিবাগিং

DevTools DWARF ডিবাগিং স্ট্যান্ডার্ড সমর্থন করতে শুরু করেছে, যার অর্থ DevTools-এর মধ্যে আপনার উৎস ভাষাগুলিতে কোড ওভারস্টেপিং, ব্রেকপয়েন্ট সেট করা এবং স্ট্যাক ট্রেস সমাধানের জন্য বর্ধিত সমর্থন। সম্পূর্ণ বিবরণের জন্য Chrome DevTools-এ উন্নত WebAssembly ডিবাগিং দেখুন।

নেটওয়ার্ক প্যানেল আপডেট

ইনিশিয়েটার ট্যাবে ইনিশিয়েটার চেইনের অনুরোধ করুন

এখন আপনি একটি নেটওয়ার্ক অনুরোধের ইনিশিয়েটর এবং নির্ভরতাগুলিকে একটি নেস্টেড তালিকা হিসাবে দেখতে পারেন। এটি আপনাকে বুঝতে সাহায্য করতে পারে কেন একটি রিসোর্স অনুরোধ করা হয়েছিল, অথবা একটি নির্দিষ্ট রিসোর্স (যেমন একটি স্ক্রিপ্ট) কোন নেটওয়ার্ক কার্যকলাপ সৃষ্টি করেছিল।

নেটওয়ার্ক প্যানেলে নেটওয়ার্ক কার্যকলাপ লগ করার পরে, একটি রিসোর্সে ক্লিক করুন এবং তারপর Initiator ট্যাবে যান এবং এর Request Initiator Chain দেখুন:

• পরীক্ষিত রিসোর্সটি বোল্ড। উপরের স্ক্রিনশটে, https://web.dev/default-627898b5.js হল পরীক্ষিত রিসোর্স।
• পরীক্ষিত রিসোর্সের উপরে থাকা রিসোর্সগুলি হল ইনিশিয়েটর । উপরের স্ক্রিনশটে, https://web.dev/bootstrap.js হল https://web.dev/default-627898b5.js এর ইনিশিয়েটর। অন্য কথায়, https://web.dev/bootstrap.js ফলে https://web.dev/default-627898b5.js এর জন্য নেটওয়ার্ক অনুরোধ তৈরি হয়েছে।
• পরীক্ষিত রিসোর্সের নীচের রিসোর্সগুলি হল নির্ভরতা । উপরের স্ক্রিনশটে, https://web.dev/chunk-f34f99f7.js হল https://web.dev/default-627898b5.js এর একটি নির্ভরতা। অন্য কথায়, https://web.dev/default-627898b5.js কারণে https://web.dev/chunk-f34f99f7.js এর জন্য নেটওয়ার্ক অনুরোধ তৈরি হয়েছে।

ক্রোমিয়াম সমস্যা #842488

ওভারভিউতে নির্বাচিত নেটওয়ার্ক অনুরোধটি হাইলাইট করুন।

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

ক্রোমিয়াম সমস্যা #৯৮৮২৫৩

নেটওয়ার্ক প্যানেলে URL এবং পাথ কলাম

প্রতিটি নেটওয়ার্ক রিসোর্সের পরম পথ বা সম্পূর্ণ URL দেখতে নেটওয়ার্ক প্যানেলে নতুন পথ এবং URL কলামগুলি ব্যবহার করুন।

নতুন কলামগুলি দেখানোর জন্য ওয়াটারফল টেবিল হেডারে ডান-ক্লিক করুন এবং পাথ বা URL নির্বাচন করুন।

ক্রোমিয়াম সমস্যা #৯৯৩৩৬৬

আপডেট করা ইউজার-এজেন্ট স্ট্রিং

DevTools নেটওয়ার্ক কন্ডিশন ট্যাবের মাধ্যমে একটি কাস্টম ইউজার-এজেন্ট স্ট্রিং সেট করা সমর্থন করে। ইউজার-এজেন্ট স্ট্রিং নেটওয়ার্ক রিসোর্সের সাথে সংযুক্ত User-Agent HTTP হেডার এবং navigator.userAgent এর মানকেও প্রভাবিত করে।

পূর্বনির্ধারিত ইউজার-এজেন্ট স্ট্রিংগুলি আধুনিক ব্রাউজার সংস্করণগুলি প্রতিফলিত করার জন্য আপডেট করা হয়েছে।

নেটওয়ার্ক কন্ডিশন অ্যাক্সেস করতে, কমান্ড মেনু খুলুন এবং Show Network Conditions কমান্ডটি চালান।

ক্রোমিয়াম সমস্যা #১০২৯০৩১

অডিট প্যানেল আপডেট

নতুন কনফিগারেশন UI

কনফিগারেশন UI-তে একটি নতুন, প্রতিক্রিয়াশীল নকশা রয়েছে এবং থ্রটলিং কনফিগারেশন বিকল্পগুলি সরলীকৃত করা হয়েছে। থ্রটলিং UI পরিবর্তন সম্পর্কে আরও তথ্যের জন্য অডিট প্যানেল থ্রটলিং দেখুন।

কভারেজ ট্যাব আপডেট

প্রতি-ফাংশন বা প্রতি-ব্লক কভারেজ মোড

কভারেজ ট্যাবে একটি নতুন ড্রপডাউন মেনু রয়েছে যা আপনাকে নির্দিষ্ট করতে দেয় যে কোড কভারেজ ডেটা প্রতিটি ফাংশন বা প্রতিটি ব্লকের জন্য সংগ্রহ করা উচিত কিনা। প্রতি ব্লক কভারেজ আরও বিস্তারিত কিন্তু সংগ্রহ করা অনেক বেশি ব্যয়বহুল। DevTools এখন ডিফল্টরূপে প্রতিটি ফাংশন কভারেজ ব্যবহার করে।

এখন পৃষ্ঠা পুনরায় লোডের মাধ্যমে কভারেজ শুরু করতে হবে।

পৃষ্ঠা পুনঃলোড ছাড়াই কোড কভারেজ টগল করার সুবিধাটি সরিয়ে ফেলা হয়েছে কারণ কভারেজ ডেটা অবিশ্বস্ত ছিল। উদাহরণস্বরূপ, একটি ফাংশন অব্যবহৃত হিসাবে রিপোর্ট করা যেতে পারে যদি এটির কার্যকরকরণ অনেক আগে করা হয়ে থাকে এবং V8 এর আবর্জনা সংগ্রাহক এটি পরিষ্কার করে ফেলে।

ক্রোমিয়াম সমস্যা #১০০৪২০৩

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

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

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

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

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

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

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