DevTools, Chrome 124-এ নতুন কী আছে৷

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

নতুন অটোফিল প্যানেল

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

পরীক্ষার তথ্য সহ এই ডেমো পৃষ্ঠায় নতুন প্যানেলটি চেষ্টা করে দেখুন:

  1. প্রোফাইল অটোফিলে , ফর্ম পূরণ করুন ... বোতামগুলির যেকোনো একটিতে ক্লিক করুন, জমা দিন ক্লিক করুন, তারপর, ঠিকানা সংরক্ষণ করুন? ডায়ালগ উইন্ডোতে, সংরক্ষণ করুন ক্লিক করুন, এবং ফর্ম সহ পৃষ্ঠায় ফিরে যান।
  2. DevTools খুলুন এবং একটি অটোফিল ইভেন্ট ট্রিগার করুন: একটি ফর্ম ক্ষেত্র নির্বাচন করুন এবং ড্রপ-ডাউন তালিকা থেকে ঠিকানাটি নির্বাচন করুন।

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

অটোফিল প্যানেল।

আরও জানতে, ফর্ম এবং অটোফিল শিখুন দেখুন।

WebRTC-এর জন্য উন্নত নেটওয়ার্ক থ্রটলিং

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

নতুন প্যারামিটারগুলি হল: প্যাকেট লস (শতাংশ), প্যাকেট সারির দৈর্ঘ্য (প্যাকেটের সংখ্যা), এবং প্যাকেট পুনর্বিন্যাস পতাকা।

কাস্টম থ্রটলিং প্রোফাইলে নতুন প্যাকেট-সম্পর্কিত বিকল্প যোগ করার আগে এবং পরে।

একটি WebRTC সংযোগ থ্রোটল করতে, > থ্রটলিং- একটি কাস্টম প্রোফাইলে প্যাকেট-সম্পর্কিত প্যারামিটারগুলি নির্দিষ্ট করুন এবং নেটওয়ার্ক প্যানেলে এটি নির্বাচন করুন।

এই ডেমো পৃষ্ঠায় নতুন প্যারামিটারগুলি চেষ্টা করে দেখুন। প্রথমে, পৃষ্ঠাটিকে ক্যামেরা ব্যবহার করার অনুমতি দিন। তারপর, নেটওয়ার্ক প্যানেলে, আপনার কনফিগার করা কাস্টম প্রোফাইলটি নির্বাচন করুন, এবং পৃষ্ঠায় ফিরে, Start এবং Call এ ক্লিক করুন।

ক্রোমিয়াম সমস্যা: 41175925

অ্যানিমেশন প্যানেলে স্ক্রোল-চালিত অ্যানিমেশন সমর্থন

অ্যানিমেশন প্যানেল এখন আপনাকে স্ক্রোল-চালিত অ্যানিমেশনগুলি পরিদর্শন করতে দেয়।

এই ডেমো পৃষ্ঠায় এই বৈশিষ্ট্যটি ব্যবহার করে দেখুন। অ্যানিমেশন প্যানেলটি খুলুন এবং স্ক্রোল-চালিত অ্যানিমেশনগুলি ক্যাপচার করতে পৃষ্ঠাটি পুনরায় লোড করুন।

মাউস আইকন দিয়ে চিহ্নিত স্ক্রোল-চালিত অ্যানিমেশনের একটি গ্রুপ।

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

এলিমেন্টস > স্টাইলে উন্নত CSS নেস্টিং সাপোর্ট

Elements > Styles ট্যাবটি CSS নেস্টিং সাপোর্ট উন্নত করে এবং এখন ইন্ডেন্টেশন এবং ব্রেস সহ নেস্টেড স্টাইল দেখায়। CSS নেস্টিং হল CSS নিয়মগুলিকে একত্রিত করার একটি উপায় এবং জিনিসগুলিকে কম শব্দসমষ্টি এবং আরও কাঠামোগত করে তোলে।

ব্রেসে ইন্ডেন্টেশন যোগ করার আগে এবং পরে নেস্টেড স্টাইলগুলি আবদ্ধ করা।

ক্রোমিয়াম সমস্যা: 40166888

উন্নত কর্মক্ষমতা প্যানেল

এই সংস্করণটি পারফরম্যান্স প্যানেলে বেশ কিছু উন্নতি এনেছে।

ফ্লেম চার্টে ফাংশন এবং তাদের সন্তানদের লুকান

পারফরম্যান্স > মেইন -এ ফ্লেম চার্ট থেকে শব্দ ফিল্টার করার জন্য, আপনি এখন অপ্রাসঙ্গিক ফাংশন এবং তাদের সন্তানদের লুকিয়ে রাখতে পারেন। ফ্লেম চার্টে, একটি ফাংশনে ডান-ক্লিক করুন এবং প্রসঙ্গ মেনু থেকে একটি বিকল্প নির্বাচন করুন।

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

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

নির্বাচিত সূচনাকারীদের থেকে তাদের শুরু করা ইভেন্টগুলিতে তীরচিহ্ন

পূর্বে, যখন আপনি প্রধান ট্র্যাক নির্বাচন এবং ইভেন্ট করতেন, তখন ট্র্যাকটি তার ইনিশিয়েটার থেকে নির্বাচিত ইভেন্টে একটি তীর দেখাত। এখন, ট্র্যাকটি নির্বাচিত ইভেন্ট থেকে শুরু হওয়া ইভেন্টে একটি তীরও দেখায়, যদি থাকে।

নির্বাচিত ইভেন্ট থেকে শুরু হওয়া ইভেন্ট এবং নামযুক্ত লিঙ্কগুলিতে রিভিলের পরিবর্তে তীরচিহ্নগুলি দেখানোর আগে এবং পরে।

উপরন্তু, সকল ইনিশিয়েটরের এখন Summary ট্যাবে Inisiator for ফিল্ড আছে এবং Inisiator for এবং Inisiated by ফিল্ড উভয়েরই Reveal এর পরিবর্তে links নামকরণ করা হয়েছে।

ক্রোমিয়াম সমস্যা: 325604258 , 325024819 , 326055289 .

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

লাইটহাউস প্যানেল এখন লাইটহাউস ১১.৬.০ চালায়। পরিবর্তনগুলির সম্পূর্ণ তালিকা দেখুন।

উল্লেখযোগ্য পরিবর্তনগুলির মধ্যে রয়েছে নতুন অপ্ট-ইন Enable JS স্যাম্পলিং সেটিং। এই সেটিংটি ডিফল্টরূপে নিষ্ক্রিয় করা আছে।

একটি অপ্ট-ইন JS স্যাম্পলিং সেটিং যোগ করার আগে এবং পরে।

JS স্যাম্পলিং সক্ষম করলে পারফরম্যান্স ট্রেসে বিস্তারিত জাভাস্ক্রিপ্ট কল স্ট্যাক যোগ হয় কিন্তু রিপোর্ট তৈরির গতি কমতে পারে।

(বামে) এবং (ডানে) JS স্যাম্পলিং ছাড়া পারফরম্যান্স ট্রেস।

লাইটহাউস রিপোর্ট তৈরি হওয়ার পর ট্রেসটি টুলস মেনু > View Unthrottled Trace এর অধীনে পাওয়া যাবে।

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

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

মেমোরি > হিপ স্ন্যাপশট-এ বিশেষ বিভাগের জন্য টুলটিপস

মেমোরি প্যানেলের হিপ স্ন্যাপশটগুলিতে এমন কিছু বস্তুর বিশেষ গ্রুপ থাকে যা কনস্ট্রাক্টরের উপর ভিত্তি করে তৈরি হয় না। যখন আপনি এই ধরনের বস্তুর উপর কার্সার রাখেন, তখন মেমোরি প্যানেল এখন আপনাকে একটি সংক্ষিপ্ত বিবরণ সহ একটি টুলটিপ এবং ডকুমেন্টেশনে একটি দীর্ঘ বিবরণের লিঙ্ক দেখায়।

বিশেষ বস্তুর গোষ্ঠীর জন্য একটি বর্ণনামূলক টুলটিপ দেখানোর আগে এবং পরে।

ক্রোমিয়াম সমস্যা: 41490331

অ্যাপ্লিকেশন > স্টোরেজ আপডেট

এই সংস্করণটি অ্যাপ্লিকেশন > স্টোরেজ এ কয়েকটি আপডেট নিয়ে এসেছে।

শেয়ার্ড স্টোরেজের জন্য ব্যবহৃত বাইট

অ্যাপ্লিকেশন > স্টোরেজ > শেয়ার্ড স্টোরেজ বিভাগটি এখন আপনাকে একটি অরিজিন দ্বারা ব্যবহৃত বাইটের সংখ্যা দেখায়।

শেয়ার্ড স্টোরেজের জন্য কত বাইট ব্যবহার করা হয়েছে তা দেখানোর আগে এবং পরে।

শেয়ার্ড স্টোরেজ আপনাকে গোপনীয়তা-সংরক্ষণকারী পঠন অ্যাক্সেস সহ সীমাহীন, ক্রস-সাইট স্টোরেজ লেখার অ্যাক্সেস দেয়।

ক্রোমিয়াম সমস্যা: 324464353

ওয়েব SQL সম্পূর্ণরূপে অবচিত

Chrome ১১৯ সংস্করণে ওয়েব SQL অবচয় করেছে এবং এই সংস্করণে অবচয় ট্রায়াল টোকেনটি সরিয়ে দিয়েছে, তাই আপনি আর ওয়েব SQL ব্যবহার করতে পারবেন না।

অনুসরণ করে, DevTools অ্যাপ্লিকেশন প্যানেল থেকে ওয়েব SQL বিভাগটি সরিয়ে দিয়েছে।

ক্রোমিয়াম সমস্যা: 327254049

কভারেজ প্যানেলের উন্নতি

এই সংস্করণটি কভারেজ প্যানেলে কয়েকটি আপডেট নিয়ে এসেছে:

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

শিশুদের পরিসংখ্যানের সাথে মিলে যাওয়ার আগে এবং পরে সঠিকভাবে গণনা করা।

  • দৃশ্যমানতা উন্নত করতে ব্যবহৃত কোডের রঙ এখন সবুজের পরিবর্তে ধূসর, বিশেষ করে সবুজ-বিহীন রঙের দৃষ্টিশক্তির ঘাটতির জন্য।

ব্যবহৃত কোডের রঙ ধূসর করার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: 41494198 , 329253687

লেয়ার প্যানেলটি হয়তো বন্ধ হয়ে যেতে পারে

কম ব্যবহারের কারণে লেয়ার প্যানেলটি শীঘ্রই বন্ধ হয়ে যেতে পারে। প্যানেলটি এখন উপরে একটি সতর্কতামূলক ব্যানার দেখায়।

লেয়ার প্যানেলের উপরে সম্ভাব্য অবচয় ঘোষণাকারী সতর্কতামূলক ব্যানার।

দলটি প্যানেলটি বাতিল করার চূড়ান্ত সিদ্ধান্ত নেওয়ার আগে আপনার মতামত এবং উদ্বেগগুলি নির্দ্বিধায় শেয়ার করুন

জাভাস্ক্রিপ্ট প্রোফাইলার অবচয়: চতুর্থ ধাপ, চূড়ান্ত

এই সংস্করণে, JS প্রোফাইলার প্যানেলটি সম্পূর্ণরূপে বন্ধ করা হয়েছে এবং এটি আর পুনরায় সক্রিয় করা যাবে না।

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

ক্রোমিয়াম সমস্যা: 40262073

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

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

  • নেটওয়ার্ক :
    • মাল্টি-লাইন কুকিজের ভুল পার্সিং সহ একটি বাগ সংশোধন করা হয়েছে ( 325410304 )।
    • ইনিশিয়েটার কলামে ( 327665602 ) স্থির কল স্ট্যাক প্রিভিউ।
  • পারফরম্যান্স মনিটর : ট্র্যাক চেকবক্সগুলি এখন বাকি UI ( 1467464 ) এর মতোই।
  • সূত্র : XHTML ডকুমেন্টের জন্য সিনট্যাক্স হাইলাইটিং যোগ করা হয়েছে ( 327940244 )।
  • সেটিংস > ডিভাইস : পুরাতন গ্যালাক্সি ফোল্ড নতুন গ্যালাক্সি জেড ফোল্ড ৫ ( ৪০১১৩৪৩৯ ) দিয়ে প্রতিস্থাপিত হচ্ছে।
  • পারফরম্যান্স : Ctrl / Cmd + F ( 1523279 ) দিয়ে অনুসন্ধান করার সময় সমস্ত মিলিত অনুসন্ধান ফলাফল এখন হাইলাইট করা হয়।
  • ডেভেলপার রিসোর্স : এখন ভাষা এক্সটেনশনের মাধ্যমে লোড করা রিসোর্সগুলিও দেখায়, যেমন C/C++ DevTools সাপোর্ট (DWARF) Chrome এক্সটেনশন ( 40746829 )।
  • পারফরম্যান্স : সারাংশ ট্যাবে ( 325314708 ) ক্রপ করা কল স্ট্যাক এবং এর খারাপ লেআউট ঠিক করা হয়েছে।
  • ড্রয়ার : বন্ধ বোতামগুলি এখন ফোকাসযোগ্য, তাই কীবোর্ড ব্যবহার করে প্যানেলগুলি বন্ধ করা যেতে পারে।

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

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

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

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

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

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