এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

Sofia Emelianova

উপাদান উন্নতি

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

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

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

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

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

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

এলিমেন্টস > শৈলীতে , একটি টুলটিপে এর নির্দিষ্টতা ওজন দেখতে একটি নির্বাচক নামের উপর ঘোরান।

নির্বাচকের নির্দিষ্ট ওজন সহ একটি টুলটিপ।

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

টুলটিপে কাস্টম CSS বৈশিষ্ট্যের মান

এলিমেন্টস > শৈলীতে , একটি টুলটিপে এর মান দেখতে একটি কাস্টম CSS প্রপার্টির নামের উপর হোভার করুন।

কাস্টম CSS প্রপার্টির মান সহ টুলটিপ।

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

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

উত্স উন্নতি

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

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

সিনট্যাক্স হাইলাইটিং।
ইনলাইন সম্পাদক সমর্থন. এই সম্পাদকগুলি উপাদান > শৈলীর অনুরূপ, উদাহরণস্বরূপ, কালার পিকার এবং ইজিং এডিটর ।

উন্নত CSS সিনট্যাক্স হাইলাইটিং এবং সোর্সে ইনলাইন এডিটর সমর্থন।

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

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

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

বাম কলামে লাইন নম্বর এবং ব্রেকপয়েন্ট ডায়ালগ।

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

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

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

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

Chrome এ তৃতীয় পক্ষের কুকি ব্লক করুন । নেভিগেট করুন এবং সক্ষম করুন > সেটিংস > গোপনীয়তা এবং নিরাপত্তা > কুকিজ এবং অন্যান্য সাইট ডেটা > তৃতীয় পক্ষের কুকিজ ব্লক করুন ।
chrome://flags এ, বাউন্স ট্র্যাকিং মিটিগেশন পরীক্ষাটি মুছে ফেলার সাথে সক্ষম করে সেট করুন৷
এই ডেমো পৃষ্ঠাটি পরিদর্শন করুন, Application > Background Services > Bounce Tracking Mitigations খুলুন, পৃষ্ঠায় একটি বাউন্স লিঙ্কে ক্লিক করুন, বাউন্স রেকর্ড করার জন্য Chrome এর জন্য অপেক্ষা করুন (10 সেকেন্ড), এবং রাজ্য অবিলম্বে মুছে ফেলতে ফোর্স রান ক্লিক করুন৷

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

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

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

বাতিঘর 10.2.0

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

এলসিপি ফেজ টেবিল।

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

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

ডিফল্টরূপে বিষয়বস্তু স্ক্রিপ্ট উপেক্ষা করুন

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

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

ডিবাগার এই ধরনের স্ক্রিপ্ট উপেক্ষা করে এবং তাদের দ্বারা নিক্ষিপ্ত ব্যতিক্রমগুলিতে থামে না।
উত্স > কল স্ট্যাক ফলক উপেক্ষা করা ফ্রেমগুলি এড়িয়ে যায়৷ এখানে স্কিপিং বন্ধ করতে, চেক করুন উপেক্ষা-তালিকাভুক্ত ফ্রেমগুলি দেখান ৷
কনসোল স্ট্যাক ট্রেসে উপেক্ষা করা ফ্রেমগুলিকে ভেঙে দেয় । প্রসারিত করতে আরও ফ্রেম দেখান এন ক্লিক করুন এবং আবার ভেঙে পড়ার জন্য কম দেখান ক্লিক করুন৷

ডিফল্টরূপে সক্রিয় এক্সটেনশন দ্বারা ইনজেকশনের বিষয়বস্তু স্ক্রিপ্ট. সেটিংসে গিয়ে এটি খুঁজুন, তারপর উপেক্ষা তালিকা।

উপরন্তু, উপেক্ষা তালিকার চেকবক্সগুলি পরিষ্কার পাঠ্য পেয়েছে।

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

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

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

নেটওয়ার্ক ট্যাবের প্রতিক্রিয়া উইন্ডোতে সুন্দর-মুদ্রণ সক্ষম করা হয়েছে।

উপরন্তু, SVG ফাইল সিনট্যাক্স হাইলাইটিং পায়।

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

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

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

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

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

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

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

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

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

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