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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

উপাদান > শৈলীতে উন্নত CSS নেস্টিং সমর্থন

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

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

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

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

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

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

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

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

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

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

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

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

অতিরিক্তভাবে, সমস্ত ইনিশিয়েটরের কাছে এখন সারাংশ ট্যাবে ক্ষেত্রগুলির জন্য ইনিশিয়েটর রয়েছে এবং ক্ষেত্রের জন্য ইনিশিয়েটর এবং সূচনাকারী উভয়ই Reveal-এর পরিবর্তে লিঙ্কগুলিকে নাম দিয়েছে।

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

বাতিঘর 11.6.0

Lighthouse প্যানেল এখন Lighthouse 11.6.0 চালায়। পরিবর্তনের সম্পূর্ণ তালিকা দেখুন।

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

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

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

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

লাইটহাউস রিপোর্ট তৈরি হওয়ার পরে ট্রেসটি টুলস মেনু > আনথ্রটলড ট্রেস দেখুন এর অধীনে উপলব্ধ।

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

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

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

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

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

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

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

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

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

Application > Storage > Shared Storage বিভাগটি এখন আপনাকে একটি উৎপত্তি দ্বারা ব্যবহৃত বাইটের সংখ্যা দেখায়।

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

ভাগ করা সঞ্চয়স্থান আপনাকে সীমাহীন, ক্রস-সাইট সঞ্চয়স্থানে গোপনীয়তা-সংরক্ষিত পঠন অ্যাক্সেস সহ লেখার অ্যাক্সেস দিতে দেয়।

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

ওয়েব SQL সম্পূর্ণরূপে বন্ধ করা হয়েছে

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

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

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

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

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

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

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

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

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

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

লেয়ার প্যানেল অবমূল্যায়িত হতে পারে

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

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

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

JavaScript প্রোফাইলার অবচয়: পর্যায় চার, চূড়ান্ত

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

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

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

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

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

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

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

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

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

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

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

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

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