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

Kayce Basques

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

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

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

সহায়ক কনসোল

Chrome 68 স্বয়ংসম্পূর্ণতা এবং পূর্বরূপের সাথে সম্পর্কিত কয়েকটি নতুন কনসোল বৈশিষ্ট্য সহ প্রেরণ করে।

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

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

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

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

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

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

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

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

চিত্র 2 । কনসোলে আর্গুমেন্ট ইঙ্গিতের বিভিন্ন উদাহরণ

নোট:

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

ফাংশন নির্বাহের পরে স্বয়ংসম্পূর্ণ

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

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

ES2017 কীওয়ার্ড স্বয়ংসম্পূর্ণ

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

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

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

Lighthouse 3.0 সহ Chrome 68 জাহাজ। পরবর্তী বিভাগগুলি হল সবচেয়ে বড় কিছু পরিবর্তনের একটি রাউন্ডআপ। সম্পূর্ণ গল্পের জন্য বাতিঘর 3.0 ঘোষণা করা দেখুন।

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

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

নতুন UI

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

চিত্র 5 । Lighthouse 3.0-এ নতুন রিপোর্ট UI

নতুন অডিট

Lighthouse 3.0 এছাড়াও 4টি নতুন অডিট সহ পাঠানো হয়েছে:

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

BigInt সমর্থন

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

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

দেখার জন্য সম্পত্তি পাথ যোগ করুন

ব্রেকপয়েন্টে বিরাম দেওয়ার সময়, স্কোপ প্যানে একটি প্রপার্টিতে ডান-ক্লিক করুন এবং ওয়াচ প্যানে সেই প্রপার্টি যোগ করতে ঘড়ির জন্য প্রপার্টি পাথ যোগ করুন নির্বাচন করুন।

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

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

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

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

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

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

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

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

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

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