এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

Kayce Basques

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

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

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

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

পুরানো স্বয়ংসম্পূর্ণ আচরণ.

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

নতুন স্বয়ংসম্পূর্ণ আচরণ.

চিত্র ২ . নতুন স্বয়ংসম্পূর্ণ আচরণ. 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 ডেটাবেস দেখায়।

পুরনো আচরণ। পৃষ্ঠাটি একটি ডেমো এম্বেড করছে যা 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টি এন্ট্রি আছে।

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

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

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

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

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 এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
আরও বিকল্প ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ।
@ChromeDevTools- এ টুইট করুন।
আমাদের DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷