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

জেসেলিন ইয়েন

পূর্বরূপ বৈশিষ্ট্য: সম্পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি

নতুন পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি আপনার জন্য পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রির একটি ওভারভিউ পেতে এবং আপনার ওয়েব সামগ্রী কীভাবে সহায়ক প্রযুক্তির সংস্পর্শে আসে তা আরও ভালভাবে বুঝতে সাহায্য করে।

এলিমেন্টস প্যানেলে, অ্যাক্সেসিবিলিটি প্যান খুলুন এবং পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি সক্ষম করুন চেকবক্স নির্বাচন করুন। তারপরে, DevTools পুনরায় লোড করুন এবং আপনি উপাদান প্যানেলে একটি নতুন অ্যাক্সেসিবিলিটি বোতাম দেখতে পাবেন।

আপনি ফুল-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি ভিউতে টগল করতে এটিতে ক্লিক করতে পারেন। আপনি নোডগুলি প্রসারিত করতে পারেন বা অ্যাক্সেসিবিলিটি প্যানে বিস্তারিত দেখতে ক্লিক করতে পারেন।

একটি নোড নির্বাচন করুন এবং DOM ট্রি ভিউতে ফিরে যান। সংশ্লিষ্ট DOM নোড এখন নির্বাচন করা হয়েছে। এটি DOM নোড এবং এর অ্যাক্সেসিবিলিটি ট্রি নোডের মধ্যে ম্যাপিং বোঝার একটি দুর্দান্ত উপায়। এটি DOM গাছের জন্য কাজ করে ⬌ অ্যাক্সেসিবিলিটি ট্রি ভিউও!

পূর্বে, অ্যাক্সেসিবিলিটি ট্রি অ্যাক্সেসিবিলিটি প্যানে উপলব্ধ ছিল। দৃশ্যটি সীমিত, এটি আপনাকে শুধুমাত্র একটি একক নোড এবং এর পূর্বপুরুষদের অন্বেষণ করতে সক্ষম করে।

আমাদের দল এখনও সক্রিয়ভাবে এই প্রিভিউ বৈশিষ্ট্যে কাজ করছে। আমরা আরও উন্নতির জন্য আপনার প্রতিক্রিয়া খুঁজছি!

সম্পূর্ণ-পৃষ্ঠা অ্যাক্সেসযোগ্যতা গাছ

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

পরিবর্তন ট্যাবে আরও সুনির্দিষ্ট পরিবর্তন

পরিবর্তন ট্যাবে কোড পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে বেশ মুদ্রিত হয়।

পূর্বে, মিনিফাইড সোর্স কোডের প্রকৃত পরিবর্তনগুলি ট্রেস করা কঠিন ছিল কারণ সমস্ত কোড এক লাইনে দেখানো হয়েছে।

ট্যাব পরিবর্তন করে

ক্রোমিয়াম সমস্যা: 1238818 , 1268754 , 1086491

ব্যবহারকারী প্রবাহ রেকর্ডিংয়ের জন্য দীর্ঘ সময়সীমা সেট করুন

আপনি এখন সমস্ত পদক্ষেপ বা একটি নির্দিষ্ট পদক্ষেপের জন্য রেকর্ডারে টাইমআউট সেটিংস সামঞ্জস্য করতে পারেন৷ এটি বিশেষত ধীর নেটওয়ার্ক অনুরোধ এবং দীর্ঘ অ্যানিমেশন সহ পৃষ্ঠাগুলির জন্য দরকারী৷

উদাহরণস্বরূপ, আমি এই ডেমো পৃষ্ঠায় একটি ব্যবহারকারীর প্রবাহ রেকর্ড করেছি লোড করতে এবং মেনু আইটেমটিতে ক্লিক করতে। যাইহোক, মেনু আইটেমগুলির লোডিং ধীর (এটি 6 সেকেন্ড সময় নেয়)। এই ব্যবহারকারী প্রবাহের রিপ্লে ব্যর্থ হয়েছে কারণ এটি 5 সেকেন্ড অতিক্রম করেছে (ডিফল্ট সময়সীমা)।

এটি ঠিক করতে আমরা নতুন টাইমআউট সেটিংস ব্যবহার করতে পারি। ধাপটি প্রসারিত করুন যা আমরা মেনু আইটেমে ক্লিক করি। টাইমআউট যোগ করে ধাপটি সম্পাদনা করুন এবং এটিকে 6000 মিলিসেকেন্ডে সেট করুন (6s এর সমান)।

ঐচ্ছিকভাবে, আপনি সমস্ত ধাপের জন্য রিপ্লে সেটিংসে টাইমআউট সামঞ্জস্য করতে পারেন। রিপ্লে সেটিংস প্রসারিত করুন এবং টাইমআউট মান সম্পাদনা করুন।

ব্যবহারকারী প্রবাহ রেকর্ডিং জন্য সময়সীমা সেটিংস

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

ব্যাক/ফরওয়ার্ড ক্যাশে ট্যাব দিয়ে আপনার পৃষ্ঠাগুলি ক্যাশেযোগ্য কিনা তা নিশ্চিত করুন

ব্যাক/ফরোয়ার্ড ক্যাশে (বা bfcache) হল একটি ব্রাউজার অপ্টিমাইজেশান যা তাত্ক্ষণিক ব্যাক এবং ফরওয়ার্ড নেভিগেশন সক্ষম করে।

নতুন ব্যাক/ফরোয়ার্ড ক্যাশে ট্যাব আপনাকে আপনার পৃষ্ঠাগুলিকে পরীক্ষা করতে সাহায্য করতে পারে যাতে সেগুলি bfcache-এর জন্য অপ্টিমাইজ করা হয়েছে এবং যে কোনও সমস্যা চিহ্নিত করতে পারে যা তাদের যোগ্য হতে বাধা দিচ্ছে৷

একটি নির্দিষ্ট পৃষ্ঠা পরীক্ষা করতে, Chrome এ এটিতে নেভিগেট করুন এবং তারপরে DevTools-এ অ্যাপ্লিকেশন > ব্যাক-ফরওয়ার্ড ক্যাশে যান। এরপরে, টেস্ট ব্যাক/ফরওয়ার্ড ক্যাশে বোতামে ক্লিক করুন এবং DevTools পৃষ্ঠাটি bfcache থেকে পুনরুদ্ধার করা যেতে পারে কিনা তা নির্ধারণ করতে দূরে এবং পিছনে নেভিগেট করার চেষ্টা করবে।

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

ব্যাক/ফরওয়ার্ড ক্যাশে ট্যাব

Chromium সমস্যা: 1110752

নতুন বৈশিষ্ট্য ফলক ফিল্টার

আপনি যদি বৈশিষ্ট্য ফলকে একটি নির্দিষ্ট সম্পত্তিতে ফোকাস করতে চান, আপনি এখন নতুন ফিল্টার পাঠ্যবক্সে সেই সম্পত্তির নাম বা মান টাইপ করতে পারেন।

ডিফল্টরূপে, যে বৈশিষ্ট্যগুলির মান null বা undefined তা দেখানো হয় না। সমস্ত বৈশিষ্ট্য দেখতে সমস্ত দেখান চেকবক্স সক্রিয় করুন।

এই বর্ধনগুলি আপনাকে আপনার যত্নের বৈশিষ্ট্যগুলি দ্রুত পেতে এবং এইভাবে আপনার উত্পাদনশীলতা উন্নত করতে দেয়!

বৈশিষ্ট্য ফলক ফিল্টার

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

CSS ফোর্সড-কালার মিডিয়া ফিচার অনুকরণ করুন

বাধ্যতামূলক-রঙের CSS মিডিয়া বৈশিষ্ট্যটি সনাক্ত করতে ব্যবহৃত হয় যে ব্যবহারকারী এজেন্ট একটি জোরপূর্বক রঙ মোড সক্ষম করেছে (যেমন উইন্ডোজ হাই কনট্রাস্ট মোড) যেখানে এটি পৃষ্ঠায় ব্যবহারকারী-নির্বাচিত সীমিত রঙের প্যালেট প্রয়োগ করে।

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

CSS ফোর্সড-কালার মিডিয়া ফিচার

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

হোভার কমান্ডে শাসক দেখান

আপনি এখন কমান্ড মেনু খুলতে পারেন এবং হোভার কমান্ডে শো রুলার চালাতে পারেন। পৃষ্ঠার শাসক একটি উপাদানের প্রস্থ এবং উচ্চতা পরিমাপ করা সহজ করে তোলে।

পূর্বে, আপনি শুধুমাত্র সেটিংস > রুলার দেখান চেকবক্সের মাধ্যমে পৃষ্ঠা শাসক সক্ষম করতে পারেন।

হোভার কমান্ডে শাসক দেখান

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

ফ্লেক্সবক্স সম্পাদকে row-reverse এবং column-reverse সমর্থন করুন

ফ্লেক্সবক্স সম্পাদক দুটি নতুন বোতাম যোগ করেছে যাতে row-reverse এবং column-reverse flex-direction সমর্থন করে।

ফ্লেক্সবক্স সম্পাদক

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

নতুন কীবোর্ড শর্টকাট XHR রিপ্লে করতে এবং সমস্ত সার্চ ফলাফল প্রসারিত করতে

নেটওয়ার্ক প্যানেলে XHR রিপ্লে করার জন্য কীবোর্ড শর্টকাট

নেটওয়ার্ক প্যানেলে একটি XHR অনুরোধ নির্বাচন করুন এবং XHR পুনরায় চালাতে কীবোর্ডে R টিপুন। পূর্বে, আপনি শুধুমাত্র প্রসঙ্গ মেনুর মাধ্যমে এক্সএইচআর রিপ্লে করতে পারেন (রাইট ক্লিক > রিপ্লে এক্সএইচআর )

XHR রিপ্লে করুন

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

সমস্ত অনুসন্ধান ফলাফল প্রসারিত করতে কীবোর্ড শর্টকাট

অনুসন্ধান ট্যাবে একটি নতুন শর্টকাট যোগ করা হয়েছে যা আপনাকে সমস্ত অনুসন্ধান ফলাফল প্রসারিত এবং সঙ্কুচিত করতে দেয়৷ পূর্বে, আপনি একবারে একটি ফাইলে ক্লিক করে অনুসন্ধান ফলাফলগুলিকে প্রসারিত এবং সঙ্কুচিত করতে পারতেন।

Esc > 3-ডট মেনু > অনুসন্ধানের মাধ্যমে অনুসন্ধান ট্যাবটি খুলুন। একটি অনুসন্ধান স্ট্রিং লিখুন (যেমন ফাংশন) এবং অনুসন্ধান ফলাফলের তালিকা দেখতে এন্টার টিপুন। অনুসন্ধান ফলাফলগুলিতে ফোকাস করুন এবং অনুসন্ধান ফাইলগুলি প্রসারিত/সংকোচন করতে নিম্নলিখিত শর্টকাট ব্যবহার করুন:

  • উইন্ডোজ / লিনাক্স - Ctrl + Shift + { বা }
  • MacOS - Cmd + Options + { or }

Chrome DevTools-এ কীবোর্ড শর্টকাটগুলির রেফারেন্সের জন্য কীবোর্ড শর্টকাটগুলিতে যান৷

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

বাতিঘর প্যানেলে বাতিঘর 9

Lighthouse প্যানেল এখন Lighthouse 9 চালাচ্ছে। Lighthouse এখন একই আইডি শেয়ার করা সমস্ত উপাদানের তালিকা করবে।

নন-ইউনিক এলিমেন্ট আইডি একটি সাধারণ অ্যাক্সেসিবিলিটি সমস্যা। উদাহরণস্বরূপ, একটি aria-labelledby বৈশিষ্ট্যে উল্লেখ করা আইডি একাধিক উপাদানে ব্যবহৃত হয়।

আপডেটের আরো বিস্তারিত জানার জন্য Lighthouse 9.0-এ নতুন কী আছে তা দেখুন।

আমি 'সমস্ত ফোকাসযোগ্য উপাদানের একটি অনন্য `আইডি` থাকতে হবে'র জন্য একটি বাতিঘর অডিট, একই `আইডি` সহ দুটি উপাদান দেখায়

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

উন্নত সোর্স প্যানেল

CodeMirror 6 ব্যবহার করার জন্য আমরা এটিকে আপগ্রেড করার কারণে উত্স প্যানেলে স্থিতিশীলতার অনেক উন্নতি হয়েছে৷ এখানে কয়েকটি উল্লেখযোগ্য উন্নতি রয়েছে:

  • বড় ফাইল খোলার সময় উল্লেখযোগ্যভাবে দ্রুত (যেমন WASM, JavaScript)
  • কোডের মধ্য দিয়ে যাওয়ার সময় আর কোন র্যান্ডম স্ক্রোলিং নেই
  • সম্পাদনাযোগ্য উত্সগুলির জন্য উন্নত স্বয়ংক্রিয়-সম্পূর্ণ পরামর্শ (যেমন স্নিপেট, স্থানীয় ওভাররাইড)

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

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

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

  • নেটওয়ার্ক অনুরোধের জলপ্রপাত ডায়াগ্রাম সঠিকভাবে প্রদর্শন করা হচ্ছে। পূর্বে, শৈলী ভাঙ্গা ছিল. ( 1275501 )
  • উত্স প্যানেলে খুব দীর্ঘ লাইন সহ নথিতে অনুসন্ধান করার সময় কোড হাইলাইটটি ভেঙে গেছে৷ এটা এখন ঠিক করা হয়েছে। ( 1275496 )
  • নেটওয়ার্ক অনুরোধে আর কোনো ডুপ্লিকেট পেলোড ট্যাব নেই৷ ( 1273972 )
  • পারফরম্যান্স প্যানেলের সারাংশ বিভাগে অনুপস্থিত বিন্যাস স্থানান্তরের বিবরণ সংশোধন করা হয়েছে। ( 1259606 )
  • নেটওয়ার্ক অনুসন্ধান ক্যোয়ারীতে নির্বিচারে অক্ষর (যেমন , , . ) সমর্থন করুন। ( 1267196 )

[পরীক্ষামূলক] রিপোর্টিং এপিআই প্যানে এন্ডপয়েন্ট

আপনার পৃষ্ঠায় উত্পন্ন রিপোর্ট এবং তাদের স্থিতি নিরীক্ষণ করতে সাহায্য করার জন্য Chrome 96- এ পরীক্ষামূলক রিপোর্টিং API ফলকটি চালু করা হয়েছিল৷

এন্ডপয়েন্ট বিভাগটি এখন উপলব্ধ। এটি আপনাকে Reporting-Endpoints হেডারে কনফিগার করা সমস্ত শেষ পয়েন্টগুলির একটি ওভারভিউ দেয়৷

নিরাপত্তা লঙ্ঘন, অবহেলিত API কল এবং আরও অনেক কিছু নিরীক্ষণ করতে রিপোর্টিং API ব্যবহার করতে শিখুন।

রিপোর্টিং API ফলক

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

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

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

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

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

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

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

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