ক্রোম ডেভেলপমেন্ট টুলস টিউটোরিয়াল, টিপস, ট্রিকস

গুগল ক্রোম ওয়েব ডেভেলপমেন্টের জনপ্রিয় ওয়েব ব্রাউজারের একটি কারণ এটি এর উন্নত বৈশিষ্ট্য। ডেভেলপারের সাথে ডেভেলপার টুলস খুব উপযোগী হতে পারে আমাদের মধ্যে বেশিরভাগই ইতিমধ্যেই জানেন যে আমরা Chrome Dev সরঞ্জামগুলি ব্যবহার করে লাইভ সিএসএস সম্পাদনা করতে পারি, তবে আরো কিছু টিপস রয়েছে যা আজ আমরা আপনার সাথে ভাগ করব।

Chrome ডেভেলপমেন্ট সরঞ্জাম টিপস

Chrome Dev এর অনেক অজানা ও লুকানো কৌশল আছে সরঞ্জাম এবং আমরা তাদের মধ্যে সবচেয়ে দরকারী ঠাট মধ্যে খুঁজছেন হবে। Chrome এ বিকাশকারী সরঞ্জামগুলি খুলতে, আপনার কীবোর্ডে F12 টিপুন এবং নিম্নলিখিত কৌশলগুলি চেষ্টা করুন।

1। যেকোনো ফাইল খুঁজুন এবং খুলুন

আমরা যখন ওয়েব ডেভেলপিং করি তখন আমরা অনেক এইচটিএমএল, CSS, জেড এবং অন্যান্য ফাইলগুলির সাথে মোকাবিলা করি। যখন আমরা কিছু ডিবাবল করতে চাই, তখন আমরা Chrome Dev সরঞ্জামগুলি খুলি। আপনার কাজটি সহজতর করার জন্য আপনি দ্রুত অনুসন্ধান এবং ফাইলটি খুঁজে পেতে পারেন। শুধু, Ctrl + P টিপুন এবং ফাইলের নাম টাইপ করুন। এটি আপনাকে ফাইলগুলির তালিকা থেকে নির্দিষ্ট ফাইলটি খুঁজে পেতে সহায়তা করে।

2 উৎস ফাইলের মধ্যে অনুসন্ধান করুন

পূর্বের ট্রিকে, আমরা জানতে পেরেছি কিভাবে একটি নির্দিষ্ট ফাইল অনুসন্ধান করা যায়। আপনি এমনকি সমস্ত লোড ফাইল একটি নির্দিষ্ট স্ট্রিং জন্য অনুসন্ধান করতে পারেন। ফাইলগুলির মধ্যে একটি স্ট্রিং অনুসন্ধান করতে Ctrl + Shift + F চাপুন। এটি নিয়মিত এক্সপ্রেশন সমর্থন করে।

3 নির্দিষ্ট লাইনে যান

একবার আপনি কোন উৎস ফাইল খুলেছেন এবং নির্দিষ্ট লাইনে যেতে চান, তারপর Ctrl + G টিপুন এবং লাইন নম্বর দিন এবং এন্টার করুন।

4। কনসোল ট্যাবে ডম এলিমেন্ট নির্বাচন করা

দেব টুলস আপনাকে কনসোলের উপাদান নির্বাচন করতে দেয়।

• $ () - মিলার সিএসএস সিলেক্টর এর প্রথম প্রিভিউ দেখায়।
• $$ () - প্রদত্ত সিএসএস সিলেক্টরের সাথে মিলিত উপাদানগুলির অ্যারেরটি ফেরত যায়।

আরো কনসোল কমান্ডগুলির জন্য, এই পোস্টে উপরে যান।

5 একাধিক ক্যারেট ব্যবহার করুন

কখনও কখনও, আপনি বিভিন্ন জায়গায় একাধিক কেরেট সেট করতে চান এবং আপনি সহজেই Chrome Dev টুলগুলি Ctrl কী এবং আপনি তাদের যেখানে রাখতে চান সেখানে ক্লিক করে তা করতে পারেন। তারপর লেখার শুরু করুন এবং আপনি দেখতে পাবেন যে এটি বিভিন্ন জায়গায় নির্বাচিত।

6 লগ সংরক্ষণ করুন

লগ সংরক্ষণ করুন আপনাকে পৃষ্ঠাটি লোড হওয়া লগও চালিয়ে যেতে সাহায্য করে। লগ সংরক্ষণ করুন কনসোলের লগে বিকল্পটি চেক করুন এবং লগ সংরক্ষণ করা হয়েছে। এই পৃষ্ঠাটি আনলোড এবং ব্যাজগুলি তদন্তের জন্য সহায়ক হওয়ার পূর্বে লগটি দেখায়।

7 অন্তর্নির্মিত কোড প্রস্তুতকারক ব্যবহার করুন

Chrome Dev সরঞ্জামগুলিতে চমত্কার মুদ্রণ "{}" নামক বিল্ট-ইন কোড প্রস্তুতকারক রয়েছে। বিকাশকারী সরঞ্জামটি কমপক্ষে কোড দেখায় এবং এটি পড়া সহজ হয় না। সুন্দর পাঠ্যবক্সের উপর ক্লিক করুন যা খোলা সোর্স ফাইলের নীচে বাম পাশে প্রদর্শিত হবে, মানুষের পাঠযোগ্য বিন্যাসে সোর্স ফাইলটি দেখানোর জন্য।

8 আপনার ওয়েবসাইট মোবাইল বন্ধুত্বপূর্ণ? এটি এখানে দেখুন

Chrome Dev Tools আমাদের একটি ওয়েবসাইট মোবাইল বন্ধুত্বপূর্ণ কিনা তা যাচাই করতে আমাদের অনুমতি দেয়। আপনি আপনার ডিভাইস বিভিন্ন ডিভাইসের উপর কিভাবে দেখায় চেক করতে পারেন। Chrome Dev সরঞ্জামগুলিতে উপরে যান এবং ইমুলেশন ট্যাবের অধীনে যান, আপনি বিভিন্ন ডিভাইসগুলি ফাইল করতে পারেন। আপনার ডিভাইসটি নির্বাচন করুন এবং পরীক্ষা করুন যে আপনার ওয়েবসাইটটি সেই ডিভাইসে কেমন দেখায়।

আরো তথ্যের জন্য, নিম্নলিখিত ভিডিওটি দেখুন।

9 অনুকরণ সেন্সর এবং ভৌগোলিক অবস্থান

আপনি এমনকি স্পর্শ পর্দা এবং accelerometers মত সেন্সর অনুকরণ করতে পারেন। আপনি এমনকি ভৌগোলিক অবস্থান অনুকরণ করতে পারেন। এটি করার জন্য, ইমুলেশন -> সেন্সরগুলির উপরে যান।

10 বর্তমান শব্দ পরবর্তী ঘটনার নির্বাচন করুন

যদি আপনি শব্দটি প্রতিস্থাপন করতে চান, তাহলে শব্দটি নির্বাচন করুন এবং Ctrl + D নির্বাচিত শব্দটির পরবর্তী ঘটনার নির্বাচন করতে নির্বাচন করুন। আপনি এক শট এ এর ​​সব ঘটনা মধ্যে যে শব্দ সম্পাদনা করতে পারেন।

11 রঙের বিন্যাস পরিবর্তন করুন

শুধু Shift + ক্লিক করুন RGBA, হেক্সাডেসিমাল এবং এইচএসএল ফর্ম্যাটিংয়ের মধ্যে পরিবর্তনের জন্য রঙ পূর্বরূপ দেখুন।

12 কর্মক্ষেত্র

এর মাধ্যমে স্থানীয় ফাইলগুলিতে পরিবর্তন যোগ করুনআমরা সোর্স ফাইলগুলি সম্পাদনা করতে এবং CSS, Java স্ক্রিপ্ট এবং Chrome Dev সরঞ্জামগুলির অন্য ফাইলগুলিতে কিছু পরিবর্তন করতে সক্ষম। স্থানীয় ফাইলগুলিতে এই পরিবর্তনগুলি যোগ করার জন্য, এখানে কাজগুলি থেকে ডিস্কের ফাইলগুলিতে পরিবর্তনগুলি অনুলিপি করার প্রয়োজন নেই। Chrome Dev সরঞ্জামগুলি আপনাকে ফাইলগুলি মেলানোর এবং স্থানীয় ফাইলটি ডেভেলট সরঞ্জামগুলিতে করা পরিবর্তনগুলির সাথে আপডেট করার অনুমতি দেয়। এটি সম্পন্ন করার জন্য সোর্সগুলির ট্যাবে বাম দিকের উৎস ফাইলটিতে ডান ক্লিক করুন এবং ফর্ডারকে কর্মক্ষেত্রে যুক্ত করুন নির্বাচন করুন।

কর্মপথগুলিতে আরও তথ্যের জন্য, Chrome.com এ যান।