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

DevTools রিলিজ নোটের প্রথম কিস্তিতে স্বাগতম! এখান থেকে, আপনি যখন প্রথমবার Chrome এর একটি নতুন সংস্করণ খুলবেন, DevTools সেই সংস্করণের জন্য রিলিজ নোটগুলির একটি লিঙ্ক সহ নতুন কী ড্রয়ার খুলবে৷

হাইলাইট

  • টাইমলাইন প্যানেলের নাম পরিবর্তন করে পারফরম্যান্স প্যানেল রাখা হয়েছে।
  • প্রোফাইল প্যানেলের নাম পরিবর্তন করে মেমরি প্যানেল করা হয়েছে।
  • কুকি মান এখন সম্পাদনাযোগ্য.
  • DevTools এখন মেমরির বাইরের ত্রুটির আগে স্বয়ংক্রিয়ভাবে বিরতি দেয়।

নতুন বৈশিষ্ট

সম্পাদনাযোগ্য কুকিজ

সেই মানটি সম্পাদনা করতে কুকিজ ট্যাবের একটি ঘরে ডাবল-ক্লিক করুন।

একটি কুকি সম্পাদনা করা হচ্ছে।
চিত্র 1 . একটি কুকি সম্পাদনা করা হচ্ছে

অবদানের জন্য kdzwinel কে ধন্যবাদ!

স্টাইল প্যানে পরিদর্শনযোগ্য এবং সম্পাদনাযোগ্য CSS ভেরিয়েবল

আপনি এখন শৈলী ফলকে CSS ভেরিয়েবল পরিদর্শন এবং সম্পাদনা করতে পারেন। নিজে চেষ্টা করে দেখতে CSS ভেরিয়েবল ডেমো দেখুন।

মেমরির বাইরের ব্রেকপয়েন্ট

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

মেমরির বাইরে থাকা ব্রেকপয়েন্টে বিরতি দেওয়া হয়েছে৷
চিত্র ২ . মেমরির বাইরে থাকা ব্রেকপয়েন্টে বিরতি দেওয়া হয়েছে৷

ক্যানভাস সৃষ্টিতে ব্রেকপয়েন্ট

আপনি এখন ইভেন্ট লিসেনার ব্রেকপয়েন্ট তৈরি করতে পারেন যেটি ট্রিগার হয় যখনই একটি নতুন ক্যানভাস প্রসঙ্গ তৈরি হয়।

ইভেন্ট লিসেনার ব্রেকপয়েন্ট ফলকে ক্যানভাস প্রসঙ্গ তৈরি করুন চেকবক্সের মাধ্যমে ক্যানভাস তৈরির ব্রেকপয়েন্ট
চিত্র 3ইভেন্ট লিসেনার ব্রেকপয়েন্ট ফলকে ক্যানভাস প্রসঙ্গ তৈরি করুন চেকবক্সের মাধ্যমে ক্যানভাস তৈরির ব্রেকপয়েন্ট

টাইমিং ট্যাবে শুরুর সময়ের পরিসংখ্যান

টাইমিং ট্যাবের শীর্ষে, আপনি এখন দেখতে পাবেন কখন একটি অনুরোধ সারিবদ্ধ হয়েছে এবং শুরু হয়েছে।

টাইমিং ট্যাবে শুরুর সময়ের পরিসংখ্যান।
চিত্র 4 । টাইমিং ট্যাবে শুরুর সময়ের পরিসংখ্যান

টাইমিং ট্যাবে সার্ভারের পরিসংখ্যান

আপনি এখন টাইমিং ট্যাবে কাস্টম সার্ভারের পরিসংখ্যান সন্নিবেশ করতে পারেন। একটি উদাহরণের জন্য সার্ভার টাইমিং মানগুলির ডেমো দেখুন।

টাইমিং ট্যাবে সার্ভারের পরিসংখ্যান
চিত্র 5টাইমিং ট্যাবে সার্ভারের পরিসংখ্যান

অবদানের জন্য sroussey ধন্যবাদ!

পরিবর্তন

টাইমলাইন প্যানেল এখন পারফরম্যান্স প্যানেল

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

প্রোফাইল প্যানেলটি এখন মেমরি প্যানেল

প্রোফাইল প্যানেলের উদ্দেশ্যকে আরও ভালভাবে প্রতিফলিত করার জন্য মেমরি প্যানেলের নামকরণ করা হয়েছে।

CPU প্রোফাইলার একটি লুকানো প্যানেলের পিছনে রয়েছে

এখন যেহেতু প্রোফাইল প্যানেলটিকে মেমরি প্যানেল বলা হয়, সেই প্যানেলে আর সিপিইউ প্রোফাইলার থাকা সত্যিই কোন অর্থে হয় না। অধিকন্তু, দীর্ঘমেয়াদী লক্ষ্য হল পারফরম্যান্স প্যানেল থেকে সমস্ত ব্যবহারকারীদের প্রোফাইলিং করা। ইতিমধ্যে, আপনি এখনও সেটিংস > আরও সরঞ্জাম > JavaScript প্রোফাইলার থেকে পুরানো CPU প্রোফাইলার অ্যাক্সেস করতে পারেন।

Chrome DevTools দেখুন: পারফরম্যান্স প্যানেলে কীভাবে CPU প্রোফাইল করতে হয় তা শিখতে Chrome 58-এ JavaScript CPU প্রোফাইলিং

নতুন কনসোল UI

কনসোল প্যানেল এবং ড্রয়ারে কিছু UI পরিবর্তন হয়েছে। কিছু অজনপ্রিয় বৈশিষ্ট্য আরো লুকানো অবস্থানে সরানো হয়েছে, এবং জনপ্রিয় বৈশিষ্ট্যগুলি এখন আরও সহজে অ্যাক্সেসযোগ্য।

  • কনসোল সেটিংস ক্লিক করুন কনসোল সেটিংস কনসোলের আচরণ কাস্টমাইজ করার জন্য সেটিংস অ্যাক্সেস করতে।
  • সংরক্ষণ লগ এখন কনসোল সেটিংসে লুকানো আছে।
  • ফিল্টার বোতাম এবং ফলক চলে গেছে। পরিবর্তে ড্রপডাউন মেনু ব্যবহার করুন.
  • লগ ফিল্টার করার জন্য টেক্সট বক্স এখন সবসময় দেখানো হয়। এটি আগে ফিল্টার প্যানে লুকানো ছিল।
  • ফিল্টারিং টেক্সট বক্স স্বয়ংক্রিয়ভাবে RegEx গ্রহণ করে, তাই Regex চেকবক্সটি চলে গেছে।
  • লুকান লঙ্ঘন চেকবক্স চলে গেছে। লঙ্ঘন দেখতে Verbose এ লগিং লেভেল ড্রপডাউন সেট করুন।
  • পুরানো UI-তে সমস্ত বার্তা দেখান চেকবক্সটি আনচেক করা নতুন UI-তে কনসোল সেটিংসে শুধুমাত্র নির্বাচিত প্রসঙ্গ চেকবক্স চেক করার সমতুল্য।
নতুন কনসোল UI
চিত্র 6 । নতুন কনসোল UI

WebGL ইভেন্ট লিসেনার ব্রেকপয়েন্ট সরানো হয়েছে

WebGL ইভেন্ট লিসেনার ব্রেকপয়েন্ট WebGL বিভাগ থেকে ক্যানভাস বিভাগে চলে গেছে। WebGL বিভাগটি সরানো হয়েছে।