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

Kayce Basques

নমস্কার! Chrome 75-এ Chrome DevTools- এ নতুন কী রয়েছে তা এখানে।

এই পৃষ্ঠার ভিডিও সংস্করণ

CSS ফাংশন স্বয়ংসম্পূর্ণ করার সময় অর্থপূর্ণ প্রিসেট মান

কিছু CSS বৈশিষ্ট্য, যেমন filter , মানগুলির জন্য ফাংশন গ্রহণ করে। উদাহরণস্বরূপ, filter: blur(1px) একটি নোডে 1-পিক্সেল ব্লার যোগ করে। filter মতো বৈশিষ্ট্যগুলি স্বয়ংসম্পূর্ণ করার সময়, DevTools এখন একটি অর্থপূর্ণ মান দিয়ে প্রপার্টি পপুলেট করে যাতে আপনি নোডে মানটির কী ধরনের পরিবর্তন হবে তার পূর্বরূপ দেখতে পারেন।

চিত্র 1 । পুরানো স্বয়ংসম্পূর্ণ আচরণ. DevTools filter: blur এবং ভিউপোর্টে কোনো পরিবর্তন দৃশ্যমান নয়।

চিত্র 2 । নতুন স্বয়ংসম্পূর্ণ আচরণ. DevTools filter: blur(1px) এবং পরিবর্তনটি ভিউপোর্টে দৃশ্যমান।

প্রাসঙ্গিক Chromium সমস্যা: #931145

কমান্ড মেনু থেকে সাইট ডেটা সাফ করুন

কমান্ড মেনু খুলতে Control + Shift + P বা Command + Shift + P (Mac) টিপুন এবং তারপর পৃষ্ঠার সাথে সম্পর্কিত সমস্ত ডেটা সাফ করতে Clear Site Data কমান্ড চালান, যার মধ্যে রয়েছে: পরিষেবা কর্মী , localStorage , sessionStorage , IndexedDB , Web SQL , কুকিজ , ক্যাশে , এবং অ্যাপ্লিকেশন ক্যাশে ৷

চিত্র 3 । সাফ সাইট ডেটা কমান্ড।

কিছুক্ষণের জন্য অ্যাপ্লিকেশন > ক্লিয়ার স্টোরেজ থেকে ক্লিয়ারিং সাইট ডেটা পাওয়া যাচ্ছে। Chrome 75-এর নতুন বৈশিষ্ট্যটি কমান্ড মেনু থেকে কমান্ড চালাতে সক্ষম হচ্ছে।

আপনি যদি সমস্ত সাইটের ডেটা মুছতে না চান, তাহলে অ্যাপ্লিকেশন > ক্লিয়ার স্টোরেজ থেকে কোন ডেটা মুছে ফেলা হবে তা আপনি নিয়ন্ত্রণ করতে পারেন।

চিত্র 4 । অ্যাপ্লিকেশন > ক্লিয়ার স্টোরেজ ।

প্রাসঙ্গিক Chromium সমস্যা: #942503

সমস্ত IndexedDB ডাটাবেস দেখুন

পূর্বে অ্যাপ্লিকেশন > IndexedDB শুধুমাত্র আপনাকে মূল উৎস থেকে IndexedDB ডাটাবেস পরিদর্শন করার অনুমতি দিত। উদাহরণস্বরূপ, যদি আপনার পৃষ্ঠায় একটি <iframe> থাকে এবং সেই <iframe> IndexedDB ব্যবহার করে, আপনি এর ডাটাবেস(গুলি) দেখতে সক্ষম হবেন না। Chrome 75 অনুযায়ী, DevTools সমস্ত উৎসের জন্য IndexedDB ডেটাবেস দেখায়।

চিত্র 5 । পুরনো আচরণ। পৃষ্ঠাটি একটি ডেমো এম্বেড করছে যা IndexedDB ব্যবহার করে, কিন্তু কোনো ডাটাবেস দৃশ্যমান নয়।

চিত্র 6 । নতুন আচরণ। ডেমো এর ডাটাবেস দৃশ্যমান হয়.

প্রাসঙ্গিক Chromium সমস্যা: #943770

হোভারে রিসোর্সের আনকম্প্রেসড সাইজ দেখুন

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

চিত্র 7 । একটি সম্পদের অসংকুচিত আকার দেখতে আকার কলামের উপর ঘোরানো।

প্রাসঙ্গিক Chromium সমস্যা: #805429

ব্রেকপয়েন্ট ফলকে ইনলাইন ব্রেকপয়েন্ট

ধরুন আপনি কোডের নিম্নলিখিত লাইনে একটি লাইন-অফ-কোড ব্রেকপয়েন্ট যোগ করেছেন:

document.querySelector('#dante').addEventListener('click', logWarning);

এখন কিছুক্ষণের জন্য DevTools আপনাকে নির্দিষ্ট করতে সক্ষম করেছে ঠিক কখন এটি একটি ব্রেকপয়েন্টে এভাবে বিরতি দেওয়া উচিত: লাইনের শুরুতে, document.querySelector('#dante') কল করার আগে, অথবা addEventListener('click', logWarning) আগে addEventListener('click', logWarning) বলা হয়। আপনি যদি সমস্ত 3টি সক্ষম করেন তবে আপনি মূলত 3টি ব্রেকপয়েন্ট তৈরি করছেন। পূর্বে ব্রেকপয়েন্টস ফলক আপনাকে পৃথকভাবে এই 3টি ব্রেকপয়েন্ট পরিচালনা করার ক্ষমতা দেয়নি। ক্রোম 75 অনুসারে প্রতিটি ইনলাইন ব্রেকপয়েন্ট ব্রেকপয়েন্ট ফলকে নিজস্ব এন্ট্রি পায়।

চিত্র 8 । পুরনো আচরণ। ব্রেকপয়েন্ট প্যানে শুধুমাত্র 1টি এন্ট্রি আছে।

চিত্র 9 । নতুন আচরণ। ব্রেকপয়েন্ট প্যানে 3টি এন্ট্রি আছে।

প্রাসঙ্গিক Chromium সমস্যা: #927961

IndexedDB এবং ক্যাশে রিসোর্স গণনা

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

চিত্র 10 । একটি IndexedDB ডাটাবেসে মোট এন্ট্রি।

প্রাসঙ্গিক Chromium সমস্যা: #941197 , #930773 , #930865

বিশদ পরিদর্শন টুলটিপ অক্ষম করার জন্য সেটিং

Chrome 73 ইনস্পেক্ট মোডে থাকাকালীন বিস্তারিত টুলটিপ চালু করেছে।

চিত্র 11 । রঙ, ফন্ট, মার্জিন এবং বৈসাদৃশ্য দেখানো একটি বিস্তারিত টুলটিপ।

আপনি এখন Settings > Preferences > Elements > Show Detailed Inspect Tooltip থেকে এই বিস্তারিত টুলটিপ অক্ষম করতে পারেন।

চিত্র 12 । একটি ন্যূনতম টুলটিপ শুধুমাত্র প্রস্থ এবং উচ্চতা দেখাচ্ছে।

প্রাসঙ্গিক Chromium সমস্যা: #948417

উৎস প্যানেল সম্পাদকে ট্যাব ইন্ডেন্টেশন টগল করার জন্য সেটিং

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

DevTools UI কে নিজেই আরও কীবোর্ড নেভিগেবল করার জন্য সম্প্রতি অনেক কাজ হয়েছে। আরও জানতে Rob-এর নেভিগেট Chrome DevTools সহ সহায়ক প্রযুক্তি দেখুন।

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

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

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

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

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

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

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