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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

সকল IndexedDB ডাটাবেস দেখুন

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

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

চিত্র ৬। নতুন আচরণ। ডেমোর ডাটাবেসগুলি দৃশ্যমান।

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

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

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

চিত্র ৭। একটি রিসোর্সের আনকম্প্রেসড সাইজ দেখতে সাইজ কলামের উপর কার্সার ঘোরানো।

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

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

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

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

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

চিত্র ৮। পুরনো আচরণ। ব্রেকপয়েন্টস প্যানে মাত্র ১টি এন্ট্রি আছে।

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

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

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

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

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

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

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

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

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

আপনি এখন সেটিংস > পছন্দ > উপাদান > বিস্তারিত পরিদর্শন টুলটিপ দেখান থেকে এই বিস্তারিত টুলটিপগুলি অক্ষম করতে পারেন।

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

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

সোর্স প্যানেল এডিটরে ট্যাব ইন্ডেন্টেশন টগল করার জন্য সেটিং

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

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

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

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

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

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

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

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

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