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

Sofia Emelianova

উপাদানগুলির উন্নতি

নতুন CSS সাবগ্রিড ব্যাজ

এলিমেন্টস প্যানেলটি subgrid এর জন্য একটি নতুন subgrid ব্যাজ পেয়েছে। এই বৈশিষ্ট্যটি বর্তমানে Chrome Canary-তে পরীক্ষামূলকভাবে চালু আছে।

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

এলিমেন্টস প্যানেলে সমস্ত ব্যাজের তালিকার জন্য, ব্যাজ রেফারেন্স দেখুন।

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

টুলটিপসে নির্বাচকের নির্দিষ্টতা

Elements > Styles -এ, একটি টুলটিপে একটি নির্বাচক নামের নির্দিষ্টতা দেখতে তার উপর কার্সার রাখুন।

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

টুলটিপসে কাস্টম CSS প্রোপার্টিজের মান

Elements > Styles -এ, একটি কাস্টম CSS প্রপার্টি নামের উপর কার্সার রাখুন যাতে টুলটিপে এর মান দেখা যায়।

এই উন্নতি সাধনের জন্য DevTools টিম一丝 এবং Suyan-এর প্রতি কৃতজ্ঞতা প্রকাশ করতে চায়।

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

উৎসের উন্নতি

CSS সিনট্যাক্স হাইলাইটিং

সোর্স প্যানেলটি SASS, SCSS, এবং LESS এর মতো প্রি-প্রসেসড CSS ফাইলগুলির জন্য নিম্নলিখিতগুলি পায়:

• সিনট্যাক্স হাইলাইটিং।
• ইনলাইন এডিটর সাপোর্ট। এই এডিটরগুলি Elements > Styles এর মতো, উদাহরণস্বরূপ, Color Picker এবং Easing Editor ।

ক্রোমিয়াম সমস্যা: 1302261 , 1392085 ।

শর্তসাপেক্ষ ব্রেকপয়েন্ট সেট করার শর্টকাট

এখন আপনি একটি শর্টকাট ব্যবহার করে কন্ডিশনাল ব্রেকপয়েন্ট দ্রুত সেট করতে পারেন। ব্রেকপয়েন্ট ডায়ালগ খুলতে, Command (MacOS) অথবা Control (Windows / Linux) ধরে রাখুন এবং Sources > Editor এর বাম কলামে লাইন নম্বরে ক্লিক করুন।

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

অ্যাপ্লিকেশন > বাউন্স ট্র্যাকিং প্রশমন

Chrome-এ বাউন্স ট্র্যাকিং মিটিগেশন পরীক্ষা আপনাকে বাউন্স ট্র্যাকিং কৌশল ব্যবহার করে ক্রস-সাইট ট্র্যাকিং সম্পাদন করে এমন সাইটগুলির অবস্থা সনাক্ত করতে এবং মুছে ফেলতে দেয়। অ্যাপ্লিকেশন > ব্যাকগ্রাউন্ড সার্ভিসেস পেনে একটি নতুন বাউন্স ট্র্যাকিং মিটিগেশন ট্যাব রয়েছে যা আপনাকে ম্যানুয়ালি জোর করে ট্র্যাকিং মিটিগেশন করতে দেয় এবং যে সাইটগুলির অবস্থা মুছে ফেলা হয়েছে সেগুলি তালিকাভুক্ত করে।

এই নিরাপত্তা বৈশিষ্ট্যটি দেখুন:

1. Chrome-এ তৃতীয় পক্ষের কুকিজ ব্লক করুন । নেভিগেট করুন এবং সক্ষম করুন > সেটিংস > গোপনীয়তা এবং নিরাপত্তা > কুকিজ এবং অন্যান্য সাইট ডেটা > তৃতীয় পক্ষের কুকিজ ব্লক করুন ।
2. chrome://flags এ, Bounce Tracking Mitigations experiment কে Enabled With Deletion এ সেট করুন।
3. এই ডেমো পৃষ্ঠাটি পরিদর্শন করুন, অ্যাপ্লিকেশন > ব্যাকগ্রাউন্ড সার্ভিসেস > বাউন্স ট্র্যাকিং মিটিগেশন খুলুন, পৃষ্ঠার একটি বাউন্স লিঙ্কে ক্লিক করুন, Chrome বাউন্স রেকর্ড করার জন্য (১০ সেকেন্ড) অপেক্ষা করুন এবং অবিলম্বে অবস্থাটি মুছে ফেলার জন্য Force run এ ক্লিক করুন।

অতিরিক্তভাবে, সমস্যা ট্যাব আপনাকে আসন্ন অবস্থা মুছে ফেলার বিষয়ে সতর্ক করে।

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

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

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

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

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

ডিফল্টভাবে কন্টেন্ট স্ক্রিপ্ট উপেক্ষা করুন

দ্য সেটিংস > উপেক্ষা তালিকা > এক্সটেনশন দ্বারা ইনজেক্ট করা কন্টেন্ট স্ক্রিপ্ট এখন ডিফল্টরূপে সক্রিয় করা হয়েছে।

এই সেটিংটি সক্ষম করলে:

• ডিবাগার এই ধরনের স্ক্রিপ্ট উপেক্ষা করে এবং তাদের দ্বারা নিক্ষিপ্ত ব্যতিক্রমগুলিতেই থেমে থাকে না।
• সোর্স > কল স্ট্যাক প্যানটি উপেক্ষা করা ফ্রেমগুলিকে এড়িয়ে যায়। এখানে স্কিপিং বন্ধ করতে, চেক করুন উপেক্ষা-তালিকাভুক্ত ফ্রেমগুলি দেখান ।
• কনসোল স্ট্যাক ট্রেসে উপেক্ষা করা ফ্রেমগুলিকে ভেঙে ফেলে । প্রসারিত করতে Show N more frames এ ক্লিক করুন এবং আবার collapse করতে Show less এ ক্লিক করুন।

অতিরিক্তভাবে, উপেক্ষা তালিকার চেকবক্সগুলি আরও স্পষ্ট লেখা পেয়েছে।

ক্রোমিয়াম সমস্যা: 1440958 , 1364501 ।

নেটওয়ার্ক > ডিফল্টরূপে রেসপন্স প্রিটি-প্রিন্টিং

নেটওয়ার্ক > রেসপন্স প্যান এখন ডিফল্টরূপে মিনিফাই করা রেসপন্স বডিগুলিকে প্রিটি-প্রিন্ট করে, সোর্স প্যানেলের মতো।

অতিরিক্তভাবে, SVG ফাইলগুলিতে সিনট্যাক্স হাইলাইটিং করা হয়।

ক্রোমিয়াম সমস্যা: 1382752 , 1385374 ।

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

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

• সেটিংস > ডিভাইস : এজেন্ট স্ট্রিং-এর তালিকায় Pixel 6-এ Android v407-এর জন্য Facebook যোগ করা হয়েছে।
• নেটওয়ার্ক : ক্লিয়ার নেটওয়ার্ক লগ শর্টকাট ( 1444991 ) যোগ করা হয়েছে:
  • MacOS: কমান্ড + K
  • উইন্ডোজ/লিনাক্স: কন্ট্রোল + এল
• রেকর্ডার > রেকর্ডিং N > পারফরম্যান্স ইনসাইট প্যানেল ড্রপ-ডাউন বিকল্প ( 1414773 ) সরানো হয়েছে।
• লোড হতে ব্যর্থ স্টাইলশিটগুলি এখন ন্যাভিগেটর ট্রি ( 1386059 ) থেকে লুকানো আছে।
• কর্মক্ষমতা : প্রসারণযোগ্য ইন্টারঅ্যাকশন ট্র্যাকের ( 1432510 ) ভুল প্রদর্শন ঠিক করা হয়েছে।
• এলিমেন্টস : যেসব স্টাইলশিট লোড হতে ব্যর্থ হয়েছে সেগুলো এখন তরঙ্গায়িত রেখা ( 1440626 ) দিয়ে আন্ডারস্কোর করা হয়েছে।
• সংশ্লিষ্ট ভাষার জন্য কোনও প্লাগইন না থাকলে ডিবাগার স্বয়ংক্রিয়ভাবে WebAssembly-তে প্রবেশ করে না ( 1443342 )।
• যে শর্টকাটটি কার্সারকে একবারে একটি শব্দ সরাতে সাহায্য করে তা Sources > Editor ( 1241848 ) এ CSS ফাইলের জন্য পুনরুদ্ধার করা হয়:
  • MacOS: Alt + তীর
  • উইন্ডোজ/লিনাক্স: Ctrl + তীর

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

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

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

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

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

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

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