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

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

শৈলী ফলক দিয়ে HD রঙ ডিবাগ করা

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

CSS কালার লেভেল 4 স্পেসিফিকেশনে বর্ণিত স্টাইল ফলক এখন 12টি নতুন কালার স্পেস এবং 7টি নতুন গ্যামুট সমর্থন করে। ওয়েবে উপলব্ধ রঙের বিকল্পগুলির একটি বিস্তৃত বোঝার জন্য হাই ডেফিনিশন CSS কালার গাইড দেখুন।

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

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

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

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

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

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

চোখের ড্রপার সক্রিয় করুন।

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

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

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

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

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

  • ব্রেকপয়েন্টগুলি ফাইল দ্বারা গোষ্ঠীবদ্ধ, লাইন বা কলাম সংখ্যা দ্বারা ক্রমানুযায়ী, এবং সংকোচনযোগ্য। ফাইল দ্বারা গ্রুপ ব্রেকপয়েন্ট.

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

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

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

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

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

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

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

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

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

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

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

কৌণিক জন্য আরও ভাল সিনট্যাক্স হাইলাইট

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

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

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

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

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

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

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

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

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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