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

Kayce Basques

Chrome 68-এ DevTools-এ নতুন:

• আগ্রহী মূল্যায়ন । আপনি যখন এক্সপ্রেশন টাইপ করেন, কনসোল ফলাফলের পূর্বরূপ দেখায়।
• আর্গুমেন্টের ইঙ্গিত । আপনি ফাংশন টাইপ করার সাথে সাথে, কনসোল আপনাকে সেই ফাংশনের জন্য প্রত্যাশিত আর্গুমেন্টগুলি দেখায়।
• ফাংশন অটোকমপ্লিশন । document.querySelector('p') এর মতো একটি ফাংশন কল টাইপ করার পরে, কনসোল আপনাকে রিটার্ন মান সমর্থন করে এমন ফাংশন এবং বৈশিষ্ট্যগুলি দেখায়।
• কনসোলে ES2017 কীওয়ার্ড । await মতো কীওয়ার্ড এখন কনসোলের অটোকম্পলিট UI-তে উপলব্ধ।
• অডিট প্যানেলে লাইটহাউস 3.0 । দ্রুততর, আরও ধারাবাহিক অডিট, একটি নতুন UI এবং নতুন অডিট।
• BigInt সাপোর্ট । কনসোলে জাভাস্ক্রিপ্টের নতুন arbitrary-precision integer ব্যবহার করে দেখুন।
• ওয়াচ প্যানে প্রোপার্টি পাথ যোগ করা । স্কোপ প্যান থেকে ওয়াচ প্যানে প্রোপার্টি যোগ করা।
• "টাইমস্ট্যাম্প দেখান" সেটিংসে সরানো হয়েছে ।

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

সহায়ক কনসোল

Chrome 68-এ অটোকমপ্লিশন এবং প্রিভিউ সম্পর্কিত কিছু নতুন কনসোল বৈশিষ্ট্য রয়েছে।

আগ্রহী মূল্যায়ন

যখন আপনি কনসোলে একটি এক্সপ্রেশন টাইপ করেন, তখন কনসোল এখন আপনার কার্সারের নীচে সেই এক্সপ্রেশনের ফলাফলের একটি পূর্বরূপ দেখাতে পারে।

চিত্র ১। কনসোলটি sort() অপারেশনের ফলাফল স্পষ্টভাবে কার্যকর করার আগে প্রিন্ট করছে।

আগ্রহী মূল্যায়ন সক্ষম করতে:

1. কনসোলটি খুলুন।
2. কনসোল সেটিংস খুলুন .
3. আগ্রহী মূল্যায়ন চেকবক্সটি সক্রিয় করুন।

DevTools এক্সপ্রেশনটি পার্শ্ব প্রতিক্রিয়া সৃষ্টি করে কিনা তা মূল্যায়ন করতে আগ্রহী নয়।

যুক্তির ইঙ্গিত

যখন আপনি ফাংশন টাইপ করছেন, তখন কনসোল এখন আপনাকে ফাংশনটি যে আর্গুমেন্টগুলি আশা করে তা দেখাবে।

চিত্র ২। কনসোলে যুক্তি ইঙ্গিতের বিভিন্ন উদাহরণ

নোট:

• একটি arg-এর আগে একটি প্রশ্নবোধক চিহ্ন, যেমন ?options , একটি ঐচ্ছিক arg-কে প্রতিনিধিত্ব করে।
• একটি arg-এর আগে একটি উপবৃত্ত, যেমন ...items , একটি স্প্রেডকে প্রতিনিধিত্ব করে।
• কিছু ফাংশন, যেমন CSS.supports() , একাধিক আর্গুমেন্ট স্বাক্ষর গ্রহণ করে।

ফাংশন এক্সিকিউশনের পরে স্বয়ংক্রিয়ভাবে সম্পন্ন করা হবে

Eager Evaluation সক্ষম করার পর, কনসোল এখন আপনাকে দেখায় যে আপনি একটি ফাংশন টাইপ করার পরে কোন বৈশিষ্ট্য এবং ফাংশনগুলি উপলব্ধ।

চিত্র ৩। উপরের স্ক্রিনশটটি পুরানো আচরণকে প্রতিনিধিত্ব করে এবং নীচের স্ক্রিনশটটি নতুন আচরণকে প্রতিনিধিত্ব করে যা ফাংশন অটোকম্পলিশন সমর্থন করে।

স্বয়ংক্রিয়ভাবে ES2017 কীওয়ার্ড

ES2017 কীওয়ার্ড, যেমন await , এখন কনসোলের অটোকম্পলিট UI-তে উপলব্ধ।

চিত্র ৪। কনসোলটি এখন তার স্বয়ংসম্পূর্ণ UI-তে await পরামর্শ দেয়

দ্রুততর, আরও নির্ভরযোগ্য অডিট, একটি নতুন UI এবং নতুন অডিট

Chrome 68-এ Lighthouse 3.0 সংস্করণটি ব্যবহার করা হয়েছে। পরবর্তী বিভাগগুলিতে কিছু বৃহৎ পরিবর্তনের সংক্ষিপ্তসার রয়েছে। সম্পূর্ণ বিবরণের জন্য Announcing Lighthouse 3.0 দেখুন।

দ্রুততর, আরও নির্ভরযোগ্য অডিট

Lighthouse 3.0-এ একটি নতুন অভ্যন্তরীণ অডিটিং ইঞ্জিন রয়েছে, যার কোডনাম Lantern, যা আপনার অডিটগুলি দ্রুত সম্পন্ন করে এবং রানের মধ্যে কম পার্থক্য সহ।

নতুন UI

Lighthouse 3.0 একটি নতুন UIও এনেছে, Lighthouse এবং Chrome UX (গবেষণা ও নকশা) টিমের মধ্যে সহযোগিতার জন্য ধন্যবাদ।

চিত্র ৫। লাইটহাউস ৩.০-তে নতুন রিপোর্ট UI

নতুন অডিট

লাইটহাউস ৩.০ ৪টি নতুন অডিট সহ আসে:

• প্রথম কন্টেন্টফুল পেইন্ট
• robots.txt বৈধ নয়
• অ্যানিমেটেড কন্টেন্টের জন্য ভিডিও ফর্ম্যাট ব্যবহার করুন
• যেকোনো উৎসে একাধিক, ব্যয়বহুল ভ্রমণ এড়িয়ে চলুন

BigInt সাপোর্ট

Chrome 68 BigInt নামক একটি নতুন সংখ্যাসূচক আদিম সমর্থন করে। BigInt আপনাকে নির্বিচারে পূর্ণসংখ্যা উপস্থাপন করতে দেয়। কনসোলে এটি ব্যবহার করে দেখুন:

চিত্র ৬। কনসোলে BigInt এর একটি উদাহরণ

ঘড়িতে প্রপার্টি পাথ যোগ করুন

ব্রেকপয়েন্টে পজ করার সময়, Scope প্যানে একটি প্রপার্টিতে ডান-ক্লিক করুন এবং Watch প্যানে সেই প্রপার্টি যোগ করতে Add property path to watch নির্বাচন করুন।

চিত্র ৭। দেখার জন্য সম্পত্তির পথ যোগ করুন এর একটি উদাহরণ

"টাইমস্ট্যাম্প দেখান" সেটিংসে সরানো হয়েছে

কনসোল সেটিংসে পূর্বে টাইমস্ট্যাম্প দেখান চেকবক্স সেটিংসে সরানো হয়েছে।

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

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

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

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

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

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

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