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

ফিরে আসার জন্য স্বাগতম! 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 এ ক্লিক করুন।

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

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

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

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

  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 সিরিজে নতুন কী আছে তাতে কভার করা হয়েছে এমন সবকিছুর একটি তালিকা।

ক্রোম 124

ক্রোম 123

ক্রোম 122

ক্রোম 121

ক্রোম 120

ক্রোম 119

ক্রোম 118

ক্রোম 117

ক্রোম 116

ক্রোম 115

ক্রোম 114

ক্রোম 113

ক্রোম 112

ক্রোম 111

ক্রোম 110

ক্রোম 109

ক্রোম 108

ক্রোম 107

ক্রোম 106

ক্রোম 105

ক্রোম 104

ক্রোম 103

ক্রোম 102

ক্রোম 101

ক্রোম 100

ক্রোম 99

ক্রোম 98

ক্রোম 97

ক্রোম 96

ক্রোম 95

ক্রোম 94

ক্রোম 93

ক্রোম 92

ক্রোম 91

ক্রোম 90

ক্রোম ৮৯

ক্রোম ৮৮

ক্রোম 87

ক্রোম 86

ক্রোম 85

ক্রোম 84

ক্রোম ৮৩

ক্রোম 82

Chrome 82 বাতিল করা হয়েছে

ক্রোম 81

ক্রোম 80

ক্রোম 79

ক্রোম 78

ক্রোম 77

ক্রোম 76

ক্রোম 75

ক্রোম 74

ক্রোম 73

ক্রোম 72

ক্রোম 71

ক্রোম 70

ক্রোম 68

ক্রোম 67

ক্রোম 66

ক্রোম 65

ক্রোম 64

ক্রোম 63

ক্রোম 62

ক্রোম 61

ক্রোম 60

ক্রোম 59