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

সোফিয়া এমেলিয়ানোভা
Sofia Emelianova
GitHub
জেসলিন ইয়েন

ওয়েবঅ্যাসেম্বলি ডিবাগিং সাপোর্ট

DevTools সক্ষম করে সেটিংস. সেটিংস > পরীক্ষা > চেকবক্স। WebAssembly ডিবাগিং: ডিফল্টরূপে DWARF সাপোর্ট সক্ষম করুন । আরও তথ্যের জন্য, আধুনিক সরঞ্জাম ব্যবহার করে WebAssembly ডিবাগিং দেখুন।

এই পরীক্ষাটি আপনাকে Wasm অ্যাপে C এবং C++ কোড এক্সিকিউশন থামাতে এবং ডিবাগ করতে দেয়, আপনার কাছে উপলব্ধ সমস্ত ডিবাগিং তথ্য সহ:

  • আপনার মূল সোর্স কোড, DWARF ডিবাগিং তথ্য ব্যবহার করে ম্যাপ করা হয়েছে।
  • কল স্ট্যাকে বোধগম্য ফাংশনের নাম।
  • ব্রেকপয়েন্ট সাপোর্ট, এবং আরও অনেক কিছু।

ডিবাগারে একটি Wasm অ্যাপ্লিকেশন পজ করা হয়েছে।

Wasm ডিবাগিং পরীক্ষা করার জন্য, C/C++ DevTools Support (DWARF) এক্সটেনশনটি ইনস্টল করুন এবং Mandelbrot ডেমোতে কোডটি ধাপে ধাপে পরীক্ষা করুন।

ক্রোমিয়াম সমস্যা: 1414289 ।

Wasm অ্যাপে উন্নত স্টেপিং আচরণ

এগিয়ে যাও। .wasm মূল কোডে ধাপ

যাইহোক, স্টেপিং শেষ হয় যখন এটি যে ফাংশন থেকে শুরু হয়েছিল তার বাইরে অবতরণ করে, উদাহরণস্বরূপ, ফাংশন থেকে ফিরে আসার পরে।

এই আচরণটি ডিফল্টরূপে সক্রিয় থাকে সেটিংস. সেটিংস > পছন্দ > উৎস ।

নতুন সেটিংটি পছন্দসমূহে পাওয়া গেছে, তারপর উৎসসমূহে।

ক্রোমিয়াম সমস্যা: 1418938 ।

এলিমেন্টস প্যানেল এবং সমস্যা ট্যাব ব্যবহার করে অটোফিল ডিবাগ করুন

Chrome অটোফিল আপনার ঠিকানা বা পেমেন্টের তথ্যের মতো সংরক্ষিত তথ্য দিয়ে স্বয়ংক্রিয়ভাবে ফর্মগুলি পূরণ করে। অটোফিল-সম্পর্কিত সমস্যাগুলি সহজেই ডিবাগ করার জন্য, এলিমেন্টস প্যানেল এখন লাল কোঁকড়ানো আন্ডারলাইন দিয়ে সেগুলি হাইলাইট করতে পারে।

এই বৈশিষ্ট্যটি পরীক্ষা করতে, সক্ষম করুন সেটিংস. সেটিংস > পরীক্ষা > চেকবক্স। এলিমেন্টস প্যানেল DOM ট্রিতে একটি লঙ্ঘনকারী নোড বা অ্যাট্রিবিউট হাইলাইট করে এবং এই ডেমো পৃষ্ঠাটি পরিদর্শন করে।

এলিমেন্টস প্যানেলে অটোফিল সমস্যাগুলি হাইলাইট করা হয়েছে এবং সমস্যা প্যানেল দ্বারা রিপোর্ট করা হয়েছে।

DOM ট্রিতে হাইলাইট করা সমস্যার উপর কার্সার রাখুন এবং সমস্যা দেখুন ট্যাব খুলতে সমস্যা দেখুন ক্লিক করুন যা সমস্ত সনাক্ত করা সমস্যা তালিকাভুক্ত করে এবং কী ভুল হয়েছে তার সূত্র প্রদান করে।

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

রেকর্ডারে দৃষ্টান্ত

রেকর্ডার প্যানেল এখন আপনাকে রেকর্ডিংয়ের সময়ই অ্যাসারশন যোগ করতে দেয়, এবং আপনার কাছে সমস্ত রানটাইম ডেটা উপলব্ধ থাকে।

একটি অ্যাসারশন যোগ করতে, একটি নতুন রেকর্ডিং শুরু করুন, আপনার পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করুন এবং অ্যাড অ্যাসারশন ক্লিক করুন। রেকর্ডারটি waitForElement টাইপ সহ একটি ধাপ সন্নিবেশ করায় যা আপনি তাৎক্ষণিকভাবে কাস্টমাইজ করতে পারেন। কফি কার্ট ডেমোতে অ্যাসারশনগুলি কার্যকর দেখতে ভিডিওটি দেখুন।

এই ভিডিওটি আপনাকে দেখায় কিভাবে দাবি করতে হয়:

  • HTML বৈশিষ্ট্য, উদাহরণস্বরূপ, একটি উপাদানের class ।
  • JSON-এ জাভাস্ক্রিপ্ট বৈশিষ্ট্য, উদাহরণস্বরূপ, .innerText ।

আপনি জাভাস্ক্রিপ্টে শর্তসাপেক্ষ বিবৃতি, নোডের শিশুদের সংখ্যা ( count ), উপাদান দৃশ্যমানতা এবং আরও অনেক কিছু নিশ্চিত করার জন্য পদক্ষেপগুলিও কনফিগার করতে পারেন। আরও তথ্যের জন্য, পদক্ষেপগুলি কনফিগার করুন দেখুন।

অতিরিক্তভাবে, রেকর্ডার এখন পাশের কোড ভিউ এবং ডান-ক্লিক স্টেপ মেনুতে আপনার পছন্দের স্ক্রিপ্ট ফর্ম্যাটটি মনে রাখে।

ক্রোমিয়াম সমস্যা: 1423624 ।

বাতিঘর ১০.১.১

লাইটহাউস প্যানেল এখন লাইটহাউস ১০.১.১ চালায়, ১০.১.০ তে একটি উল্লেখযোগ্য পরিবর্তন আনা হয়েছে। URL গুলির সাথে সম্পর্কিত সমস্ত অডিট এখন সত্তা অনুসারে গোষ্ঠীভুক্ত করা হয় এবং আকার বা সময়কালের মতো সংখ্যাসূচক পরিসংখ্যান একত্রিত করে। জনপ্রিয় তৃতীয় পক্ষগুলিকেও তাদের বিভাগের সাথে ট্যাগ করা হয় যাতে পৃষ্ঠায় তাদের উদ্দেশ্য সনাক্ত করা সহজ হয়।

সত্তা অনুসারে গোষ্ঠীবদ্ধ নিরীক্ষা।

DevTools-এ Lighthouse প্যানেল ব্যবহারের মূল বিষয়গুলি জানতে, Lighthouse: ওয়েবসাইটের গতি অপ্টিমাইজ করুন দেখুন।

ক্রোমিয়াম সমস্যা: 772558 ।

কর্মক্ষমতা বৃদ্ধি

performance.mark() পারফরম্যান্স > টাইমিং-এ হোভারের সময় দেখায়

Performance.mark() পদ্ধতিটি এখন Performance > Timings এ সংশ্লিষ্ট চিহ্নের উপর কার্সার রাখলে তার সময় দেখায়। এখানে সময় পূর্ববর্তী নেভিগেশন ইভেন্টের সাথে সম্পর্কিত একটি টাইমস্ট্যাম্প।

টাইমিং বিভাগে হোভার অন টাইমিং সহ পপ-আপ।

ক্রোমিয়াম সমস্যা: 1426762 ।

profile() কমান্ডটি Performance > Main পূরণ করে

কনসোলে থাকা profile() এবং profileEnd() কমান্ডগুলি এখন পারফরম্যান্স প্যানেলের মূল থ্রেডে CPU প্রোফাইলিং শুরু করে এবং বন্ধ করে।

কনসোল() কমান্ড পারফরম্যান্স প্যানেলে একটি প্রোফাইল তৈরি করে।

ক্রোমিয়াম সমস্যা: 1429191 ।

ধীর ব্যবহারকারীর মিথস্ক্রিয়ার জন্য সতর্কতা

২০০ মিলিসেকেন্ডের বেশি ব্যবহারকারীর ইন্টারঅ্যাকশনের ক্ষেত্রে পারফরম্যান্স > সারাংশ ট্যাবে ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) সতর্কতা পাওয়া যায়।

আইএনপি সতর্কীকরণ।

অতিরিক্তভাবে, ইন্টারঅ্যাকশনের আইডি টুলটিপ থেকে Summary এ সরানো হয়েছে।

ক্রোমিয়াম সমস্যা: 1432512 , 1432509 ।

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

পারফর্মেন্স প্যানেল নিম্নলিখিত ট্র্যাকগুলি সরিয়ে দিয়েছে:

ওয়েব ভাইটালস এবং লং টাস্ক ট্র্যাক উভয়েই অন্য কোথাও নকল তথ্য ছিল। ক্লিক করলে আরও বিস্তারিত তথ্য প্রদানকারী সম্পূর্ণ বৈশিষ্ট্যযুক্ত বিকল্পগুলির তুলনায় এগুলি ইন্টারেক্টিভ ছিল না।

ওয়েব ভাইটালসকে টাইমিং ট্র্যাকে সরানোর আগে এবং পরে।

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

ওয়েব ভাইটালস সম্পর্কে আরও জানুন।

জাভাস্ক্রিপ্ট প্রোফাইলার অবচয়: তৃতীয় ধাপ

Chrome 58 এর প্রথম দিকে, DevTools টিম অবশেষে JavaScript প্রোফাইলারকে অবমূল্যায়ন করার পরিকল্পনা করেছিল এবং Node.js এবং Deno ডেভেলপারদের JavaScript CPU কর্মক্ষমতা প্রোফাইল করার জন্য পারফরম্যান্স প্যানেল ব্যবহার করতে বাধ্য করেছিল।

DevTools সংস্করণ ১১৪ চার-পর্যায়ের JavaScript Profiler অবচয়নের তৃতীয় পর্যায় শুরু করে। এই পর্যায়ে, DevTools থেকে JavaScript Profiler প্যানেলটি সরানো হয় তবে আপনি এখনও এটি সাময়িকভাবে সক্ষম করতে পারেন সেটিংস. সেটিংস > পরীক্ষা এবং এটি থেকে খুলুন তিন-বিন্দু মেনু। তিন-বিন্দু মেনু।

সেটিংসে জাভাস্ক্রিপ্ট প্রোফাইলার চেকবক্সটি ক্লিক করুন এবং তারপর পরীক্ষা-নিরীক্ষা করুন।

CPU কর্মক্ষমতা প্রোফাইল করতে, কর্মক্ষমতা প্যানেল ব্যবহার করুন।

ক্রোমিয়াম সমস্যা: 1428026 ।

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

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

  • কালার পিকার এখন ক্লিপ করার সময় ( 1429271 ) HWB মানগুলি সনাক্ত করে যা স্বচ্ছতার বাইরে থাকে।
  • সোর্স প্যানেল:
    • সোর্স ম্যাপের জন্য JSON সিনট্যাক্স হাইলাইটিং সক্ষম করা হয়েছে ( 1385374 )।
    • যখন আপনি ম্যানুয়ালি সোর্স ম্যাপ ( 1423718 ) অক্ষম করেন তখন "সোর্স ম্যাপ সনাক্ত করা হয়েছে" বার্তাগুলি দেখানো বন্ধ হয়ে যায়।
  • কনসোল এখন আপনাকে Ctrl + Enter দিয়ে অসম্পূর্ণ জাভাস্ক্রিপ্ট এক্সপ্রেশন মূল্যায়ন করতে দেয় এবং সিনট্যাক্স ত্রুটি ( 1314700 ) আউটপুট করে।
  • ব্রেকপয়েন্ট এডিটিং ডায়ালগে এখন একটি ক্লোজ বোতাম রয়েছে। আগে, আপনাকে এন্টার টিপতে হত অথবা ডায়ালগটি আনফোকাস করতে হত ( 1412980 )।

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

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

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

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

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

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