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

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

WebAssembly ডিবাগিং সমর্থন

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

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

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

একটি Wasm অ্যাপ্লিকেশন ডিবাগারে বিরাম দেওয়া হয়েছে৷

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

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

Wasm অ্যাপে ধাপে ধাপে চলার আচরণ উন্নত

ধাপ উপরে. আপনার মূল কোডে ধাপে ধাপে এখন বিচ্ছিন্ন করা ( .wasm ফাইল) এ বিরতি দেওয়া এড়িয়ে যায়। পূর্বে, এটি সেখানে বিরতি দেবে।

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

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

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

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

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

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

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

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

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

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

রেকর্ডারে দাবী

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

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

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

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

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

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

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

বাতিঘর 10.1.1

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

সত্তা দ্বারা গোষ্ঠীবদ্ধ অডিট।

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

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

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

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

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

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

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

profile() কমান্ড পারফরম্যান্স > প্রধানকে পপুলেট করে

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

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

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

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

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

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

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

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

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

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

  • ওয়েব ভাইটালস ট্র্যাক. পরিবর্তে, হোভারে টাইমিংস ট্র্যাকে প্রাসঙ্গিক সময়গুলি দেখুন৷
  • লং টাস্ক সাবট্র্যাক। আপনি ইতিমধ্যেই লাল ত্রিভুজ এবং লাল রঙের ছায়াযুক্ত প্রধান ট্র্যাকে এই জাতীয় কাজগুলি খুঁজে পেতে পারেন।

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

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

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

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

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

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

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

সেটিংসে JavaScript প্রোফাইলার চেকবক্স তারপর পরীক্ষা।

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

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

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

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

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

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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