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

নমস্কার! 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 ডেটাবেস দেখায়।

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

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

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

,

নমস্কার! ক্রোম 75 এর ক্রোম ডিভটুলগুলিতে নতুন কী তা এখানে।

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

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

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

পুরানো স্বতঃপ্রকাশ আচরণ।

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

নতুন স্বতঃপ্রকাশ আচরণ।

চিত্র 2 । নতুন স্বতঃপ্রকাশ আচরণ। ডিভটুলগুলি filter: blur(1px) এবং পরিবর্তনটি ভিউপোর্টে দৃশ্যমান।

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

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

কমান্ড মেনুটি খুলতে কন্ট্রোল + শিফট + পি বা কমান্ড + শিফট + পি (ম্যাক) টিপুন এবং তারপরে পৃষ্ঠার সাথে সম্পর্কিত সমস্ত ডেটা সাফ করার জন্য ক্লিয়ার সাইট ডেটা কমান্ডটি চালান, সহ: পরিষেবা কর্মী , localStorage , sessionStorage , ইনডেক্সডিবি , ওয়েব এসকিউএল , কুকিজ , ক্যাশে এবং অ্যাপ্লিকেশন ক্যাশে

পরিষ্কার সাইট ডেটা কমান্ড।

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

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

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

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

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

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

সমস্ত ইনডেক্সডডিবি ডাটাবেস দেখুন

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

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

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

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

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

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

হোভারে একটি রিসোর্সের সঙ্কুচিত আকার দেখুন

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

কোনও রিসোর্সের সঙ্কুচিত আকার দেখতে আকারের কলামে ঘুরে বেড়ানো।

চিত্র 7 । কোনও রিসোর্সের সঙ্কুচিত আকার দেখতে আকারের কলামে ঘুরে বেড়ানো।

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

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

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

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

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

পুরানো আচরণ। ব্রেকপয়েন্টস ফলকে কেবল একটি এন্ট্রি রয়েছে।

চিত্র 8 । পুরানো আচরণ। ব্রেকপয়েন্টস ফলকে কেবল 1 টি এন্ট্রি রয়েছে।

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

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

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

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

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

একটি ইনডেক্সডডিবি ডাটাবেসে মোট এন্ট্রি।

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

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

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

ক্রোম 73 পরিদর্শন মোডে থাকাকালীন বিশদ সরঞ্জামটিপগুলি প্রবর্তন করে।

একটি বিস্তারিত টুলটিপ।

চিত্র 11 । রঙ, ফন্ট, মার্জিন এবং বিপরীতে দেখায় একটি বিশদ সরঞ্জামটিপ।

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

একটি ন্যূনতম টুলটিপ।

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

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

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

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

ডেভটুলস ইউআই নিজেই আরও কীবোর্ডকে নাব্যযোগ্য করে তুলতে সম্প্রতি প্রচুর কাজ হয়েছে। আরও জানার জন্য সহায়ক প্রযুক্তি সহ রবের নেভিগেট ক্রোম ডিভটুলগুলি দেখুন।

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

আপনার ডিফল্ট ডেভলপমেন্ট ব্রাউজার হিসাবে ক্রোম ক্যানারি , দেব বা বিটা ব্যবহার করার বিষয়টি বিবেচনা করুন। এই পূর্বরূপ চ্যানেলগুলি আপনাকে সর্বশেষতম ডিভটুলস বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে কাটিয়া-এজ ওয়েব প্ল্যাটফর্ম এপিআই পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করতে সহায়তা করে!

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করুন

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

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

ডিভটুলসে নতুন কি

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।