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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

উত্স উন্নতি

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

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

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

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

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

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

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

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

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

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

1. Chrome এ তৃতীয় পক্ষের কুকি ব্লক করুন । নেভিগেট করুন এবং সক্ষম করুন > সেটিংস > গোপনীয়তা এবং নিরাপত্তা > কুকিজ এবং অন্যান্য সাইট ডেটা > তৃতীয় পক্ষের কুকিজ ব্লক করুন ।
2. chrome://flags এ, বাউন্স ট্র্যাকিং মিটিগেশন পরীক্ষাটি মুছে ফেলার সাথে সক্ষম করে সেট করুন৷
3. এই ডেমো পৃষ্ঠাটি পরিদর্শন করুন, 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 ফাইল সিনট্যাক্স হাইলাইটিং পায়।

ক্রোমিয়াম সমস্যা: 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 ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

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

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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

উপাদানসমূহ > শৈলীতে , একটি সরঞ্জামটিপে এর মান দেখতে একটি কাস্টম সিএসএস সম্পত্তি নামের উপরে ঘুরে বেড়ায়।

ডিভটুলস দল এই উন্নতি অবতরণের জন্য一丝 এবং সুয়ানের প্রতি কৃতজ্ঞতা প্রকাশ করতে চাইবে।

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

উত্স উন্নতি

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

উত্স প্যানেল প্রিপ্রোসেসড সিএসএস ফাইলগুলির জন্য নিম্নলিখিতগুলি পেয়েছে যেমন সাস, এসসিএসএস এবং কম:

• সিনট্যাক্স হাইলাইটিং।
• ইনলাইন সম্পাদকদের সমর্থন। এই সম্পাদকগণ উপাদানগুলির > শৈলীর মতো একই রকম, উদাহরণস্বরূপ, রঙ বাছাইকারী এবং ইজিং সম্পাদক ।

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

শর্তসাপেক্ষ ব্রেকপয়েন্টগুলি সেট করতে শর্টকাট

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

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

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

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

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

1. ক্রোমে তৃতীয় পক্ষের কুকিজ ব্লক করুন । নেভিগেট করুন এবং সক্ষম করুন > সেটিংস > গোপনীয়তা এবং সুরক্ষা > কুকিজ এবং অন্যান্য সাইটের ডেটা > তৃতীয় পক্ষের কুকিজ ব্লক করুন ।
2. chrome://flags , মুছে ফেলার সাথে সক্ষম করতে বাউন্স ট্র্যাকিং প্রশমিতকরণ পরীক্ষাটি সেট করুন।
3. এই ডেমো পৃষ্ঠাটি পরিদর্শন করুন, অ্যাপ্লিকেশন > ব্যাকগ্রাউন্ড পরিষেবাদি > বাউন্স ট্র্যাকিং প্রশমিতকরণগুলি খুলুন, পৃষ্ঠায় একটি বাউন্স লিঙ্কটি ক্লিক করুন, বাউন্স রেকর্ড করার জন্য ক্রোমের জন্য অপেক্ষা করুন (10 সেকেন্ড) অপেক্ষা করুন এবং অবিলম্বে রাজ্যটি মুছতে ফোর্স চালান ক্লিক করুন।

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

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

বাতিঘর 10.2.0

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

ডিভটুলগুলিতে বাতিঘর প্যানেল ব্যবহারের মূল বিষয়গুলি শিখতে, বাতিঘর দেখুন: ওয়েবসাইটের গতি অনুকূল করুন ।

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

ডিফল্টরূপে সামগ্রী স্ক্রিপ্টগুলি উপেক্ষা করুন

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

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

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

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

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

নেটওয়ার্ক> প্রতিক্রিয়া ডিফল্টরূপে সুন্দর-মুদ্রণ

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

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

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

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

এগুলি এই রিলিজের কিছু লক্ষণীয় সমাধান এবং উন্নতি:

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

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

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

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করা

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

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

ডিভটুলসে নতুন কি

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।