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

Kayce Basques

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

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

নীচের এই রিলিজ নোটগুলির ভিডিও সংস্করণটি দেখুন বা আরও জানতে পড়ুন৷

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

নতুন অডিট প্যানেল, লাইটহাউস দ্বারা চালিত

অডিট প্যানেল এখন Lighthouse দ্বারা চালিত হয়। বাতিঘর আপনার ওয়েব পৃষ্ঠাগুলির গুণমান পরিমাপের জন্য পরীক্ষার একটি বিস্তৃত সেট প্রদান করে৷

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

চিত্র 1 । একটি বাতিঘর রিপোর্ট

একটি পৃষ্ঠা অডিট করতে:

1. অডিট ট্যাবে ক্লিক করুন।
2. একটি অডিট সম্পাদন করুন ক্লিক করুন.
3. অডিট চালান ক্লিক করুন। Lighthouse একটি মোবাইল ডিভাইস অনুকরণ করতে DevTools সেট আপ করে, পৃষ্ঠার বিরুদ্ধে একগুচ্ছ পরীক্ষা চালায় এবং তারপরে অডিট প্যানেলে ফলাফলগুলি প্রদর্শন করে৷

Google I/O '17 এ বাতিঘর

DevTools-এ Lighthouse এর ইন্টিগ্রেশন সম্পর্কে আরও জানতে নীচে Google I/O '17 থেকে DevTools টক দেখুন।

বাতিঘর অবদান

বাতিঘর একটি ওপেন সোর্স প্রকল্প। এটি কীভাবে কাজ করে এবং কীভাবে এতে অবদান রাখতে হয় সে সম্পর্কে আরও অনেক কিছু জানতে, নীচে Google I/O '17 থেকে লাইটহাউস টক দেখুন৷

একটি বাতিঘর অডিট জন্য একটি ধারণা পেয়েছেন? এখানে পোস্ট করুন!

তৃতীয় পক্ষের ব্যাজ

একটি পৃষ্ঠায় নেটওয়ার্ক অনুরোধ করা, কনসোলে লগিং করা এবং জাভাস্ক্রিপ্ট চালানোর জন্য আরও অন্তর্দৃষ্টি পেতে তৃতীয় পক্ষের ব্যাজগুলি ব্যবহার করুন৷

চিত্র 2 । নেটওয়ার্ক প্যানেলে একটি তৃতীয় পক্ষের ব্যাজের উপর ঘোরানো

চিত্র 3 । কনসোলে একটি তৃতীয় পক্ষের ব্যাজের উপর ঘোরানো

তৃতীয় পক্ষের ব্যাজ সক্ষম করতে:

1. কমান্ড মেনু খুলুন।
2. Show third party badges কমান্ডটি চালান।

কল ট্রি এবং বটম-আপ ট্যাবে পণ্য দ্বারা গ্রুপ বিকল্পটি ব্যবহার করুন তৃতীয় পক্ষের সত্ত্বা যে কার্যকলাপগুলি ঘটিয়েছে তাদের দ্বারা কর্মক্ষমতা রেকর্ডিং কার্যকলাপ গ্রুপ করতে৷ DevTools-এর সাহায্যে কীভাবে পারফরম্যান্স বিশ্লেষণ করতে হয় তা শিখতে রানটাইম পারফরম্যান্স বিশ্লেষণ করে শুরু করুন দেখুন।

চিত্র 4 । বটম-আপ ট্যাবে পণ্য অনুসারে গ্রুপিং

এখানে চালিয়ে যাওয়ার জন্য একটি নতুন অঙ্গভঙ্গি

বলুন আপনি একটি স্ক্রিপ্টের 25 লাইনে বিরতি দিয়েছেন, এবং আপনি 50 লাইনে যেতে চান। অতীতে, আপনি 50 লাইনে একটি ব্রেকপয়েন্ট সেট করতে পারেন, অথবা লাইনটিতে ডান ক্লিক করুন এবং এখানে চালিয়ে যান নির্বাচন করুন। কিন্তু এখন, এই কর্মপ্রবাহ পরিচালনা করার জন্য একটি দ্রুত অঙ্গভঙ্গি আছে।

কোডের মধ্য দিয়ে যাওয়ার সময়, কমান্ড (ম্যাক) বা কন্ট্রোল (উইন্ডোজ, লিনাক্স) ধরে রাখুন এবং তারপর কোডের সেই লাইনে চালিয়ে যেতে ক্লিক করুন। DevTools নীল রঙে লাফানো যায় এমন গন্তব্যগুলি হাইলাইট করে।

চিত্র 5 । এখানে চালিয়ে যান

DevTools-এ ডিবাগিংয়ের প্রাথমিক বিষয়গুলি শিখতে JavaScript ডিবাগিং দিয়ে শুরু করুন দেখুন।

অ্যাসিঙ্কে যান

অদূর ভবিষ্যতে DevTools টিমের জন্য একটি বড় থিম হল ডিবাগিং অ্যাসিঙ্ক্রোনাস কোডকে অনুমানযোগ্য করে তোলা এবং আপনাকে অ্যাসিঙ্ক্রোনাস এক্সিকিউশনের সম্পূর্ণ ইতিহাস প্রদান করা।

এখানে চালিয়ে যাওয়ার জন্য নতুন অঙ্গভঙ্গিটি অ্যাসিঙ্ক্রোনাস কোডের সাথেও কাজ করে। আপনি যখন কমান্ড (ম্যাক) বা কন্ট্রোল (উইন্ডোজ, লিনাক্স) ধরে রাখেন, তখন DevTools সবুজ রঙে জাম্পেবল অ্যাসিঙ্ক্রোনাস গন্তব্যগুলি হাইলাইট করে।

উদাহরণের জন্য I/O-এ DevTools টক থেকে নীচের ডেমোটি দেখুন।

পরিবর্তন

কনসোলে আরও তথ্যপূর্ণ বস্তুর পূর্বরূপ

পূর্বে, আপনি যখন কনসোলে কোনো বস্তু লগ-ইন বা মূল্যায়ন করতেন, তখন কনসোল শুধুমাত্র Object প্রদর্শন করবে, যা বিশেষভাবে সহায়ক নয়। এখন, কনসোল বস্তুর বিষয়বস্তু সম্পর্কে আরও তথ্য প্রদান করে।

চিত্র 6 । কনসোল কিভাবে বস্তুর পূর্বরূপ ব্যবহার করে

চিত্র 7 । কনসোল এখন অবজেক্টের পূর্বরূপ কিভাবে দেখায়

কনসোলে আরও তথ্যপূর্ণ প্রসঙ্গ নির্বাচন মেনু

কনসোলের প্রসঙ্গ নির্বাচন মেনু এখন উপলব্ধ প্রসঙ্গ সম্পর্কে আরও তথ্য প্রদান করে।

• শিরোনাম প্রতিটি আইটেম কি বর্ণনা করে.
• শিরোনামের নীচের সাবটাইটেলটি সেই ডোমেনের বর্ণনা করে যেখান থেকে আইটেমটি এসেছে৷
• ভিউপোর্টে হাইলাইট করার জন্য একটি আইফ্রেম প্রসঙ্গের উপর হোভার করুন।

চিত্র 8 । নতুন কনটেক্সট সিলেকশন মেনুতে একটি আইফ্রেমের উপর ঘোরালে সেটি ভিউপোর্টে হাইলাইট হয়

কভারেজ ট্যাবে রিয়েল-টাইম আপডেট

ক্রোম 59-এ কোড কভারেজ রেকর্ড করার সময়, কভারেজ ট্যাবটি কেবল "রেকর্ডিং..." প্রদর্শন করবে, কোন কোড ব্যবহার করা হচ্ছে তার কোন দৃশ্যমানতা ছাড়াই। এখন, কভারেজ ট্যাব আপনাকে রিয়েল-টাইমে দেখায় যে কোন কোড ব্যবহার করা হচ্ছে।

চিত্র 9 । পুরানো কভারেজ ট্যাব ব্যবহার করে একটি পৃষ্ঠার সাথে লোড করা এবং ইন্টারঅ্যাক্ট করা

চিত্র 10 । নতুন কভারেজ ট্যাব ব্যবহার করে একটি পৃষ্ঠা লোড করা এবং ইন্টারঅ্যাক্ট করা

সহজ নেটওয়ার্ক থ্রটলিং বিকল্প

নেটওয়ার্ক এবং পারফরম্যান্স প্যানেলে নেটওয়ার্ক থ্রোটলিং মেনুগুলিকে শুধুমাত্র তিনটি বিকল্প অন্তর্ভুক্ত করার জন্য সরলীকৃত করা হয়েছে: অফলাইন , স্লো 3G , যা ভারতের মতো জায়গায় সাধারণ এবং দ্রুত 3G , যা মার্কিন যুক্তরাষ্ট্রের মতো জায়গায় সাধারণ৷

চিত্র 11 । নতুন নেটওয়ার্ক থ্রটলিং বিকল্প

থ্রটলিং বিকল্পগুলি অন্যান্য, কার্নেল-স্তরের থ্রটলিং সরঞ্জামগুলির সাথে মেলানোর জন্য টুইক করা হয়েছে। DevTools আর প্রতিটি বিকল্পের পাশে লেটেন্সি, ডাউনলোড এবং আপলোড মেট্রিক্স দেখায় না, কারণ সেই মানগুলি বিভ্রান্তিকর ছিল। লক্ষ্য প্রতিটি বিকল্পের সত্য অভিজ্ঞতা মেলে.

ডিফল্টরূপে অ্যাসিঙ্ক স্ট্যাক চালু থাকে

সোর্স প্যানেল থেকে Async চেকবক্স সরানো হয়েছে। Async স্ট্যাক ট্রেস এখন ডিফল্টরূপে চালু আছে। অতীতে, কর্মক্ষমতা ওভারহেডের কারণে এই বিকল্পটি অপ্ট-ইন করা হয়েছিল। ডিফল্টরূপে বৈশিষ্ট্যটি সক্ষম করার জন্য ওভারহেড এখন যথেষ্ট নূন্যতম। আপনি যদি অ্যাসিঙ্ক স্ট্যাক ট্রেসগুলি অক্ষম রাখতে পছন্দ করেন, আপনি সেটিংসে বা কমান্ড মেনুতে Do not capture async stack traces কমান্ডটি চালিয়ে সেগুলি বন্ধ করতে পারেন।

Google I/O '17-এ DevTools

DevTools টিম গত বছর ধরে কী কাজ করছে এবং অদূর ভবিষ্যতে তারা যে বড় থিমগুলি মোকাবেলা করছে সে সম্পর্কে আরও জানতে নীচে পৌরাণিক পল আইরিশের বক্তৃতাটি দেখুন।

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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