Module ৩৯ এ আমরা যাকিছু শিখেছি
Javascript Debug, web debug, dev toll mastering
What is preserve log ? আমাদের অনেক সময় ব্রাউজারের console কাজ করতে হয় । হুট করে reload দিয়ে দিলেই সেটা চলে যায় এটা সমাধান করার জন্য তুমি ব্রাউজারের dev tool সেটিং থেকে preserve log upon navigetor কে এনাবল করে দাও n
Throttling হচ্ছে তুমি হয়ত 100G স্পীডে ইন্টারনেট চালাচ্ছ । তোমার দেখতে হবে পারে 5G তে এটা লোড নিতে কত সময় নিচ্ছে । এটাই মুলত কন্ট্রোল করা যায় এই টুল দিয়ে ।
What is accessibility. অনেকে চোখে দেখতে পারে না । তাদের জন্য এই অপশনটা বেশ কাজে দেয় । সেখানে তারা গেলে বলে ভয়েস দিয়ে দিবে এখানে কি কি কাজ করা হয়েছে । এটা খুব বড় কিছু না । শুধু একটা attribute ব্যাবহার করতে হবে ।
আমরা অনেক সময় ব্রাউজার এর console দিয়ে আইডি, ক্লাস বা কোণ একটা specificকিছু সিলেক্ট করতে পারি । টাই না ? এর কিছু আবার শর্টকাটও আছে । সেগুলা দেখে ফেলি ।
১. document.getElementById = ${“#id-name”} ঠিক একইভাবে query selector এর সব কাজ করা যাবে ২. console.info() === information ৩. console.worn() === warning ৪. console.error() === error ৫. console.clear() {ctrl+l} === clear console ৬. special কোণ কিছুকে monitor করতে চাইলে monitor(function-name) দিলেই হবে । তবে এটা শুধু ব্রাউজারে কাজ করে অন্য কোথাও কাজ করবে না ।। মনিটর অফ করতে চিয়ালে unmonitor(function-name)
৭. console.count("function clecked") // function কে কতবার ক্লিক করা হয়ছে তা জানতে চাইলে ৮. console.table() = to make a table |
যদি এমন হত যে ব্রাউজার এর source ট্যাব থেকে কিছু চেঞ্জ করলে সরাসরি তোমার প্রোজেক্ট কোড ফাইলে চেঞ্জ করে দিবে ? এটা করা সম্ভব , এর জন্য তোমাকে কিছু পারমিশন দিয়ে দিতে হবে । সেটা বড় কিছু না শুধু তোমার প্রোজেক্ট ফাইল টাকে চিনিয়ে দিতে হবে ।
কোণ specific লাইনে জেতে চাইলে তুমি ctrl+g চাপবে ।চেপে লাইন নাম্বার দিলেই সেখানে নিয়ে যাবে । browser and VS code same method
কোণ প্রপার্টি অ্যান্ড ভেলু গুলোকে console এ টেবিল আকারে দেখতে চাইলে কি করতে পার ?
console.table(photos.hints); console.table(photos.hints, [preview_url]); |
Brwoser এর source tab এ কিভাবে breakPoient দিয়ে দিয়ে error কে খুজে বের করতে হয় সেটা নিয়ে তোমাকে খুব ভালো ভালো ভাবে study করতে হবে ।
Function খুজতে চাইলে ( ctrl+o )
Performance ট্যাব এর কি কাজ তা দেখে বুঝার চেষ্টা কর ।
Dev tool এর lighthouse ট্যাব টার কাজ কি ? ওয়েবসাইটকে analycis করে তার performance দেখানো !
গুগলে সার্চ কর devtools api reference লিখে । এবং Mozila developers এর কন্টেন্টটা পড় ।
Dev tool এর শর্টকাট গুলো দেখে নাও । কাজের সময় অনেক helpfull হবে
Reach app create কর । নিচের দেখানো পদ্ধতি মেনে ।
আর আমার github এ যাইতে চাইলে এই লিঙ্কে ক্লিক করুন
About
Md: Rashedul Islam Shihab Writer of this note Batch4 Social accounts
|
Post a Comment