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

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

DevTools রিলিজ নোটের আরেকটি কিস্তিতে আপনাকে স্বাগতম। নিচের ভিডিওটি দেখুন অথবা Chrome 59-এ Chrome DevTools-এ নতুন কী আছে তা জানতে পড়ুন!

হাইলাইটস

নতুন বৈশিষ্ট্য

CSS এবং JS কোড কভারেজ

নতুন কভারেজ ট্যাব ব্যবহার করে অব্যবহৃত CSS এবং JS কোড খুঁজুন। যখন আপনি একটি পৃষ্ঠা লোড বা চালান, তখন ট্যাবটি আপনাকে বলে দেয় যে কত কোড ব্যবহার করা হয়েছে, বনাম কত লোড করা হয়েছে। আপনি শুধুমাত্র আপনার প্রয়োজনীয় কোডটি পাঠিয়ে আপনার পৃষ্ঠার আকার কমাতে পারেন।

কভারেজ ট্যাব

একটি URL-এ ক্লিক করলে সোর্স প্যানেলে সেই ফাইলটি দেখা যাবে এবং কোন লাইনের কোডটি কার্যকর করা হয়েছে তার একটি ব্রেকডাউন থাকবে।

সোর্স প্যানেলে কোড কভারেজের একটি ভাঙ্গন

কোডের প্রতিটি লাইন রঙ-কোডেড:

  • সলিড গ্রিন মানে কোডের লাইনটি কার্যকর করা হয়েছে।
  • সলিড লাল মানে এটি কার্যকর হয়নি।
  • উপরের স্ক্রিনশটে দেখানো লাইন ৩ এর মতো লাল এবং সবুজ উভয় রঙের কোডের একটি লাইনের অর্থ হল যে সেই লাইনের কিছু কোডই কার্যকর করা হয়েছে। উদাহরণস্বরূপ, var b = (a > 0) ? a : 0 মতো একটি ত্রিমাত্রিক এক্সপ্রেশন লাল এবং সবুজ উভয় রঙের।

কভারেজ ট্যাব খুলতে:

  1. কমান্ড মেনু খুলুন।
  2. Coverage টাইপ করা শুরু করুন এবং Show Coverage নির্বাচন করুন।

পূর্ণ-পৃষ্ঠার স্ক্রিনশট

পৃষ্ঠার উপর থেকে নীচে পর্যন্ত স্ক্রিনশট নেওয়ার পদ্ধতি শিখতে নীচের ভিডিওটি দেখুন।

অনুরোধ ব্লক করুন

যখন কোন নির্দিষ্ট স্ক্রিপ্ট, স্টাইলশিট, অথবা অন্যান্য রিসোর্স উপলব্ধ না থাকে তখন আপনার পৃষ্ঠাটি কেমন আচরণ করে তা দেখতে চান? নেটওয়ার্ক প্যানেলে অনুরোধের উপর ডান-ক্লিক করুন এবং ব্লক রিকোয়েস্ট URL নির্বাচন করুন। ড্রয়ারে একটি নতুন রিকোয়েস্ট ব্লকিং ট্যাব পপ আপ হবে, যা আপনাকে ব্লক করা অনুরোধগুলি পরিচালনা করতে দেয়।

অনুরোধের URL ব্লক করুন

অ্যাসিঙ্ক অপেক্ষার উপর ধাপ

এখন পর্যন্ত, নিচের স্নিপেটের মতো কোডের মধ্য দিয়ে ধাপে ধাপে চেষ্টা করা মাথাব্যথার মতো ছিল। আপনি test() এর মাঝখানে থাকবেন, একটি লাইনের উপর দিয়ে পা ফেলবেন, এবং তারপর setInterval() কোড দ্বারা বাধাগ্রস্ত হবেন। এখন, যখন আপনি test() এর মতো অ্যাসিঙ্ক কোডের মধ্য দিয়ে ধাপে

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

পিএস, আপনার ডিবাগিং দক্ষতা উন্নত করতে চান? এই নতুন ডকুমেন্টগুলি দেখুন:

পরিবর্তন

ইউনিফাইড কমান্ড মেনু

যখন আপনি এখন কমান্ড মেনু খুলবেন, লক্ষ্য করুন যে আপনার কমান্ডটি একটি বৃহত্তর-এর চেয়ে বড় অক্ষর ( > ) দিয়ে শুরু হয়েছে। এর কারণ হল কমান্ড মেনুটি ওপেন ফাইল মেনুর সাথে একীভূত হয়েছে, যা হল Command + O (Mac), অথবা Control + O (Windows, Linux)।

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

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

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

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

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

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