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

Kayce Basques

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

• মাল্টি-ক্লায়েন্ট রিমোট ডিবাগিং সমর্থন ।
• কর্মক্ষেত্র 2.0 ।
• চারটি নতুন অডিট ।
• কাস্টম ডেটা দিয়ে পুশ বিজ্ঞপ্তি অনুকরণ করুন ।
• কাস্টম ট্যাগ ব্যবহার করে ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টগুলি ট্রিগার করুন ।

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

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

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

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

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

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

কর্মক্ষেত্র 2.0

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

ওয়ার্কস্পেস ২.০ ১.০ থেকে তৈরি, আরও সহায়ক UX এবং ট্রান্সপাইল করা কোডের উন্নত অটো-ম্যাপিং যোগ করে। এই বৈশিষ্ট্যটি মূলত ক্রোম ডেভেলপার সামিট (CDS) ২০১৬ এর পরেই প্রকাশের জন্য নির্ধারিত ছিল, কিন্তু কিছু সমস্যা সমাধানের জন্য টিম এটি স্থগিত করেছে।

ওয়ার্কস্পেস ২.০ কীভাবে কাজ করছে তা দেখতে CDS ২০১৬ থেকে DevTools আলোচনার "লেখক" অংশটি (প্রায় ১৪:২৮) দেখুন।

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

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

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

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

অডিট প্যানেলকে ক্ষমতা প্রদানকারী প্রকল্প সম্পর্কে আরও জানতে লাইটহাউস দেখুন।

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

DevTools-এ পুশ নোটিফিকেশন সিমুলেশন করার প্রচলন বেশ কিছুদিন ধরেই রয়েছে, তবে একটি সীমাবদ্ধতা রয়েছে: আপনি কাস্টম ডেটা পাঠাতে পারবেন না। কিন্তু Chrome 63-এর Service Worker প্যানে নতুন Push টেক্সট বক্স আসার সাথে সাথে, এখন আপনি তা করতে পারবেন। এখনই চেষ্টা করে দেখুন:

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

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

   

   চিত্র ১. সার্ভিস ওয়ার্কার প্যানে পুশ টেক্সট বক্সের মাধ্যমে কাস্টম ডেটা সহ একটি পুশ নোটিফিকেশন সিমুলেট করা

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

   

   চিত্র ২। সিমুলেটেড পুশ নোটিফিকেশন

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

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

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

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

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

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

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

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

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

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

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