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

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

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

সহায়ক কনসোল

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

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

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

সর্ট() অপারেশনের ফলাফল স্পষ্টভাবে সম্পাদিত হওয়ার আগে কনসোল প্রিন্ট করছে।

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

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

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

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

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

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

কনসোলে আর্গুমেন্ট ইঙ্গিত।

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

নোট:

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

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

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

document.querySelector('p') চালানোর পরে, কনসোল এখন আপনাকে সেই উপাদানটির জন্য উপলব্ধ বৈশিষ্ট্য এবং ফাংশনগুলি দেখাতে পারে।

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

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

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

কনসোল এখন তার স্বয়ংসম্পূর্ণ UI-তে 'অপেক্ষা' করার পরামর্শ দেয়।

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

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

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

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

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

নতুন UI

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

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

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

নতুন অডিট

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

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

BigInt সমর্থন

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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