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

জেসলিন ইয়েন

স্টাইলস প্যান ব্যবহার করে HD রঙ ডিবাগ করা হচ্ছে

ওয়েবে নতুন CSS রঙের ধরণ এবং স্পেস আসছে! ডেভেলপারদের হাই ডেফিনিশন রঙ তৈরি, রূপান্তর এবং ডিবাগ করতে সাহায্য করার জন্য DevTools নতুন টুল চালু করেছে তাও সমানভাবে উত্তেজনাপূর্ণ।

স্টাইলস প্যান এখন CSS কালার লেভেল ৪ স্পেসিফিকেশনে বর্ণিত ১২টি নতুন কালার স্পেস এবং ৭টি নতুন গ্যামুট সমর্থন করে। ওয়েবে উপলব্ধ কালার অপশন সম্পর্কে বিস্তারিত জানার জন্য হাই ডেফিনিশন CSS কালার গাইড দেখুন।

এখানে color() , lch() , oklab() এবং color-mix() সহ CSS রঙের সংজ্ঞার উদাহরণ দেওয়া হল। CSS রঙের সংজ্ঞার উদাহরণ।

color-mix() ফাংশন ব্যবহার করার সময়, আপনি কম্পিউটেড প্যানে চূড়ান্ত রঙের আউটপুট দেখতে পারেন। কম্পিউটেড প্যানে রঙ-মিশ্রণের ফলাফল।

কালার পিকারটি আরও বৈশিষ্ট্য সহ সমস্ত নতুন রঙের স্থান সমর্থন করে। উদাহরণস্বরূপ, color(display-p3 1 0 1) এর কালার সোয়াচ এ ক্লিক করুন। আপনার নির্বাচিত রঙের গামুট সম্পর্কে আরও স্পষ্ট ধারণার জন্য sRGB এবং display-p3 গামুটের মধ্যে পার্থক্য করার জন্য একটি গামুট সীমানা রেখাও যোগ করা হয়েছে। একটি বিস্তৃত সীমানা রেখা।

DevTools বিভিন্ন রঙের ফরম্যাটের মধ্যে রঙ রূপান্তর সমর্থন করে। রূপান্তর পপআপ অ্যাক্সেস করতে Change Color Format আইকনটি ব্যবহার করুন, অথবা Styles প্যানে একটি রঙের সোয়াচে Shift + ক্লিক করুন। রঙের বিন্যাসের মধ্যে রঙ রূপান্তর করা।

রূপান্তর করার সময়, স্থানের সাথে মানানসই রূপান্তরটি ক্লিপ করা হয়েছে কিনা তা জানা গুরুত্বপূর্ণ। DevTools রূপান্তরিত রঙের পাশে একটি সতর্কতা আইকন রাখে যা আপনাকে এই ক্লিপিং সম্পর্কে সতর্ক করে। রঙিন ক্লিপিংয়ের সতর্কতা।

এছাড়াও, নতুন শর্টকাট ব্যবহার করে আপনি আপনার স্ক্রিন থেকে রঙ নির্বাচন করতে পারেন। আই ড্রপার সক্রিয় করতে 'c' টিপুন এবং এটি নিষ্ক্রিয় করতে Escape টিপুন। আইড্রপার টুলটি শুধুমাত্র sRGB রঙের জায়গায় রঙের নমুনা নেয়। উদাহরণস্বরূপ, যদি আপনি রঙের নমুনা নেওয়ার চেষ্টা করেন color(display-p3 1 0 1) , যা sRGB রঙের জায়গার বাইরে, eyedropper টুলটি sRGB স্পেসের নিকটতম রঙে রঙটি ক্লিপ করবে, যা হল magenta color(display-p3 0.92 0.2 0.97) ।

চোখের ড্রপারটি চালু করুন।

অবশেষে, নতুন HD রঙের বিন্যাসের জন্য জায়গা তৈরি করার জন্য রঙ বিন্যাস সেটিংটি এখন অবচিত করা হয়েছে। রঙের ফর্ম্যাট সেটিং বন্ধ করা হচ্ছে।

ক্রোমিয়াম সমস্যা: 1073895 , 1395782 , 1408777 , 1395782 , 1392717 , 1382409 , 1392054

উন্নত ব্রেকপয়েন্ট UX

পুনঃডিজাইন করা ব্রেকপয়েন্টস প্যান আপনাকে সাধারণভাবে ব্যবহৃত বৈশিষ্ট্যগুলিতে দ্রুত অ্যাক্সেস পেতে দেয়, বিশেষ করে, ব্রেকপয়েন্টগুলি নিষ্ক্রিয় করা, সম্পাদনা করা এবং অপসারণ করা।

এখানে কিছু হাইলাইট দেওয়া হল: - উভয় পজ এক্সেপশন অপশন ব্রেকপয়েন্টস প্যানে সরানো হয়েছে এবং আরও স্ব-ব্যাখ্যামূলক করার জন্য টেক্সট দিয়ে লেবেল করা হয়েছে। ব্যতিক্রম বিকল্পগুলি বিরতি দিন।

  • ব্রেকপয়েন্টগুলি ফাইল অনুসারে গোষ্ঠীভুক্ত করা হয়, লাইন বা কলাম সংখ্যা অনুসারে সাজানো হয় এবং সংকোচনযোগ্য। ফাইল অনুসারে ব্রেকপয়েন্টগুলিকে গ্রুপ করুন।

  • ব্রেকপয়েন্ট বা ফাইলের উপর ঘোরানোর সময় ব্রেকপয়েন্ট নিষ্ক্রিয়, অপসারণ এবং সম্পাদনা করার জন্য নতুন বিকল্প রয়েছে। ব্রেকপয়েন্ট নিষ্ক্রিয় করার জন্য নতুন বিকল্প।

  • ব্রেকপয়েন্ট এডিটর খুলতে ব্রেকপয়েন্ট সম্পাদনা বোতামে ক্লিক করুন। এখান থেকে, আপনি ব্রেকপয়েন্ট শর্ত প্রবেশ করতে পারেন অথবা লগপয়েন্টে স্যুইচ করতে পারেন। ব্রেকপয়েন্ট সম্পাদনা ডায়ালগ।

DevTools দিয়ে কীভাবে ডিবাগ করবেন তা জানতে জাভাস্ক্রিপ্ট ডিবাগিং রেফারেন্স দেখুন।

ক্রোমিয়াম সমস্যা: 1407586 , 1402891 , 1402893

কাস্টমাইজযোগ্য রেকর্ডার শর্টকাট

ব্যবহারকারীর প্রবাহ দ্রুত রেকর্ড এবং পুনরায় চালানোর জন্য কীবোর্ড শর্টকাট ব্যবহার করুন।

ব্যবহারকারীর প্রবাহ দ্রুত রেকর্ডিং এবং পুনরায় চালানোর জন্য রেকর্ডার কয়েকটি সুবিধাজনক কীবোর্ড শর্টকাট প্রবর্তন করে।

শর্টকাটগুলো মনে নেই? সমস্যা নেই, যেকোনো সময় সব শর্টকাট দেখতে ? বোতামে ক্লিক করুন। রেকর্ডার শর্টকাট।

আপনি সেটিংস মেনুর মাধ্যমে এই শর্টকাটগুলি কাস্টমাইজ করতে পারেন। রেকর্ডার শর্টকাটগুলি কাস্টমাইজ করুন।

আপনি যদি অন্য কোনও প্যানেলে কাজ করেন এবং ব্যবহারকারীর প্রবাহ রেকর্ডিং শুরু করতে চান, তাহলে শুরু করতে DevTools-এর কমান্ড মেনু থেকে একটি নতুন রেকর্ডিং তৈরি করুন কমান্ডটি ব্যবহার করুন। একটি নতুন রেকর্ডিং কমান্ড তৈরি করুন।

ক্রোমিয়াম সমস্যা: ১৩৩৯৭৭১

অ্যাঙ্গুলারের জন্য আরও ভালো সিনট্যাক্স হাইলাইট

DevTools অ্যাঙ্গুলার HTML টেমপ্লেটের জন্য সিনট্যাক্স হাইলাইটিং উন্নত করেছে, যার ফলে আপনার কোড পড়া এবং এর গঠন চিনতে সহজ হয়েছে। অ্যাঙ্গুলার HTML টেমপ্লেটের জন্য সিনট্যাক্স হাইলাইটিং।

ক্রোমিয়াম সমস্যা: ১৩৮৫৩৭৪ , ১৩৮৫৬৭৮

অ্যাপ্লিকেশন প্যানেলে ক্যাশে পুনর্গঠন করুন

ক্যাশে স্টোরেজ প্যানটি এখন অ্যাপ্লিকেশন প্যানেলের স্টোরেজ বিভাগে পাওয়া যাবে, যখন ব্যাক/ফরোয়ার্ড ক্যাশে প্যানটি ব্যাকগ্রাউন্ড সার্ভিসেস বিভাগে সরানো হয়েছে। অ্যাপ্লিকেশন প্যানেলে ক্যাশে।

ক্রোমিয়াম সমস্যা: ১৪০৭১৬৬

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

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

  • সোর্সম্যাপ লোড করার সময় ক্যাশে অক্ষম করুন সেটিংটি মেনে চলার জন্য DevTools আপডেট করা হয়েছে। ( 1407084 )
  • এলিমেন্টস প্যানেল এখন অনুসন্ধান ফলাফলে প্রথম মিলিত উপাদানটিতে তাৎক্ষণিকভাবে অটোফোকাস করে। ( 1381853 )
  • সোর্স ম্যাপ এবং ব্রেকপয়েন্টের নির্ভরযোগ্যতা উন্নত করার জন্য বিভিন্ন সংশোধন। ( 508270 , 1403362 , 1403432 , 1396298 , 1395337 , 1405134 )
  • ডিবাগিং আরও সহজ করার জন্য, DevTools এখন প্রাইভেট ক্লাস সদস্যদের সাথে এক্সপ্রেশন মূল্যায়ন সমর্থন করে। ( 1381806 ) ব্যক্তিগত শ্রেণীর সদস্যদের সাথে রাশির মূল্যায়ন।

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

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

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

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

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

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