Home-theater-designers
ক্রোম DevTools ডেভেলপারদের জন্য একটি অপরিহার্য সম্পদ। যদিও অন্যান্য ব্রাউজারগুলি বেশ সহজ সমস্যা সমাধানের সরঞ্জামগুলি সরবরাহ করে, ক্রোম ডেভটুলস এর বহু-কার্যকরী ইন্টারফেস এবং জনপ্রিয়তার কারণে আপনার মনোযোগের মূল্য।
ডিবাগিং সরঞ্জামগুলির শক্তিশালী স্যুটের কারণে ক্রোম ডেভেলপারদের কাছে সবচেয়ে জনপ্রিয় ব্রাউজার। Chrome DevTools ব্যবহার করা সহজ, কিন্তু এর থেকে সর্বাধিক উপার্জন করতে এটি কীভাবে কাজ করে তা আপনাকে বুঝতে হবে।
ক্রোম ডেভেলপার টুল কিভাবে কাজ করে
Chrome DevTools আপনাকে একটি ওয়েবসাইটে এরর কনসোল এবং অন্যান্য ডিবাগিং এবং মনিটরিং টুলের মাধ্যমে সমস্যার সমাধান করতে দেয়। DevTools ব্যবহার করলে ফ্রন্টএন্ড ফাঁকফোকরগুলি প্রকাশ পায় এবং আপনাকে মোবাইল এবং ট্যাবলেট ডিভাইসে আপনার ওয়েবসাইট কিভাবে প্রদর্শিত হয় তা পর্যবেক্ষণ করতে দেয়।
DevTools এর সাহায্যে, আপনি জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএসের মতো একটি ওয়েবসাইটের কোডে রিয়েল-টাইম সম্পাদনা করতে পারেন এবং আপনার পরিবর্তনের তাত্ক্ষণিক ফলাফল পেতে পারেন।
DevTools এর মাধ্যমে আপনি যে পরিবর্তনগুলি করেন তা স্থায়ীভাবে ওয়েবসাইটকে প্রভাবিত করে না। তারা কেবল সাময়িকভাবে প্রত্যাশিত ফলাফল প্রদর্শন করে যেন আপনি সেগুলি প্রকৃত সোর্স কোডে প্রয়োগ করেছেন। এটি আপনাকে আপনার ওয়েবসাইটকে আরও দ্রুত লোড করার উপায়গুলি খুঁজে বের করতে দেয় এবং বাগগুলি লোহার করা সহজ করে তোলে।
কিভাবে Chrome DevTools অ্যাক্সেস করবেন
আপনি বিভিন্ন উপায়ে Chrome DevTools অ্যাক্সেস করতে পারেন। ম্যাক ওএস -এ শর্টকাট পদ্ধতিতে ডেভেলপার টুলস খুলতে, টিপুন Cmd + Opt + I । আপনি যদি উইন্ডোজ অপারেটিং সিস্টেম ব্যবহার করেন, তাহলে আঘাত করুন Ctrl + Shift + I আপনার কীবোর্ডের কী।
বিকল্পভাবে, আপনি পর্দার উপরের ডানদিকে তিনটি বিন্দুতে ক্লিক করে ক্রোম বিকাশকারী সরঞ্জামগুলি অ্যাক্সেস করতে পারেন। মাথা আরো সরঞ্জাম এবং নির্বাচন করুন ডেভেলপার টুলস । আরেকটি বিকল্প হল ওয়েব পেজে ডান ক্লিক করুন এবং এ ক্লিক করুন পরিদর্শন বিকল্প
ওয়েবসাইট নির্ণয়ের জন্য ক্রোম ডেভেলপার টুল ব্যবহার করা
Chrome DevTools একটি ওয়েবপৃষ্ঠাকে টুইক এবং সমস্যা সমাধানের বিভিন্ন উপায় প্রদান করে। চলুন দেখে নেওয়া যাক DevTools আপনাকে সাহায্য করতে পারে এমন কিছু উপায়।
আপনার ওয়েবসাইটটি স্মার্টফোনে কেমন দেখাচ্ছে তা দেখুন
একবার আপনি আপনার ক্রোম ব্রাউজারকে ডেভেলপার মোডে স্যুইচ করলে, এটি আপনার ওয়েবপেজের অর্ধ-আকারের সংস্করণ রেন্ডার করে। যাইহোক, এটি আপনাকে স্মার্টফোন বা ট্যাবলেটে দেখতে কেমন হবে তার বাস্তব দৃশ্য দেবে না।
সৌভাগ্যক্রমে, একটি ওয়েবপৃষ্ঠার স্ক্রিন সাইজ সেট করার পাশাপাশি, Chrome DevTools আপনাকে বিভিন্ন মোবাইল স্ক্রিনের ধরন এবং সংস্করণের মধ্যেও স্যুইচ করতে দেয়।
সেই বিকল্পটি অ্যাক্সেস করতে, টগল করুন পরিদর্শন মোড. পরবর্তী, এ ক্লিক করুন প্রতিক্রিয়াশীল DevTools এর উপরের বাম কোণে ড্রপ-ডাউন করুন এবং আপনার পছন্দের মোবাইল ডিভাইসটি নির্বাচন করুন। ওয়েবপৃষ্ঠাটি আপনার নির্বাচিত মোবাইল ডিভাইসের আকার অনুসারে রেন্ডার এবং সমন্বয় করে।
আইএসও থেকে বুটেবল ফ্ল্যাশ ড্রাইভ তৈরি করুন
একটি ওয়েবপেজের সোর্স ফাইল অ্যাক্সেস করুন
আপনি Chrome DevTools এর মাধ্যমে একটি ওয়েবপৃষ্ঠা তৈরি করে এমন ফাইলগুলি অ্যাক্সেস করতে পারেন। এই ফাইলগুলি অ্যাক্সেস করতে, এ ক্লিক করুন সূত্র DevTools মেনুর উপরের অংশে বিকল্প। এটি ওয়েবসাইটের ফাইল সিস্টেম প্রকাশ করে এবং আপনাকে সম্পাদনাও দেয়।
আপনি সোর্স ফাইলগুলিও অনুসন্ধান করতে পারেন, যা সহায়ক হতে পারে যখন আপনি এমন একটি ওয়েবপৃষ্ঠার সাথে কাজ করছেন যেখানে অনেক সম্পদ রয়েছে। DevTools এর মাধ্যমে একটি সোর্স ফাইল অনুসন্ধান করতে, এ ক্লিক করুন অনুসন্ধান করুন কনসোলের ঠিক উপরে বিকল্প।
যাইহোক, যদি আপনি এটি খুঁজে না পান অনুসন্ধান করুন বিকল্প, একটি ভাল বিকল্প হল কীবোর্ড শর্টকাট ব্যবহার করা। ম্যাক ওএসে, টিপুন Cmd + Opt + F একটি সোর্স ফাইল অনুসন্ধান করার জন্য কী। আপনি যদি উইন্ডোজ অপারেটিং সিস্টেম ব্যবহার করেন, তাহলে টিপুন Ctrl + Shift + F সোর্স ফাইল সার্চ বার অ্যাক্সেস করার কী।
একটি ওয়েবপেজে লাইভ এডিট সম্পাদন করুন
DevTools ব্যবহারের মূল উদ্দেশ্যগুলির মধ্যে একটি হল একটি ওয়েবপেজে উপাদানগুলির তাত্ক্ষণিক জাল সম্পাদনা । একবার আপনি ডেভেলপার সরঞ্জামগুলিতে স্যুইচ করলে, আপনি একটি ওয়েবসাইটের HTML বিষয়বস্তু এ ক্লিক করে সম্পাদনা করতে পারেন উপাদান বিকল্প তারপরে, আপনি কোড এডিটরের মধ্যে পরিবর্তনগুলি প্রয়োগ করতে চান এমন কোনও পয়েন্টে ডান ক্লিক করুন এবং নির্বাচন করুন HTML হিসাবে সম্পাদনা করুন ।
সিএসএস বৈশিষ্ট্যাবলী যা ইনলাইন নয় তা সম্পাদনা করতে, নির্বাচন করুন সূত্র । পরবর্তী, আপনি যে CSS ফাইলটি সম্পাদনা করতে চান তা নির্বাচন করুন। লাইভ এডিট করার জন্য কোড কনসোলের মধ্যে আপনার পছন্দের লাইনে আপনার কার্সার রাখুন। এটি করলে আপনি ওয়েবপৃষ্ঠায় যে কোনো শৈলী পরিবর্তনের জন্য তাত্ক্ষণিক প্রতিক্রিয়া পাবেন।
মনে রাখবেন যে যখন আপনি DevTools এর মাধ্যমে একটি পৃষ্ঠা সম্পাদনা করেন, আপনার ব্রাউজারে পৃষ্ঠাটি পুনরায় লোড করলে এটি তার আসল রূপে ফিরে আসে এবং সম্পাদনাটি শুধুমাত্র আপনার কাছে দৃশ্যমান হয়। DevTools এর মাধ্যমে সম্পাদনা না হয় অন্য ব্যবহারকারীদের জন্য মসৃণ চলমান বা সেই ওয়েবসাইটের ব্যবহারকে প্রভাবিত করে।
DevTools কনসোলের সাথে জাভাস্ক্রিপ্ট কোড ডিবাগ করুন
জাভাস্ক্রিপ্ট ডিবাগ করার অন্যতম সেরা উপায় হল ক্রোমের ডেভেলপার টুল ব্যবহার করা। এটি আপনাকে অবৈধ স্ক্রিপ্টগুলির সরাসরি প্রতিবেদন এবং বাগের সঠিক অবস্থান দেয়।
জাভাস্ক্রিপ্ট দিয়ে ওয়েবসাইট ডিজাইন করার সময় সর্বদা DevTools খোলা রাখা ভাল অভ্যাস। উদাহরণস্বরূপ, চলমান console.log () নির্দেশাবলীর একটি সেটে জাভাস্ক্রিপ্টের কমান্ড ডেভটুলস কনসোলে সেই লগের ফলাফল প্রদর্শন করে যদি প্রোগ্রাম সফলভাবে চলে।
ডিফল্টরূপে, কনসোল আপনার ওয়েবসাইটে কোন জাভাস্ক্রিপ্ট সমস্যা রিপোর্ট করে। আপনি DevTools এর নিচের অংশে কনসোলটি খুঁজে পেতে পারেন বা এটিতে ক্লিক করে অ্যাক্সেস করতে পারেন কনসোল Chrome DevTools উইন্ডোর শীর্ষে বিকল্প।
একটি ডাটাবেস থেকে রিসোর্স লোডিং মনিটর করুন
জাভাস্ক্রিপ্ট ডিবাগ করার পাশাপাশি, কনসোল আপনাকে সেই সম্পদের বিস্তারিতও দিতে পারে যা ওয়েবসাইটের ডাটাবেস থেকে সঠিকভাবে লোড হচ্ছে না।
যদিও ব্যাকএন্ড ইস্যুগুলি ডিবাগ করার জন্য এটি সর্বদা সর্বোত্তম উপায় নয়, এটি এখনও আপনাকে বলে যে কোন সংস্থানগুলি ফিরে আসছে 404 সেই উপাদানগুলির একটি ডাটাবেস ক্যোয়ারী চালানোর পরে ত্রুটি।
সম্পর্কিত: সাধারণ ওয়েবসাইট ত্রুটি এবং তারা কী বোঝায়
ক্রোম ডেভেলপার টুলসের ওরিয়েন্টেশন পরিবর্তন করুন
ক্রোম ডেভেলপার সরঞ্জামগুলির অবস্থান পরিবর্তন করতে, DevTools (ব্রাউজারে প্রধান নয়) এর মধ্যে তিনটি মেনু বিন্দুতে ক্লিক করুন। তারপর থেকে আপনার পছন্দের অবস্থান নির্বাচন করুন ডক সাইড বিকল্প
Chrome DevTools এক্সটেনশন ইনস্টল করুন
আপনি Chrome DevTools এর সাথে কাজ করে এমন ভাষা বা ফ্রেমওয়ার্ক-নির্দিষ্ট এক্সটেনশনগুলিও ইনস্টল করতে পারেন। এই এক্সটেনশানগুলি ইনস্টল করা আপনাকে আপনার ওয়েবপেজটি আরও দক্ষতার সাথে ডিবাগ করতে দেয়।
আপনি Chrome এর Chrome DevTools এর জন্য উপলব্ধ এক্সটেনশনের একটি তালিকা অ্যাক্সেস করতে পারেন বৈশিষ্ট্যযুক্ত DevTools এক্সটেনশন গ্যালারি
একটি ওয়েবসাইটে নিরাপত্তা সংক্রান্ত সমস্যার জন্য পরীক্ষা করুন
ক্রোম ডেভটুলস আপনাকে উপলব্ধি করতে দেয় যে আপনার ওয়েবসাইট কতটা সুরক্ষিত, যেমন প্রাপ্যতার উপর নির্ভর করে ওয়েব নিরাপত্তা সার্টিফিকেট এবং অন্যদের মধ্যে সংযোগ কতটা নিরাপদ। আপনার ওয়েবসাইট নিরাপদ কিনা তা পরীক্ষা করতে, এ ক্লিক করুন নিরাপত্তা DevTools এর শীর্ষে বিকল্প।
দ্য নিরাপত্তা ট্যাব আপনাকে আপনার ওয়েবসাইটের নিরাপত্তা বিবরণ সম্পর্কে একটি সংক্ষিপ্ত বিবরণ দেয় এবং আপনাকে কোন সম্ভাব্য হুমকি বলে।
আপনার ওয়েবসাইট অডিট করুন
Chrome DevTools এর একটি বৈশিষ্ট্য রয়েছে যা আপনাকে নির্দিষ্ট পরামিতিগুলির উপর ভিত্তি করে আপনার ওয়েবসাইটের সামগ্রিক কর্মক্ষমতা পরীক্ষা করতে দেয়।
সেই বৈশিষ্ট্যটি অ্যাক্সেস করতে, নির্বাচন করুন বাতিঘর DevTools উইন্ডোর শীর্ষে বিকল্প। পরবর্তী, আপনি যে প্যারামিটারগুলি চেক করতে চান তা নির্বাচন করুন, তারপরে যেকোন একটিতে টিক দিন মুঠোফোন অথবা ডেস্কটপ আপনার ওয়েবপেজ বিভিন্ন প্ল্যাটফর্মে কিভাবে কাজ করে তা দেখার বিকল্প।
পরবর্তী, ক্লিক করুন রিপোর্ট তৈরি করুন আপনার পূর্বে নির্বাচিত প্যারামিটারগুলির উপর ভিত্তি করে আপনার ওয়েবপেজের বিশ্লেষণ চালানোর জন্য।
আপনি ক্লিক করে একটি ওয়েবসাইটের রান-টাইম বা লোডিং পারফরম্যান্সও মূল্যায়ন করতে পারেন কর্মক্ষমতা বিকল্প একটি পরীক্ষা চালানোর জন্য, এর পাশের আইকনে ক্লিক করুন রেকর্ড বাটনে ক্লিক করুন রান-টাইম বিশ্লেষণ করার বিকল্প। বিকল্পভাবে, লোড-টাইম পারফরম্যান্স মূল্যায়নের জন্য এটির নীচে পুনরায় লোড বোতামে ক্লিক করুন। ক্লিক করুন থামুন বিশ্লেষক থামাতে এবং ফলাফল প্রদর্শন করতে।
Chrome DevTools এর সুবিধা নিন
আপনার কিসের জন্য এটি প্রয়োজন তার উপর নির্ভর করে, Chrome DevTools আপনাকে কেবল সাধারণ ওয়েবসাইট ডিবাগিংয়ের চেয়ে আরও বেশি কিছু করতে দেয়। সৌভাগ্যক্রমে, DevTools সব দক্ষতা স্তরের প্রোগ্রামারদের জন্য ব্যবহার করা সহজ। এমনকি আপনি যে ওয়েবসাইটগুলিতে যান তার সোর্স কোড দেখে আপনি ওয়েবসাইট ফ্রন্টএন্ড ডেভেলপমেন্টের কিছু বুনিয়াদি শিখতে পারেন।
কিভাবে ইউএসবি থেকে উইন্ডোজ ১০ ডাউনলোড করবেন
আপনি এই নিবন্ধে আলোচনা করেননি এমন কিছু অন্যান্য বিকল্পও আবিষ্কার করতে পারেন। সুতরাং, উপলব্ধ বৈশিষ্ট্যগুলির সাথে নির্দ্বিধায় খেলুন। এছাড়াও, এই বৈশিষ্ট্যগুলি টুইক করা কোনও ওয়েবসাইটের কিছুটা ক্ষতি করে না।
শেয়ার করুন শেয়ার করুন টুইট ইমেইল রাস্পবেরি পাইতে কীভাবে ক্রোম ওএস ব্যবহার করবেনএকটি Chromebook বহন করতে পারে না? রাস্পবিয়ানের বিকল্প খুঁজছেন? আপনার রাস্পবেরি পাইতে কীভাবে ক্রোম ওএসের একটি সংস্করণ ইনস্টল করবেন তা এখানে।
পরবর্তী পড়ুন সম্পর্কিত বিষয়- ইন্টারনেট
- প্রোগ্রামিং
- এইচটিএমএল
- ওয়েব ডেভেলপমেন্ট
- জাভাস্ক্রিপ্ট
- গুগল ক্রম
আইডোউ স্মার্ট প্রযুক্তি এবং উত্পাদনশীলতা সম্পর্কে উত্সাহী। তার অবসর সময়ে, তিনি বিরক্তিকর যখন কোডিং এবং দাবা বোর্ডে স্যুইচ করে ঘুরে বেড়ান, তবে তিনি একবারে রুটিন থেকে বিরত থাকতে পছন্দ করেন। মানুষকে আধুনিক প্রযুক্তির পথ দেখানোর জন্য তার আবেগ তাকে আরও লেখার জন্য অনুপ্রাণিত করে।
Idowu Omisola থেকে আরোআমাদের নিউজলেটার সদস্যতা
প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন