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 সিরিজে নতুন কী আছে তাতে কভার করা হয়েছে এমন সবকিছুর একটি তালিকা।

,

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

স্টাইলস ফলক সহ এইচডি রঙ ডিবাগিং

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

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

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

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

রঙিন বাছাইকারী আরও বৈশিষ্ট্য সহ সমস্ত নতুন রঙের স্পেস সমর্থন করে। উদাহরণস্বরূপ, color(display-p3 1 0 1) । A gamut boundary line has also been added, distinguishing between the sRGB and display-p3 gamuts for a clearer understanding of your selected color's gamut. একটি গামুট সীমানা লাইন।

ডিভটুলগুলি রঙ ফর্ম্যাটগুলির মধ্যে রঙগুলিকে রূপান্তরকারী সমর্থন করে। রূপান্তর পপআপ অ্যাক্সেস করতে পরিবর্তনের রঙের ফর্ম্যাট আইকনটি ব্যবহার করুন বা স্টাইলস ফলকে রঙিন স্যুচে ক্লিক করুন Shift + ব্যবহার করুন। রঙ ফর্ম্যাটগুলির মধ্যে রঙ রূপান্তর করা।

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

এছাড়াও, আপনি নতুন শর্টকাট দিয়ে আপনার স্ক্রিন থেকে রঙগুলি বেছে নিতে পারেন। চোখের ড্রপারটি সক্রিয় করতে 'সি' টিপুন এবং এটিকে নিষ্ক্রিয় করতে Escape আঘাত করুন। আইড্রোপার সরঞ্জামটি কেবল এসআরজিবি রঙের জায়গাতে রঙের নমুনা দেয়। For example, if you try to sample the color color(display-p3 1 0 1) , which is outside of the sRGB color space, the eyedropper tool will clip the color to the nearest color in the sRGB space, which is magenta color(display-p3 0.92 0.2 0.97) ।

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

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

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

বর্ধিত ব্রেকপয়েন্ট ইউএক্স

The redesigned Breakpoints pane allows you to have quick access to commonly used features, in particular, deactivating, editing, and removing breakpoints.

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

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

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

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

ডেভটুলগুলির সাথে কীভাবে ডিবাগ করবেন তা শিখতে জাভাস্ক্রিপ্ট ডিবাগিং রেফারেন্স দেখুন।

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

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

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

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

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

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

If you're working in a different panel and want to start a user flow recording, use the Create a new recording command from the Command Menu in DevTools to get started. একটি নতুন রেকর্ডিং কমান্ড তৈরি করুন।

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

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

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

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

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

The Cache Storage pane can now be found in the Storage section of the Application panel, while the Back/forward cache pane has been moved to the Background Services section. অ্যাপ্লিকেশন প্যানেলে ক্যাশে।

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

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

এই প্রকাশে এগুলি কিছু লক্ষণীয় সমাধান:

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

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

আপনার ডিফল্ট ডেভলপমেন্ট ব্রাউজার হিসাবে ক্রোম ক্যানারি , দেব বা বিটা ব্যবহার করার বিষয়টি বিবেচনা করুন। These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

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

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

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

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

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