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

Chrome 73-এর DevTools-এ নতুন কী রয়েছে তা এখানে।

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

লগপয়েন্ট

console.log() কলের মাধ্যমে আপনার কোড বিশৃঙ্খল না করে কনসোলে বার্তা লগ করতে লগপয়েন্ট ব্যবহার করুন৷

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

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

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

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

  2. লগপয়েন্ট যোগ করুন নির্বাচন করুন। ব্রেকপয়েন্ট সম্পাদক পপ আপ.

    ব্রেকপয়েন্ট এডিটর

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

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

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

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

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

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

    174 লাইনে একটি কমলা লগপয়েন্ট ব্যাজ

    চিত্র 4 । 174 লাইনে একটি কমলা লগপয়েন্ট ব্যাজ

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

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

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

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

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

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

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

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

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

  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) টিপুন।

    কমান্ড মেনু

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

  2. coverage টাইপ করা শুরু করুন, কভারেজ দেখান নির্বাচন করুন এবং তারপরে এন্টার টিপুন।

    কভারেজ দেখান

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

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

    কভারেজ ট্যাব

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

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

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

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

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

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

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

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

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

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

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

অন্য লিঙ্ক ফোকাস

চিত্র 12 । অন্য লিঙ্ক ফোকাস

আপ অ্যারো কী টিপে আবার পুরো বার্তাটিকে ফোকাস করে।

একটি সম্পূর্ণ বার্তা ফোকাস করা

চিত্র 13 । একটি সম্পূর্ণ বার্তা ফোকাস করা

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

একটি সঙ্কুচিত স্ট্যাক ট্রেস প্রসারিত করা হচ্ছে

চিত্র 14 । একটি সঙ্কুচিত স্ট্যাক ট্রেস প্রসারিত করা হচ্ছে

বাম তীর কী টিপলে একটি প্রসারিত বার্তা বা ফলাফল ভেঙে যায়।

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

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

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

AA লাইন (শীর্ষ) এবং AAA লাইন (নীচে)

চিত্র 15 । AA লাইন (শীর্ষ) এবং AAA লাইন (নীচে)

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

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

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

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

কাস্টম ভূ-অবস্থান ওভাররাইড সংরক্ষণ করুন

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

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

    কমান্ড মেনু

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

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

    সেন্সর ট্যাব

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

  3. ভূ-অবস্থান বিভাগে ম্যানেজ ক্লিক করুন। সেটিংস > ভূ-অবস্থান খোলে।

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

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

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

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

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

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

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

কোড ভাঁজ

উত্স এবং নেটওয়ার্ক প্যানেলগুলি এখন কোড ভাঁজ সমর্থন করে৷

লাইন 54 থেকে 65 ভাঁজ করা হয়েছে

চিত্র 20 । লাইন 54 থেকে 65 ভাঁজ করা হয়েছে

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

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

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

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

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

বার্তা ট্যাব

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

বার্তা ট্যাব

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

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

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

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

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

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

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

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

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