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

Jecelyn Yeen

প্রিভিউ বৈশিষ্ট্য: নতুন পারফরম্যান্স ইনসাইট প্যানেল

আপনার ওয়েবসাইটের পারফরম্যান্স সম্পর্কে কার্যকর এবং ব্যবহার-কেস-চালিত অন্তর্দৃষ্টি পেতে পারফরম্যান্স ইনসাইট প্যানেলটি ব্যবহার করুন।

প্যানেলটি খুলুন এবং আপনার ব্যবহারের ক্ষেত্রের উপর ভিত্তি করে একটি নতুন রেকর্ডিং শুরু করুন। উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠার পৃষ্ঠা লোড পরিমাপ করা যাক।

রেকর্ডিং সম্পূর্ণ হয়ে গেলে, আপনি ইনসাইটস প্যানে পারফরম্যান্স ইনসাইট পাবেন। সমস্যা এবং সম্ভাব্য সমাধানগুলি বুঝতে প্রতিটি ইনসাইট আইটেমে (যেমন, রেন্ডার ব্লকিং অনুরোধ, লেআউট শিফট) ক্লিক করুন।

ধাপে ধাপে টিউটোরিয়ালটি সম্পর্কে আরও জানতে পারফরম্যান্স ইনসাইট প্যানেল ডকুমেন্টেশনে যান।

এটি একটি প্রিভিউ ফিচার যা ওয়েব ডেভেলপারদের (বিশেষ করে অ-পারফর্ম্যান্স বিশেষজ্ঞদের) সম্ভাব্য পারফর্ম্যান্স সমস্যাগুলি সনাক্ত করতে এবং সমাধান করতে সাহায্য করবে। আমাদের দল এই ফিচারটি নিয়ে সক্রিয়ভাবে কাজ করছে এবং আরও উন্নতির জন্য আমরা আপনার প্রতিক্রিয়া খুঁজছি।

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

হালকা এবং অন্ধকার থিম অনুকরণ করার জন্য নতুন শর্টকাট

স্টাইলস প্যানে নতুন শর্টকাট ব্যবহার করে আপনি এখন হালকা এবং অন্ধকার থিমগুলি দ্রুত অনুকরণ করতে পারবেন (CSS মিডিয়া বৈশিষ্ট্য prefers-color-scheme )।

পূর্বে, রেন্ডারিং ট্যাবে থিমগুলি অনুকরণ করার জন্য এটি আরও পদক্ষেপ নিয়েছিল।

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

নেটওয়ার্ক প্রিভিউ ট্যাবে উন্নত নিরাপত্তা

DevTools এখন নেটওয়ার্ক প্যানেলের প্রিভিউ ট্যাবে কন্টেন্ট সিকিউরিটি পলিসি (CSP) প্রয়োগ করে।

উদাহরণস্বরূপ, প্রথম স্ক্রিনশটটিতে এমন একটি পৃষ্ঠা দেখানো হয়েছে যাতে মিশ্র সামগ্রী রয়েছে। পৃষ্ঠাটি একটি নিরাপদ HTTPS সংযোগের মাধ্যমে লোড হয়, কিন্তু স্টাইলশিটটি একটি অনিরাপদ HTTP সংযোগের মাধ্যমে লোড হয়।

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

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

ব্রেকপয়েন্টে উন্নত রিলোডিং

ব্রেকপয়েন্টে পুনরায় লোড করার সময় ডিবাগার এখন স্ক্রিপ্ট এক্সিকিউশন বন্ধ করে দেয়।

উদাহরণস্বরূপ, এই React ডেমোতে ReactDOM ব্রেকপয়েন্টে সেট এবং রিলোড করার সময় স্ক্রিপ্টটি আগে একটি অন্তহীন লুপে পড়েছিল। অন্তহীন লুপের কারণে Sources প্যানেলটি ভেঙে গেছে।

জাভাস্ক্রিপ্ট চালিয়ে যাওয়া ডেভেলপারদের জন্য অনেক সমস্যা তৈরি করছে এবং রেন্ডারারটিকে ভাঙা অবস্থায় ফেলে দিতে পারে। এই পরিবর্তনটি ফায়ারফক্সের মতো অন্যান্য ব্রাউজারের সাথে ডিবাগিং আচরণকে সামঞ্জস্য করে।

ক্রোমিয়াম সমস্যা: 1014415 , 1004038 , 1112863 , 1134899

কনসোল আপডেট

কনসোলে স্ক্রিপ্ট এক্সিকিউশন ত্রুটিগুলি পরিচালনা করুন

কনসোলে স্ক্রিপ্ট মূল্যায়নের সময় ত্রুটিগুলি এখন সঠিক ত্রুটি ইভেন্ট তৈরি করে যা window.onerror হ্যান্ডলারকে ট্রিগার করে এবং উইন্ডো অবজেক্টে "error" ইভেন্ট হিসাবে প্রেরণ করা হয়।

ক্রোমিয়াম সমস্যা: ১২৯৫৭৫০

এন্টার দিয়ে লাইভ এক্সপ্রেশন কমিট করুন

লাইভ এক্সপ্রেশন টাইপ করা শেষ হলে, আপনি Enter ক্লিক করে এটি কমিট করতে পারেন। পূর্বে, Enter টিপলে নতুন লাইন যুক্ত হত। এটি DevTools এর অন্যান্য অংশের সাথে অসঙ্গতিপূর্ণ।

লাইভ এক্সপ্রেশন এডিটরে একটি নতুন লাইন যোগ করতে, Shift + Enter ব্যবহার করুন।

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

শুরুতেই ব্যবহারকারীর প্রবাহ রেকর্ডিং বাতিল করুন

ব্যবহারকারীর প্রবাহ রেকর্ডিং শুরু হওয়ার সময় আপনি রেকর্ডিং বাতিল করতে পারেন। পূর্বে, রেকর্ডিং বাতিল করার কোনও বিকল্প ছিল না।

ক্রোমিয়াম সমস্যা: ১২৫৭৪৯৯

স্টাইলস প্যানে উত্তরাধিকারসূত্রে প্রাপ্ত হাইলাইট সিউডো-এলিমেন্টগুলি প্রদর্শন করুন

স্টাইলস প্যানে উত্তরাধিকারসূত্রে প্রাপ্ত হাইলাইট সিউডো-এলিমেন্টগুলি (যেমন ::selection , ::spelling-error , ::grammar-error , এবং ::highlight ) দেখুন। পূর্বে, এই নিয়মগুলি প্রদর্শিত হত না।

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

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

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

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

• প্রোপার্টিজ প্যানে এখন ডিফল্টভাবে মান সহ অ্যাক্সেসর প্রোপার্টিজ প্রদর্শন করা হয়। এটি আগে ভুল করে লুকানো ছিল। ( 1309087 )
• স্টাইলস প্যানটি এখন সঠিকভাবে ওভাররাইড করা @support নিয়মগুলিকে স্ট্রাইকথ্রু হিসেবে দেখায়। পূর্বে, নিয়মগুলি স্ট্রাইকথ্রু ছিল না। ( 1298025 )
• সোর্স প্যানেলে CSS ফর্ম্যাটিং লজিক ঠিক করা হয়েছে যার কারণে CSS সম্পাদনা করার সময় একাধিক ফাঁকা লাইন তৈরি হয়েছিল। ( 1309588 )
• কনসোলে একটি বস্তুর পুনরাবৃত্তভাবে প্রসারিত করার বিকল্পটি সর্বোচ্চ ১০০-তে সীমাবদ্ধ করুন যাতে এটি বৃত্তাকার বস্তুর জন্য চিরতরে না যায়। ( ১২৭২৪৫০ )

[পরীক্ষামূলক] CSS পরিবর্তনগুলি অনুলিপি করুন

এই পরীক্ষায়, স্টাইলস পেইন আপনার CSS পরিবর্তনগুলিকে সবুজ রঙে তুলে ধরে। আপনি পরিবর্তিত নিয়মগুলির উপর কার্সার রেখে এর পাশে থাকা নতুন কপি বোতামে ক্লিক করে এটি কপি করতে পারেন।

তা ছাড়া, আপনি যেকোনো নিয়মের উপর ডান-ক্লিক করে এবং Copy all CSS changes নির্বাচন করে ঘোষণা জুড়ে সমস্ত CSS পরিবর্তন কপি করতে পারেন।

আপনার CSS পরিবর্তনগুলি সহজেই ট্র্যাক করতে এবং অনুলিপি করতে সাহায্য করার জন্য পরিবর্তন ট্যাবে একটি নতুন কপি বোতামও যুক্ত করা হয়েছে!

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

[পরীক্ষামূলক] ব্রাউজারের বাইরে রঙ নির্বাচন করা

কালার পিকার ব্যবহার করে ব্রাউজারের বাইরের কোনও রঙ বেছে নিতে এই পরীক্ষাটি সক্ষম করুন। আগে, আপনি কেবল ব্রাউজারের মধ্যে একটি রঙ বেছে নিতে পারতেন।

স্টাইলস প্যানে, কালার পিকার খুলতে যেকোনো কালার প্রিভিউতে ক্লিক করুন। যেকোনো জায়গা থেকে কালার বেছে নিতে আইড্রপার ব্যবহার করুন।

ক্রোমিয়াম সমস্যা: ১২৪৫১৯১

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

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

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

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

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

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

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