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

Jecelyn Yeen

CSS-in-JS ফ্রেমওয়ার্কের জন্য স্টাইল সম্পাদনা

শৈলী ফলকে এখন CSS অবজেক্ট মডেল (CSSOM) API-এর মাধ্যমে তৈরি করা শৈলী সম্পাদনার জন্য আরও ভাল সমর্থন রয়েছে। অনেক CSS-in-JS ফ্রেমওয়ার্ক এবং লাইব্রেরি শৈলী তৈরি করতে হুডের নীচে CSSOM API ব্যবহার করে।

আপনি এখন কনস্ট্রাক্টেবল স্টাইলশীট ব্যবহার করে জাভাস্ক্রিপ্টে যোগ করা শৈলী সম্পাদনা করতে পারেন। Shadow DOM ব্যবহার করার সময় কনস্ট্রাক্টেবল স্টাইলশীট হল পুনঃব্যবহারযোগ্য শৈলী তৈরি এবং বিতরণ করার একটি নতুন উপায়।

উদাহরণস্বরূপ, CSSStyleSheet (CSSOM APIs) এর সাথে যুক্ত করা h1 শৈলীগুলি আগে সম্পাদনাযোগ্য নয়৷ স্টাইল প্যানে এখন সম্পাদনাযোগ্য:

Chromium সমস্যা #946975

বাতিঘর প্যানেলে বাতিঘর 6

লাইটহাউস প্যানেলটি এখন লাইটহাউস 6 চালাচ্ছে৷ সমস্ত বড় পরিবর্তনের সারাংশের জন্য বাতিঘর 6.0-এ নতুন কী আছে তা দেখুন, বা সমস্ত পরিবর্তনের সম্পূর্ণ তালিকার জন্য v6.0.0 রিলিজ নোটগুলি দেখুন৷

Lighthouse 6.0 রিপোর্টে তিনটি নতুন মেট্রিক্স উপস্থাপন করেছে: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), এবং Total Blocking Time (TBT)। LCP এবং CLS হল Google-এর নতুন কোর ওয়েব ভাইটালগুলির মধ্যে 2টি, এবং TBT হল আরেকটি কোর ওয়েব ভাইটাল, প্রথম ইনপুট বিলম্বের জন্য একটি ল্যাব পরিমাপ প্রক্সি৷

ব্যবহারকারীদের লোডিং অভিজ্ঞতাকে আরও ভালভাবে প্রতিফলিত করার জন্য পারফরম্যান্স স্কোর সূত্রটিও পুনরায় ওজন করা হয়েছে।

Chromium সমস্যা #772558

প্রথম অর্থপূর্ণ পেইন্ট (FMP) অবচয়

ফার্স্ট মিনিংফুল পেইন্ট (এফএমপি) লাইটহাউস 6.0-এ বাতিল করা হয়েছে। এটি পারফরম্যান্স প্যানেল থেকেও সরানো হয়েছে। সবচেয়ে বড় বিষয়বস্তুযুক্ত পেইন্ট হল FMP-এর জন্য প্রস্তাবিত প্রতিস্থাপন। কেন এটি অবমূল্যায়িত হয়েছিল তার ব্যাখ্যার জন্য প্রথম অর্থপূর্ণ পেইন্ট দেখুন।

Chromium সমস্যা #1096008

নতুন জাভাস্ক্রিপ্ট বৈশিষ্ট্য জন্য সমর্থন

DevTools-এ এখন কিছু সাম্প্রতিক জাভাস্ক্রিপ্ট ভাষার বৈশিষ্ট্যগুলির জন্য আরও ভাল সমর্থন রয়েছে:

• ঐচ্ছিক চেইনিং সিনট্যাক্স স্বয়ংসম্পূর্ণতা - কনসোলে সম্পত্তি স্বয়ংক্রিয়-সম্পূর্ণতা এখন ঐচ্ছিক চেইনিং সিনট্যাক্স সমর্থন করে, যেমন name?. এখন name. এবং name[ .
• ব্যক্তিগত ক্ষেত্রের জন্য সিনট্যাক্স হাইলাইট করা - ব্যক্তিগত শ্রেণির ক্ষেত্রগুলি এখন সঠিকভাবে সিনট্যাক্স-হাইলাইট করা এবং উত্স প্যানেলে সুন্দর-মুদ্রিত।
• নালিশ কোলেসিং অপারেটরের জন্য সিনট্যাক্স হাইলাইট করা - DevTools এখন সোর্স প্যানেলে নালিশ কোলেসিং অপারেটরকে সঠিকভাবে প্রিন্ট করে।

Chromium সমস্যা #1083214 , #1073903 , #1083797

ম্যানিফেস্ট ফলকে নতুন অ্যাপ শর্টকাট সতর্কতা

অ্যাপ শর্টকাট ব্যবহারকারীদের দ্রুত একটি ওয়েব অ্যাপের মধ্যে সাধারণ বা প্রস্তাবিত কাজ শুরু করতে সাহায্য করে।

ম্যানিফেস্ট ফলক এখন সতর্কতা দেখায় যদি:

• অ্যাপ শর্টকাট আইকন 96x96 পিক্সেলের চেয়ে ছোট
• অ্যাপ শর্টকাট আইকন এবং ম্যানিফেস্ট আইকনগুলি বর্গাকার নয় (যেহেতু সেগুলি উপেক্ষা করা হবে)

ক্রোমিয়াম সমস্যা #955497

টাইমিং ট্যাবে ইভেন্টগুলির সাথে পরিষেবা কর্মী respondWith

নেটওয়ার্ক প্যানেলের টাইমিং ট্যাবে এখন ইভেন্টের সাথে পরিষেবা কর্মী respondWith অন্তর্ভুক্ত রয়েছে। respondWith হল পরিষেবা কর্মী fetch ইভেন্ট হ্যান্ডলারের সেই সময়ে চালানোর আগে যখন fetch হ্যান্ডলারের respondWith প্রতিশ্রুতি নিষ্পত্তি হয়।

Chromium সমস্যা #1066579

গণনা করা ফলকের ধারাবাহিক প্রদর্শন

এলিমেন্টস প্যানেলে কম্পিউটেড প্যানটি এখন সব ভিউপোর্ট মাপ জুড়ে একটি ফলক হিসাবে ধারাবাহিকভাবে প্রদর্শিত হয়। পূর্বে গণনা করা ফলকটি শৈলী ফলকের ভিতরে একত্রিত হয়ে যেত যখন DevTools-এর ভিউপোর্টের প্রস্থ সংকীর্ণ ছিল।

Chromium সমস্যা #1073899

WebAssembly ফাইলের জন্য বাইটকোড অফসেট

DevTools এখন Wasm disassembly-এর লাইন নম্বর প্রদর্শনের জন্য বাইটকোড অফসেট ব্যবহার করে। এটি আরও পরিষ্কার করে যে আপনি বাইনারি ডেটা দেখছেন এবং Wasm রানটাইম কীভাবে অবস্থানগুলিকে উল্লেখ করে তার সাথে আরও সামঞ্জস্যপূর্ণ।

Chromium সমস্যা #1071432

লাইন অনুযায়ী অনুলিপি এবং উত্স প্যানেলে কাটা

উত্স প্যানেল সম্পাদকে কোনো নির্বাচন ছাড়াই অনুলিপি বা কাটা সম্পাদন করার সময়, DevTools বর্তমান লাইনের বিষয়বস্তু কপি বা কাটবে। উদাহরণস্বরূপ, নীচের ভিডিওতে, কার্সারটি লাইন 1 এর শেষে রয়েছে। কাটা কীবোর্ড শর্টকাট টিপানোর পরে, পুরো লাইনটি ক্লিপবোর্ডে অনুলিপি করা হয় এবং মুছে ফেলা হয়।

Chromium সমস্যা #800028

কনসোল সেটিংস আপডেট

একই কনসোল বার্তাগুলিকে গোষ্ঠীমুক্ত করুন৷

কনসোল সেটিংসে গ্রুপের অনুরূপ টগল এখন ডুপ্লিকেট বার্তাগুলিতে প্রযোজ্য। পূর্বে এটি অনুরূপ বার্তাগুলিতে প্রয়োগ করা হয়েছিল।

উদাহরণস্বরূপ, আগে, DevTools hello বার্তাগুলিকে আনগ্রুপ করেনি যদিও গ্রুপের অনুরূপ টিক চিহ্ন মুক্ত করা হয়েছে। এখন, hello বার্তাগুলি আনগ্রুপ করা হয়েছে:

ক্রোমিয়াম সমস্যা #1082963

শুধুমাত্র নির্বাচিত প্রসঙ্গ সেটিংস বজায় রাখা

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

Chromium সমস্যা #1055875

কর্মক্ষমতা প্যানেল আপডেট

পারফরম্যান্স প্যানেলে JavaScript সংকলন ক্যাশে তথ্য

JavaScript সংকলন ক্যাশে তথ্য এখন সর্বদা পারফরম্যান্স প্যানেলের সারাংশ ট্যাবে প্রদর্শিত হয়। পূর্বে, কোড ক্যাশিং না ঘটলে DevTools কোড ক্যাশিং সম্পর্কিত কিছু দেখাবে না।

ক্রোমিয়াম সমস্যা #912581

পারফরম্যান্স প্যানেলে নেভিগেশন টাইমিং সারিবদ্ধকরণ

রেকর্ডিং কখন শুরু হয়েছিল তার উপর ভিত্তি করে পারফরম্যান্স প্যানেল শাসকগুলিতে সময় দেখাত। এটি এখন রেকর্ডিংয়ের জন্য পরিবর্তিত হয়েছে যেখানে ব্যবহারকারী নেভিগেট করেন, যেখানে DevTools এখন নেভিগেশনের পরিবর্তে শাসক সময় দেখায়।

আমরা DOMContentLoaded , First Paint, First Contentful Paint, এবং Largest Contentful Paint ইভেন্টগুলির নেভিগেশনের শুরুর সাথে আপেক্ষিক হওয়ার জন্য সময়গুলিও আপডেট করেছি, যার মানে তারা PerformanceObserver দ্বারা রিপোর্ট করা সময়ের সাথে মেলে।

ক্রোমিয়াম সমস্যা #974550

ব্রেকপয়েন্ট, কন্ডিশনাল ব্রেকপয়েন্ট এবং লগপয়েন্টের জন্য নতুন আইকন

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

Chromium সমস্যা #1041830

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

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

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

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

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

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

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