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

Jecelyn Yeen

পূর্বরূপ বৈশিষ্ট্য: নতুন কর্মক্ষমতা অন্তর্দৃষ্টি প্যানেল

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

কনসোল আপডেট

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

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

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

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

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

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

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

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

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

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

স্টাইল ফলকে উত্তরাধিকার সূত্রে প্রাপ্ত হাইলাইট ছদ্ম-উপাদানগুলি প্রদর্শন করুন

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

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

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

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

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

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

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

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

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

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

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

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

রঙ চয়নকারীর সাথে ব্রাউজারের বাইরে একটি রঙ বাছাই করতে এই পরীক্ষাটি সক্ষম করুন৷ পূর্বে, আপনি শুধুমাত্র ব্রাউজারের মধ্যে একটি রঙ বাছাই করতে পারেন।

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

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

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

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

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

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

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

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

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