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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    নেটওয়ার্ক প্যানেল

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

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

    WS-এ ক্লিক করার পর শুধুমাত্র WebSockety কানেকশন দেখানো হয়

    চিত্র 5 । WS-এ ক্লিক করার পর শুধুমাত্র WebSockety কানেকশন দেখানো হয়

  3. এটি পরিদর্শন করতে একটি WebSocket সংযোগের নামে ক্লিক করুন।

    একটি WebSocket সংযোগ পরিদর্শন করা হচ্ছে

    চিত্র 6 । একটি WebSocket সংযোগ পরিদর্শন করা হচ্ছে

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

    বার্তা ট্যাব

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

  5. এটি পরিদর্শন করতে বাইনারি বার্তা এন্ট্রিগুলির একটিতে ক্লিক করুন।

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

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

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

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

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

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

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

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

    কমান্ড মেনু

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

  2. area টাইপ করা শুরু করুন, ক্যাপচার এলাকা স্ক্রিনশট নির্বাচন করুন, তারপর এন্টার টিপুন।

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

    স্ক্রিনশট থেকে ভিউপোর্টের অংশ নির্বাচন করা হচ্ছে

    চিত্র 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 ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

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

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