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

Kayce Basques

আবার স্বাগতম! Chrome 63-এ DevTools-এ আসছে নতুন বৈশিষ্ট্যগুলির মধ্যে রয়েছে:

পড়ুন বা আরও জানতে নীচের ভিডিও দেখুন!

মাল্টি-ক্লায়েন্ট রিমোট ডিবাগিং সমর্থন

আপনি যদি কখনো VS Code বা WebStorm-এর মতো কোনো IDE থেকে কোনো অ্যাপ ডিবাগ করার চেষ্টা করে থাকেন, তাহলে আপনি সম্ভবত আবিষ্কার করেছেন যে DevTools খোলার ফলে আপনার ডিবাগ সেশনে বিশৃঙ্খলা হয়। এই সমস্যাটি ওয়েবড্রাইভার পরীক্ষাগুলি ডিবাগ করতে DevTools ব্যবহার করাও অসম্ভব করে তুলেছে।

Chrome 63 অনুযায়ী, DevTools এখন ডিফল্টরূপে একাধিক দূরবর্তী ডিবাগিং ক্লায়েন্ট সমর্থন করে, কোন কনফিগারেশনের প্রয়োজন নেই।

মাল্টি-ক্লায়েন্ট রিমোট ডিবাগিং ছিল crbug.com-এ 1 নম্বর সর্বাধিক জনপ্রিয় DevTools সমস্যা , এবং সমগ্র Chromium প্রকল্প জুড়ে 3 নম্বর৷ মাল্টি-ক্লায়েন্ট সমর্থন এছাড়াও DevTools-এর সাথে অন্যান্য সরঞ্জামগুলিকে একীভূত করার, বা সেই সরঞ্জামগুলিকে নতুন উপায়ে ব্যবহার করার জন্য বেশ কয়েকটি আকর্ষণীয় সুযোগ উন্মুক্ত করে৷ যেমন:

  • প্রোটোকল ক্লায়েন্ট যেমন ChromeDriver বা VS কোড এবং ওয়েবস্টর্মের জন্য Chrome ডিবাগিং এক্সটেনশন এবং Puppeteer-এর মতো WebSocket ক্লায়েন্ট এখন DevTools-এর মতো একই সময়ে চলতে পারে।
  • দুটি পৃথক WebSocket প্রোটোকল ক্লায়েন্ট, যেমন Puppeteer বা chrome-remote-interface , এখন একই ট্যাবে একই সাথে সংযোগ করতে পারে।
  • chrome.debugger API ব্যবহার করে Chrome এক্সটেনশনগুলি এখন DevTools এর মতো একই সময়ে চলতে পারে৷
  • একাধিক ভিন্ন Chrome এক্সটেনশন এখন একই ট্যাবে chrome.debugger API ব্যবহার করতে পারে।

ওয়ার্কস্পেস 2.0

DevTools-এ কিছু সময়ের জন্য ওয়ার্কস্পেস রয়েছে। এই বৈশিষ্ট্যটি আপনাকে আপনার IDE হিসাবে DevTools ব্যবহার করতে সক্ষম করে। আপনি DevTools-এর মধ্যে আপনার সোর্স কোডে কিছু পরিবর্তন করেন এবং পরিবর্তনগুলি আপনার ফাইল সিস্টেমে আপনার প্রকল্পের স্থানীয় সংস্করণে টিকে থাকে।

ওয়ার্কস্পেস 2.0 1.0 থেকে বিল্ড অফ করে, আরও সহায়ক ইউএক্স যোগ করে এবং ট্রান্সপিল্ড কোডের উন্নত স্বয়ংক্রিয়-ম্যাপিং। এই বৈশিষ্ট্যটি মূলত Chrome ডেভেলপার সামিট (CDS) 2016 এর পরেই প্রকাশ করার জন্য নির্ধারিত ছিল, কিন্তু দল কিছু সমস্যা সমাধানের জন্য এটি স্থগিত করেছে।

ওয়ার্কস্পেস 2.0 কার্যকরী দেখতে CDS 2016 থেকে DevTools টক-এর "লেখক" অংশটি (প্রায় 14:28) দেখুন।

চারটি নতুন অডিট

Chrome 63-এ অডিট প্যানেলে 4টি নতুন অডিট রয়েছে:

  • WebP হিসাবে ছবি পরিবেশন করুন.
  • উপযুক্ত আকৃতির অনুপাত সহ ছবি ব্যবহার করুন।
  • পরিচিত নিরাপত্তা দুর্বলতা সহ ফ্রন্টএন্ড জাভাস্ক্রিপ্ট লাইব্রেরি এড়িয়ে চলুন।
  • ব্রাউজার ত্রুটিগুলি কনসোলে লগ করা হয়েছে৷

আপনার পৃষ্ঠাগুলির গুণমান উন্নত করতে কীভাবে অডিট প্যানেল ব্যবহার করবেন তা শিখতে Chrome DevTools-এ Run Lighthouse দেখুন৷

অডিট প্যানেলকে ক্ষমতা দেয় এমন প্রকল্প সম্পর্কে আরও জানতে Lighthouse দেখুন।

কাস্টম ডেটা সহ পুশ বিজ্ঞপ্তিগুলি অনুকরণ করুন

একটি সীমাবদ্ধতার সাথে DevTools-এ কিছুক্ষণ ধরে পুশ বিজ্ঞপ্তিগুলি অনুকরণ করা হয়েছে: আপনি কাস্টম ডেটা পাঠাতে পারেননি৷ কিন্তু Chrome 63-এ সার্ভিস ওয়ার্কার প্যানে নতুন পুশ টেক্সট বক্স আসছে, এখন আপনি করতে পারেন। এখনই চেষ্টা করুন:

  1. সিম্পল পুশ ডেমোতে যান।
  2. পুশ বিজ্ঞপ্তি সক্ষম করুন ক্লিক করুন।
  3. যখন Chrome আপনাকে বিজ্ঞপ্তিগুলিকে অনুমতি দেওয়ার জন্য অনুরোধ করে তখন অনুমতিতে ক্লিক করুন৷
  4. DevTools খুলুন।
  5. সার্ভিস ওয়ার্কার্স প্যানে যান।

  6. পুশ টেক্সট বক্সে কিছু লিখুন।

    কাস্টম ডেটা সহ একটি পুশ বিজ্ঞপ্তি অনুকরণ করা।

    চিত্র 1 । সার্ভিস ওয়ার্কার প্যানে পুশ টেক্সট বক্সের মাধ্যমে কাস্টম ডেটা সহ একটি পুশ বিজ্ঞপ্তি অনুকরণ করা

  7. বিজ্ঞপ্তি পাঠাতে Push এ ক্লিক করুন।

    সিমুলেটেড পুশ বিজ্ঞপ্তি

    চিত্র 2 । সিমুলেটেড পুশ বিজ্ঞপ্তি

কাস্টম ট্যাগ দিয়ে ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্ট ট্রিগার করুন

ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টগুলিকে ট্রিগার করা পরিষেবা কর্মী প্যানেও কিছু সময়ের জন্য রয়েছে, কিন্তু এখন আপনি কাস্টম ট্যাগ পাঠাতে পারেন:

  1. DevTools খুলুন।
  2. সার্ভিস ওয়ার্কার্স প্যানে যান।
  3. সিঙ্ক টেক্সট বক্সে কিছু টেক্সট লিখুন।
  4. সিঙ্ক এ ক্লিক করুন।

একটি কাস্টম ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্ট ট্রিগার করা হচ্ছে

চিত্র 3 । সিঙ্ক ক্লিক করার পরে, DevTools পরিষেবা কর্মীকে কাস্টম ট্যাগ update-content সহ একটি পটভূমি সিঙ্ক ইভেন্ট পাঠায়

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

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

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

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

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

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

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