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

কেইস বাস্ক
Kayce Basques
X GitHub

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

এই রিলিজ নোটগুলির ভিডিও সংস্করণ

লগপয়েন্ট

console.log() কলের মাধ্যমে আপনার কোডে কোনও ঝামেলা না রেখে কনসোলে বার্তা লগ করতে Logpoints ব্যবহার করুন।

লগপয়েন্ট যোগ করতে:

  1. আপনি যে লাইন নম্বরে লগপয়েন্ট যোগ করতে চান সেখানে ডান-ক্লিক করুন।

    একটি লগপয়েন্ট যোগ করা হচ্ছে

    চিত্র ১. একটি লগপয়েন্ট যোগ করা

  2. লগপয়েন্ট যোগ করুন নির্বাচন করুন। ব্রেকপয়েন্ট এডিটর পপ আপ হবে।

    ব্রেকপয়েন্ট সম্পাদক

    চিত্র ২। ব্রেকপয়েন্ট এডিটর

  3. ব্রেকপয়েন্ট এডিটরে , কনসোলে যে এক্সপ্রেশনটি লগ করতে চান তা লিখুন।

    লগপয়েন্ট এক্সপ্রেশন টাইপ করা হচ্ছে

    চিত্র ৩. লগপয়েন্ট এক্সপ্রেশন টাইপ করা

    টিপস! যখন আপনি একটি ভেরিয়েবল লগ আউট করেন (যেমন TodoApp ), তখন কনসোলে তার নাম এবং মান লগ আউট করার জন্য ভেরিয়েবলটিকে একটি অবজেক্টে (যেমন {TodoApp} ) মুড়ে নিন। এই সিনট্যাক্স সম্পর্কে আরও জানতে Always Log Objects এবং Object Property Value শর্টহ্যান্ড দেখুন।

  4. সংরক্ষণ করতে এন্টার টিপুন অথবা ব্রেকপয়েন্ট এডিটরের বাইরে ক্লিক করুন। লাইন নম্বরের উপরে কমলা ব্যাজটি লগপয়েন্টকে প্রতিনিধিত্ব করে।

    ১৭৪ নম্বর লাইনে একটি কমলা রঙের লগপয়েন্ট ব্যাজ

    চিত্র ৪। ১৭৪ নম্বর লাইনে একটি কমলা রঙের লগপয়েন্ট ব্যাজ

পরের বার যখন লাইনটি কার্যকর হবে, তখন DevTools লগপয়েন্ট এক্সপ্রেশনের ফলাফল কনসোলে লগ করবে।

কনসোলে লগপয়েন্ট এক্সপ্রেশনের ফলাফল

চিত্র ৫। কনসোলে লগপয়েন্ট এক্সপ্রেশনের ফলাফল

বাগ রিপোর্ট করতে বা উন্নতির পরামর্শ দিতে Chromium সমস্যা #700519 দেখুন।

পরিদর্শন মোডে বিস্তারিত টুলটিপস

একটি নোড পরিদর্শন করার সময়, DevTools এখন একটি বর্ধিত টুলটিপ দেখায় যাতে ফন্টের আকার, ফন্টের রঙ, বৈসাদৃশ্য অনুপাত এবং বক্স মডেলের মাত্রার মতো সাধারণভাবে গুরুত্বপূর্ণ তথ্য থাকে।

একটি নোড পরিদর্শন করা হচ্ছে

চিত্র ৬। একটি নোড পরিদর্শন করা

একটি নোড পরিদর্শন করতে:

  1. পরিদর্শন করুন ক্লিক করুন একটি নোড পরিদর্শন করা হচ্ছে .

    পরামর্শ! এর কীবোর্ড শর্টকাট দেখতে Inspect এর উপর কার্সার রাখুন।

  2. আপনার ভিউপোর্টে, নোডের উপর কার্সার রাখুন।

এক্সপোর্ট কোড কভারেজ ডেটা

কোড কভারেজ ডেটা এখন JSON ফাইল হিসেবে এক্সপোর্ট করা যাবে। JSON দেখতে এরকম:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url হলো CSS বা JavaScript ফাইলের URL যা DevTools বিশ্লেষণ করেছে। ranges কোডের ব্যবহৃত অংশগুলো বর্ণনা করে। start হলো ব্যবহৃত রেঞ্জের শুরুর অফসেট। end হলো শেষের অফসেট। text হলো ফাইলের সম্পূর্ণ টেক্সট।

উপরের উদাহরণে, 0 থেকে 21 পরিসরটি body { margin: 1em; } এর সাথে মিলে যায় এবং 45 থেকে 67 পরিসরটি h1 { color: #317EFB; } এর সাথে মিলে যায়। অন্য কথায়, প্রথম এবং শেষ নিয়ম সেটটি ব্যবহার করা হয়েছিল এবং মাঝেরটি ছিল না।

পৃষ্ঠা লোডে কতটা কোড ব্যবহার করা হয়েছে তা বিশ্লেষণ করতে এবং ডেটা রপ্তানি করতে:

  1. কমান্ড মেনু খুলতে Control + Shift + P অথবা Command + Shift + P (Mac) টিপুন।

    কমান্ড মেনু

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

  2. coverage টাইপ করা শুরু করুন, Show Coverage নির্বাচন করুন এবং তারপর Enter টিপুন।

    কভারেজ দেখান

    চিত্র ৮। কভারেজ দেখান

    কভারেজ ট্যাবটি খোলে।

    কভারেজ ট্যাব

    চিত্র ৯। কভারেজ ট্যাব

  3. রিলোড ক্লিক করুন পুনরায় লোড করুন । DevTools পৃষ্ঠাটি পুনরায় লোড করে এবং কত কোড পাঠানো হয়েছে তার তুলনায় কত কোড ব্যবহার করা হয়েছে তা রেকর্ড করে।

  4. এক্সপোর্ট ক্লিক করুন রপ্তানি JSON ফাইল হিসেবে ডেটা এক্সপোর্ট করতে।

কোড কভারেজ Puppeteer-এও পাওয়া যায়, যা DevTools টিম দ্বারা পরিচালিত একটি ব্রাউজার অটোমেশন টুল। কভারেজ দেখুন।

বাগ রিপোর্ট করতে বা উন্নতির পরামর্শ দিতে Chromium সমস্যা #717195 দেখুন।

কীবোর্ড দিয়ে কনসোল নেভিগেট করুন

এখন আপনি কীবোর্ড ব্যবহার করে কনসোলটি নেভিগেট করতে পারেন। এখানে একটি উদাহরণ দেওয়া হল।

Shift + Tab টিপলে শেষ বার্তাটি (অথবা মূল্যায়ন করা এক্সপ্রেশনের ফলাফল) ফোকাস হয়। যদি বার্তাটিতে লিঙ্ক থাকে, তাহলে শেষ লিঙ্কটি প্রথমে হাইলাইট করা হয়। Enter টিপলে লিঙ্কটি একটি নতুন ট্যাবে খোলে। বাম তীর কী টিপলে পুরো বার্তাটি হাইলাইট হয় ( চিত্র 13 দেখুন)।

একটি লিঙ্ক ফোকাস করা

চিত্র ১১। একটি লিঙ্ক ফোকাস করা

উপরের তীর কী টিপলে পরবর্তী লিঙ্কটি ফোকাস হয়।

অন্য লিঙ্কে ফোকাস করা হচ্ছে

চিত্র ১২। অন্য একটি লিঙ্কে ফোকাস করা

আবার উপরের তীর কী টিপলে পুরো বার্তাটি ফোকাস হয়।

একটি সম্পূর্ণ বার্তা কেন্দ্রীভূত করা

চিত্র ১৩। একটি সম্পূর্ণ বার্তাকে কেন্দ্রীভূত করা

ডান তীর কী টিপলে একটি ধসে পড়া স্ট্যাক ট্রেস (অথবা অবজেক্ট, অ্যারে, ইত্যাদি) প্রসারিত হয়।

একটি ধসে পড়া স্ট্যাক ট্রেস প্রসারিত করা হচ্ছে

চিত্র ১৪। একটি ধসে পড়া স্ট্যাক ট্রেস প্রসারিত করা

বাম তীর কী টিপলে একটি প্রসারিত বার্তা বা ফলাফল ধসে পড়ে।

বাগ রিপোর্ট করতে বা উন্নতির পরামর্শ দিতে Chromium সমস্যা #865674 দেখুন।

কালার পিকারে AAA কনট্রাস্ট রেশিও লাইন

কালার পিকার এখন একটি দ্বিতীয় লাইন দেখায় যা নির্দেশ করে যে কোন রঙগুলি AAA কনট্রাস্ট অনুপাতের সুপারিশ পূরণ করে। AA লাইনটি Chrome 65 থেকে বিদ্যমান।

AA লাইন (উপরে) এবং AAA লাইন (নীচে)

চিত্র ১৫। AA লাইন (উপরে) এবং AAA লাইন (নীচে)

দুটি লাইনের মধ্যবর্তী রঙগুলি এমন রঙগুলিকে নির্দেশ করে যা AA সুপারিশ পূরণ করে কিন্তু AAA সুপারিশ পূরণ করে না। যখন একটি রঙ AAA সুপারিশ পূরণ করে, তখন সেই রঙের একই দিকের যেকোনো কিছুও সুপারিশ পূরণ করে। উদাহরণস্বরূপ, চিত্র 15- এ নীচের লাইনের নীচের যেকোনো কিছু AAA, এবং উপরের লাইনের উপরে থাকা যেকোনো কিছু এমনকি AA সুপারিশ পূরণ করে না।

টিপস! সাধারণভাবে, AAA সুপারিশ পূরণকারী লেখার পরিমাণ বাড়িয়ে আপনি আপনার পৃষ্ঠাগুলির পঠনযোগ্যতা উন্নত করতে পারেন। যদি কোনও কারণে AAA সুপারিশ পূরণ করা সম্ভব না হয়, তাহলে অন্তত AA সুপারিশ পূরণ করার চেষ্টা করুন।

এই বৈশিষ্ট্যটি কীভাবে অ্যাক্সেস করবেন তা জানতে কালার পিকারে কনট্রাস্ট অনুপাত দেখুন।

বাগ রিপোর্ট করতে বা উন্নতির পরামর্শ দিতে Chromium সমস্যা #879856 দেখুন।

কাস্টম জিওলোকেশন ওভাররাইড সংরক্ষণ করুন

সেন্সর ট্যাব এখন আপনাকে কাস্টম জিওলোকেশন ওভাররাইড সংরক্ষণ করতে দেয়।

  1. কমান্ড মেনু খুলতে Control + Shift + P অথবা Command + Shift + P (Mac) টিপুন।

    কমান্ড মেনু

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

  2. টাইপ করুন sensors , নির্বাচন করুন Show Sensors , এবং এন্টার টিপুন। Sensors ট্যাবটি খোলে।

    সেন্সর ট্যাব

    চিত্র ১৭। সেন্সর ট্যাব

  3. জিওলোকেশন বিভাগে Manage এ ক্লিক করুন। সেটিংস > জিওলোকেশন খুলবে।

    সেটিংসে জিওলোকেশন ট্যাব

    চিত্র ১৮। সেটিংসে জিওলোকেশন ট্যাব

  4. অবস্থান যোগ করুন ক্লিক করুন।

  5. একটি অবস্থানের নাম, অক্ষাংশ এবং দ্রাঘিমাংশ লিখুন, তারপর যোগ করুন ক্লিক করুন।

    একটি কাস্টম ভূ-অবস্থান যোগ করা হচ্ছে

    চিত্র ১৯। একটি কাস্টম ভূ-অবস্থান যোগ করা হচ্ছে

বাগ রিপোর্ট করতে বা উন্নতির পরামর্শ দিতে Chromium সমস্যা #649657 দেখুন।

কোড ভাঁজ করা

সোর্স এবং নেটওয়ার্ক প্যানেল এখন কোড ফোল্ডিং সমর্থন করে।

৫৪ থেকে ৬৫ নম্বর লাইন ভাঁজ করা হয়েছে

চিত্র ২০। ৫৪ থেকে ৬৫ নম্বর লাইন ভাঁজ করা হয়েছে।

কোড ভাঁজ সক্ষম করতে:

  1. সেটিংস খুলতে F1 টিপুন।
  2. সেটিংস > পছন্দ > উৎসের অধীনে কোড ফোল্ডিং সক্ষম করুন।

কোডের একটি ব্লক ভাঁজ করতে:

  1. ব্লকটি যে লাইন নম্বর থেকে শুরু হবে তার উপর মাউসটি ঘুরিয়ে দিন।
  2. ক্লিক ফোল্ড ভাঁজ করা .

বাগ রিপোর্ট করতে বা উন্নতির পরামর্শ দিতে Chromium সমস্যা #328431 দেখুন।

বার্তা ট্যাব

ফ্রেম ট্যাবটির নাম পরিবর্তন করে মেসেজ ট্যাব রাখা হয়েছে। এই ট্যাবটি শুধুমাত্র ওয়েব সকেট সংযোগ পরিদর্শন করার সময় নেটওয়ার্ক প্যানেলে উপলব্ধ।

বার্তা ট্যাব

চিত্র ২১। বার্তা ট্যাব

বাগ রিপোর্ট করতে বা উন্নতির পরামর্শ দিতে Chromium সমস্যা #802182 দেখুন।

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

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

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

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

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

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