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

Kayce Basques

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

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

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

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

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

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

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

চিত্র ১. একটি বাতিঘর প্রতিবেদন

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

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

গুগল আই/ও '১৭-এ বাতিঘর

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

বাতিঘরে অবদান রাখুন

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

লাইটহাউস অডিটের জন্য কোন ধারণা আছে? এখানে পোস্ট করুন!

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

কোন পৃষ্ঠায় নেটওয়ার্ক রিকোয়েস্ট করছে, কনসোলে লগ ইন করছে এবং জাভাস্ক্রিপ্ট এক্সিকিউট করছে, সে সম্পর্কে আরও তথ্য পেতে থার্ড-পার্টি ব্যাজ ব্যবহার করুন।

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

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

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

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

কল ট্রি এবং বটম-আপ ট্যাবে "গ্রুপ বাই প্রোডাক্ট" বিকল্পটি ব্যবহার করে তৃতীয় পক্ষের সত্তার পারফর্ম্যান্স রেকর্ডিং অ্যাক্টিভিটি গ্রুপ করুন যারা এই অ্যাক্টিভিটি তৈরি করেছে। DevTools দিয়ে পারফর্ম্যান্স বিশ্লেষণ করতে শিখতে "Get Started With Analyzing Runtime Performance" দেখুন।

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

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

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

কোডটি ব্যবহার করার সময়, Command (Mac) অথবা Control (Windows, Linux) ধরে রাখুন এবং তারপর কোডের সেই লাইনে যেতে ক্লিক করুন। DevTools নীল রঙে জাম্পযোগ্য গন্তব্যগুলি হাইলাইট করে।

চিত্র ৫। এখানেই যান

DevTools-এ ডিবাগিংয়ের মূল বিষয়গুলি জানতে "Get Started With Debugging JavaScript" দেখুন।

অ্যাসিঙ্কে প্রবেশ করুন

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

Continue to Here-এর নতুন জেসচারটি অ্যাসিঙ্ক্রোনাস কোডের সাথেও কাজ করে। যখন আপনি Command (Mac) বা Control (Windows, Linux) ধরে রাখেন, তখন DevTools জাম্পেবল অ্যাসিঙ্ক্রোনাস গন্তব্যগুলিকে সবুজ রঙে হাইলাইট করে।

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

পরিবর্তন

কনসোলে আরও তথ্যবহুল অবজেক্ট প্রিভিউ

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

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

চিত্র ৭। কনসোল এখন কীভাবে বস্তুর পূর্বরূপ দেখে

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

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

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

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

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

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

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

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

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

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

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

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

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

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

গুগল আই/ও '১৭-এ ডেভটুল

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

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

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

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

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

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

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

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