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

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

Kayce Basques

ফিরে আসার জন্য স্বাগতম! এখানে নতুন কি আছে.

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

CSS সম্পত্তি দ্বারা প্রভাবিত সমস্ত নোড হাইলাইট করুন

সেই ঘোষণা দ্বারা প্রভাবিত সমস্ত নোডগুলিকে হাইলাইট করতে একটি CSS প্রপার্টির উপর হোভার করুন যা একটি নোডের বক্স মডেলকে প্রভাবিত করে, যেমন padding বা margin ।

একটি মার্জিন সম্পত্তির উপরে হভার করা সেই ঘোষণা দ্বারা প্রভাবিত সমস্ত নোডকে হাইলাইট করে

চিত্র 1 . একটি margin সম্পত্তির উপর হভার করা সেই ঘোষণা দ্বারা প্রভাবিত সমস্ত নোডের মার্জিনগুলিকে হাইলাইট করে৷

অডিট প্যানেলে লাইটহাউস v4

নতুন ট্যাপ লক্ষ্যগুলি সঠিকভাবে মাপ করা হয় না, মোবাইল ডিভাইসে বোতাম এবং লিঙ্কগুলির মতো ইন্টারেক্টিভ উপাদানগুলি যথাযথভাবে বড় এবং ব্যবধানে আলাদা করে পরীক্ষা করে।

একটি রিপোর্টের PWA বিভাগ এখন একটি ব্যাজ স্কোরিং সিস্টেম ব্যবহার করে।

চিত্র 3 । PWA বিভাগের জন্য নতুন ব্যাজ স্কোরিং সিস্টেম

WebSocket বাইনারি বার্তা দর্শক

একটি বাইনারি WebSocket বার্তার বিষয়বস্তু দেখতে:

নেটওয়ার্ক প্যানেল খুলুন। নেটওয়ার্ক ক্রিয়াকলাপ বিশ্লেষণের মূল বিষয়গুলি শিখতে নেটওয়ার্ক কার্যকলাপ পরিদর্শন দেখুন৷
চিত্র 4 । নেটওয়ার্ক প্যানেল
WebSocket সংযোগ নয় এমন সমস্ত সংস্থান ফিল্টার করতে WS-এ ক্লিক করুন।
চিত্র 5 । WS-এ ক্লিক করার পর শুধুমাত্র WebSockety কানেকশন দেখানো হয়
এটি পরিদর্শন করতে একটি WebSocket সংযোগের নামে ক্লিক করুন।
চিত্র 6 । একটি WebSocket সংযোগ পরিদর্শন করা হচ্ছে
বার্তা ট্যাবে ক্লিক করুন।
চিত্র 7 । বার্তা ট্যাব
এটি পরিদর্শন করতে বাইনারি বার্তা এন্ট্রিগুলির একটিতে ক্লিক করুন।
চিত্র 8 . একটি বাইনারি বার্তা পরিদর্শন

বার্তাটিকে Base64 বা UTF-8 এ রূপান্তর করতে ভিউয়ারের নীচে ড্রপডাউন মেনু ব্যবহার করুন৷ ক্লিপবোর্ডে অনুলিপি ক্লিক করুন আপনার ক্লিপবোর্ডে বাইনারি বার্তাটি অনুলিপি করতে।

Base64 হিসাবে একটি বাইনারি বার্তা দেখা হচ্ছে

চিত্র 9 । Base64 হিসাবে একটি বাইনারি বার্তা দেখা হচ্ছে

কমান্ড মেনুতে এলাকার স্ক্রিনশট ক্যাপচার করুন

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

DevTools ফোকাস করুন এবং তারপর কমান্ড মেনু খুলতে Control + Shift + P বা Command + Shift + P (Mac) টিপুন।
চিত্র 10 । কমান্ড মেনু
area টাইপ করা শুরু করুন, ক্যাপচার এলাকা স্ক্রিনশট নির্বাচন করুন, তারপর এন্টার টিপুন।
আপনি স্ক্রিনশট করতে চান এমন ভিউপোর্টের অংশে আপনার মাউস টেনে আনুন।
চিত্র 11 । স্ক্রিনশট থেকে ভিউপোর্টের অংশ নির্বাচন করা হচ্ছে

নেটওয়ার্ক প্যানেলে পরিষেবা কর্মী ফিল্টার

প্রকার is:service-worker-initiated বা is:service-worker-intercepted নেটওয়ার্ক প্যানেল ফিল্টার টেক্সট বক্সে এমন অনুরোধগুলি দেখার জন্য যা একটি পরিষেবা কর্মী দ্বারা সৃষ্ট ( initiated ) বা সম্ভাব্যভাবে পরিবর্তিত ( intercepted )৷

দ্বারা ফিল্টার করা হচ্ছে:পরিষেবা-কর্মী-সূচনা

চিত্র 12 । দ্বারা ফিল্টার করা is:service-worker-initiated

দ্বারা ফিল্টার করা হচ্ছে:পরিষেবা-কর্মী-বাধা

চিত্র 13 । দ্বারা ফিল্টার করা is:service-worker-intercepted

ফিল্টারিং নেটওয়ার্ক লগ সম্পর্কে আরও তথ্যের জন্য ফিল্টার সংস্থানগুলি দেখুন৷

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

পারফরম্যান্স রেকর্ডিং এখন লম্বা টাস্ক এবং ফার্স্ট পেইন্ট চিহ্নিত করে।

পৃষ্ঠা লোড কর্মক্ষমতা বিশ্লেষণ করতে পারফরম্যান্স প্যানেল ব্যবহার করার উদাহরণের জন্য কম প্রধান থ্রেড কাজ করুন দেখুন।

পারফরম্যান্স রেকর্ডিংয়ে দীর্ঘ কাজ

কর্মক্ষমতা রেকর্ডিং এখন দীর্ঘ টাস্ক দেখায়.

একটি পারফরম্যান্স রেকর্ডিং-এ একটি দীর্ঘ টাস্কের উপর হভার করা

চিত্র 14 । একটি পারফরম্যান্স রেকর্ডিং-এ একটি দীর্ঘ টাস্কের উপর হভার করা

টাইমিং বিভাগে প্রথম পেইন্ট

একটি পারফরম্যান্স রেকর্ডিংয়ের সময় বিভাগটি এখন প্রথম পেইন্টকে চিহ্নিত করে।

টাইমিং বিভাগে প্রথম পেইন্ট

চিত্র 15 । টাইমিং বিভাগে প্রথম পেইন্ট

নতুন DOM টিউটোরিয়াল

DOM-সম্পর্কিত বৈশিষ্ট্যগুলির হ্যান্ডস-অন ট্যুরের জন্য DOM দেখা এবং পরিবর্তনের সাথে শুরু করুন দেখুন।

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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