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

Kayce Basques

আবার স্বাগতম! এখানে নতুন বিষয় রয়েছে।

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

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

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

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

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

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

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

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

ওয়েবসকেট বাইনারি মেসেজ ভিউয়ার

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

1. নেটওয়ার্ক প্যানেলটি খুলুন। নেটওয়ার্ক কার্যকলাপ বিশ্লেষণের মূল বিষয়গুলি জানতে "নেটওয়ার্ক কার্যকলাপ পরিদর্শন করুন" দেখুন।

   

   চিত্র ৪। নেটওয়ার্ক প্যানেল

2. WebSocket সংযোগ নয় এমন সমস্ত রিসোর্স ফিল্টার করতে WS-এ ক্লিক করুন।

   

   চিত্র ৫। WS-এ ক্লিক করার পর শুধুমাত্র WebSockety সংযোগগুলি দেখানো হবে।

3. একটি ওয়েবসকেট সংযোগ পরীক্ষা করার জন্য তার নামে ক্লিক করুন।

   

   চিত্র ৬। একটি ওয়েবসকেট সংযোগ পরিদর্শন করা হচ্ছে

4. বার্তা ট্যাবে ক্লিক করুন।

   

   চিত্র ৭। বার্তা ট্যাব

5. বাইনারি মেসেজ এন্ট্রিগুলির একটিতে ক্লিক করে এটি পরীক্ষা করুন।

   

   চিত্র ৮। একটি বাইনারি বার্তা পরিদর্শন করা

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

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

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

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

1. DevTools-এ ফোকাস করুন এবং তারপর কমান্ড মেনু খুলতে Control + Shift + P অথবা Command + Shift + P (Mac) টিপুন।

   

   চিত্র ১০। কমান্ড মেনু

2. টাইপ করা শুরু করুন area , Capture area screenshots নির্বাচন করুন , তারপর Enter টিপুন।

3. আপনি যে ভিউপোর্টের স্ক্রিনশট নিতে চান তার উপর মাউস টেনে আনুন।

   

   চিত্র ১১। স্ক্রিনশটের জন্য ভিউপোর্টের অংশ নির্বাচন করা

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

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

চিত্র ১২। is:service-worker-initiated অনুসারে ফিল্টারিং

চিত্র ১৩। is:service-worker-intercepted দ্বারা ফিল্টারিং

নেটওয়ার্ক লগ ফিল্টার করার বিষয়ে আরও জানতে ফিল্টার রিসোর্স দেখুন।

পারফর্ম্যান্স প্যানেল আপডেট

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

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

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

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

চিত্র ১৪। একটি পারফর্মেন্স রেকর্ডিংয়ে একটি দীর্ঘ কাজের উপর ঘোরাফেরা করা

সময় বিভাগের প্রথম রঙ

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

চিত্র ১৫। সময় বিভাগে প্রথম রঙ

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

DOM-সম্পর্কিত বৈশিষ্ট্যগুলির একটি হাতে-কলমে ট্যুরের জন্য "Get Started With Viewing And Changing The DOM" দেখুন।

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

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

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

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

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

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

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