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

Kayce Basques

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

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

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

ক্রোম 78-এ কনসোলের একটি স্ক্রিনশট দেখায় যে লেট পুনঃ ঘোষণা ব্যর্থ হয়েছে৷

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

Chrome 80-এ কনসোলের একটি স্ক্রিনশট দেখায় যে লেট পুনঃ ঘোষণা সফল হয়েছে৷

Chromium সমস্যা #1004193

উন্নত WebAssembly ডিবাগিং

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

নতুন DWARF-চালিত WebAssembly ডিবাগিংয়ের একটি স্ক্রিনশট।

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

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

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

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

নেটওয়ার্ক প্যানেলে নেটওয়ার্ক অ্যাক্টিভিটি লগ করার পর, একটি রিসোর্সে ক্লিক করুন এবং তারপরে রিকোয়েস্ট ইনিশিয়েটর চেইন দেখতে ইনিশিয়েটর ট্যাবে যান:

  • পরিদর্শন সম্পদ সাহসী. উপরের স্ক্রিনশটে, 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 এর জন্য নেটওয়ার্ক অনুরোধের কারণ হয়েছিল।

Chromium সমস্যা #842488

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

আপনি একটি নেটওয়ার্ক সংস্থানটি পরিদর্শন করার জন্য ক্লিক করার পরে, নেটওয়ার্ক প্যানেল এখন ওভারভিউ- এ সেই সংস্থানের চারপাশে একটি নীল সীমানা রাখে। এটি আপনাকে সনাক্ত করতে সাহায্য করতে পারে যে নেটওয়ার্ক অনুরোধটি প্রত্যাশার চেয়ে আগে বা পরে ঘটছে।

ওভারভিউ ফলকের একটি স্ক্রিনশট যা পরিদর্শন করা সংস্থানকে হাইলাইট করে।

Chromium সমস্যা #988253

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

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

নেটওয়ার্ক প্যানেলে নতুন পাথ এবং URL কলামগুলির একটি স্ক্রিনশট৷

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

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

আপডেট করা ব্যবহারকারী-এজেন্ট স্ট্রিং

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

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

নেটওয়ার্ক শর্ত ট্যাবে ব্যবহারকারী এজেন্ট মেনুর একটি স্ক্রিনশট।

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

Chromium সমস্যা #1029031

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

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

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

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

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

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

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

কভারেজ মোড ড্রপডাউন মেনু।

কভারেজ এখন একটি পৃষ্ঠা পুনরায় লোড দ্বারা শুরু করা আবশ্যক

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

Chromium সমস্যা #1004203

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

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

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

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

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

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

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