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

Kayce Basques

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

হাইলাইট

• CSS এবং JS কোড কভারেজ । নতুন কভারেজ ট্যাবের মাধ্যমে অব্যবহৃত CSS এবং JS খুঁজুন।
• পুরো পৃষ্ঠার স্ক্রিনশট । ভিউপোর্টের উপরে থেকে নীচের দিকে পুরো পৃষ্ঠার একটি স্ক্রিনশট নিন।
• অনুরোধ ব্লক করুন . নেটওয়ার্ক প্যানেলে স্বতন্ত্র অনুরোধ ম্যানুয়ালি অক্ষম করুন।
• অ্যাসিঙ্কের উপরে ধাপ অপেক্ষা করছে । অনুমানযোগ্যভাবে অ্যাসিঙ্ক ফাংশনগুলির মাধ্যমে ধাপ করুন।
• ইউনিফাইড কমান্ড মেনু । নতুন-ইউনিফায়েড কমান্ড মেনু থেকে কমান্ডগুলি চালান এবং ফাইলগুলি খুলুন।

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

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

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

ইউআরএলে ক্লিক করলে সোর্স প্যানেলে সেই ফাইলটি প্রকাশ পায় এবং কোডের কোন লাইনগুলি কার্যকর করা হয়েছে।

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

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

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

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

পুরো পৃষ্ঠার স্ক্রিনশট

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

ব্লক অনুরোধ

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

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

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

  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);
  }

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

• ডিবাগিং JS দিয়ে শুরু করুন
• ব্রেকপয়েন্ট সহ আপনার কোড বিরতি
• JS ডিবাগিং রেফারেন্স

পরিবর্তন

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

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

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

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

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

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

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

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

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