ওয়েবসাইট ইস্যুগুলির সমস্যা সমাধানের জন্য কীভাবে ক্রোম ডিভটুলগুলি ব্যবহার করবেন

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

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

Chrome বিকাশকারী সরঞ্জাম কীভাবে কাজ করে

ক্রোম ডেভটুলগুলি আপনাকে একটি ওয়েবসাইটে এর ত্রুটি কনসোল এবং অন্যান্য ডিবাগিং এবং পর্যবেক্ষণ সরঞ্জামগুলির মাধ্যমে সমস্যার সমাধান করতে দেয়। ডেভটুলগুলি সামনের লুপগুলিকে প্রকাশ করে এবং আপনার ওয়েবসাইটটি মোবাইল এবং ট্যাবলেট ডিভাইসে কীভাবে প্রদর্শিত হয় তা পর্যবেক্ষণ করতে দেয়।

ডেভটুলগুলির সাহায্যে আপনি জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএসের মতো কোনও ওয়েবসাইটের কোডে রিয়েল-টাইম সম্পাদনাগুলি পরিচালনা করতে পারেন এবং আপনার পরিবর্তনের তাত্ক্ষণিক ফলাফল পেতে পারেন।

আপনি দেবটুলগুলির মাধ্যমে যে পরিবর্তনগুলি করেন তা ওয়েবসাইটে স্থায়ীভাবে প্রভাবিত করে না। তারা কেবলমাত্র অস্থায়ীভাবে প্রত্যাশিত ফলাফলটি এমনভাবে প্রদর্শন করে যেন আপনি সেগুলি প্রকৃত উত্স কোডে প্রয়োগ করেছেন। এটি আপনাকে আপনার ওয়েবসাইটকে আরও দ্রুত লোড করার উপায়গুলি কার্যকর করতে দেয় এবং বাগগুলি লোড করা সহজ করে তোলে।

কীভাবে Chrome ডিভাইসগুলিতে অ্যাক্সেস করবেন

আপনি বিভিন্ন উপায়ে ক্রোম ডেভটুলগুলি অ্যাক্সেস করতে পারেন। ম্যাক ওএসে শর্টকাট পদ্ধতিতে বিকাশকারী সরঞ্জামগুলি খুলতে, Cmd + Opt + I টিপুন। আপনি যদি উইন্ডোজ ওএস ব্যবহার করছেন তবে আপনার কীবোর্ডের Ctrl + Shift + I কীগুলি চাপুন ।

বিকল্পভাবে, আপনি পর্দার উপরের ডানদিকে কোণায় তিনটি বিন্দুতে ক্লিক করে ক্রোম বিকাশকারী সরঞ্জামগুলি অ্যাক্সেস করতে পারেন। আরও সরঞ্জামগুলিতে যান এবং বিকাশকারী সরঞ্জামগুলি নির্বাচন করুন। অন্য বিকল্পটি হ'ল ওয়েব পৃষ্ঠায় ডান ক্লিক করুন এবং পরিদর্শন বিকল্পে ক্লিক করুন।

ওয়েবসাইট নির্ণয়ের জন্য ক্রোম বিকাশকারী সরঞ্জাম

ক্রোম ডেভটুলগুলি ওয়েবপৃষ্ঠাটিকে ঝাপটানো ও সমস্যা সমাধানের বিভিন্ন উপায় সরবরাহ করে। দেবটুলগুলি আপনাকে কীভাবে সাহায্য করতে পারে তার কয়েকটি দেখুন।

আপনার ওয়েবসাইটটি স্মার্টফোনে কীভাবে দেখেছে তা দেখুন

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

ধন্যবাদ, কোনও ওয়েবপৃষ্ঠার পর্দার আকার নির্ধারণের পাশাপাশি ক্রোম ডেভটুলস আপনাকে বিভিন্ন মোবাইল স্ক্রিনের ধরণ এবং সংস্করণগুলির মধ্যেও স্যুইচ করতে দেয়।

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

কোনও ওয়েবপৃষ্ঠার উত্স ফাইলগুলিতে অ্যাক্সেস করুন

আপনি ক্রোম ডেভটুলগুলির মাধ্যমে একটি ওয়েবপৃষ্ঠা তৈরি করা ফাইলগুলি অ্যাক্সেস করতে পারেন। এই ফাইলগুলি অ্যাক্সেস করতে, ডিভুলস মেনুর উপরের অংশে উত্স বিকল্পে ক্লিক করুন। এটি ওয়েবসাইটটির ফাইল সিস্টেম উন্মোচিত করে এবং আপনাকে সম্পাদনাও দেয়।

আপনি উত্স ফাইলগুলিও অনুসন্ধান করতে পারেন যা আপনি যখন অনেক সংস্থানযুক্ত ওয়েবপৃষ্ঠার সাথে কাজ করছেন তখন সহায়ক হতে পারে। ডেভটুলগুলির মাধ্যমে উত্স ফাইলটি অনুসন্ধান করতে, কনসোলের ঠিক উপরে অনুসন্ধান বিকল্পটি ক্লিক করুন।

তবে, আপনি যদি অনুসন্ধান বিকল্পটি না খুঁজে পান তবে কীবোর্ড শর্টকাটগুলি এর চেয়ে ভাল বিকল্প। ম্যাক ওএসে, উত্স ফাইলটি অনুসন্ধান করতে Cmd + Opt + F কী টিপুন। আপনি যদি উইন্ডোজ ওএস ব্যবহার করে থাকেন তবে উত্স ফাইল অনুসন্ধান বারটি অ্যাক্সেস করতে Ctrl + Shift + F কী টিপুন।

কোনও ওয়েবপৃষ্ঠায় সরাসরি সম্পাদনা করুন

ডেভটুলগুলি ব্যবহারের অন্যতম প্রধান উদ্দেশ্য হ'ল ওয়েবপৃষ্ঠায় উপাদানগুলির তাত্ক্ষণিক জাল সম্পাদনা করা । একবার আপনি বিকাশকারী সরঞ্জামগুলিতে স্যুইচ হয়ে গেলে আপনি উপাদানগুলির বিকল্পটিতে ক্লিক করে কোনও ওয়েবসাইটের এইচটিএমএল সামগ্রী সম্পাদনা করতে পারেন। তারপরে আপনি কোড সম্পাদকের মধ্যে যে কোনও পয়েন্টে পরিবর্তনগুলি প্রয়োগ করতে চান তার ডান ক্লিক করুন এবং এইচটিএমএল হিসাবে সম্পাদনা নির্বাচন করুন ।

ইনলাইন নয় এমন সিএসএস বৈশিষ্ট্যগুলি সম্পাদনা করতে, উত্স নির্বাচন করুন। এরপরে, আপনি যে সিএসএস ফাইলটি সম্পাদনা করতে চান তা নির্বাচন করুন। লাইভ এডিট সম্পাদনের জন্য কোড কনসোলের মধ্যে আপনার পছন্দ অনুসারে আপনার কার্সারটি রাখুন। এটি করার ফলে আপনি ওয়েবপৃষ্ঠায় প্রয়োগ করা স্টাইলের যে কোনও পরিবর্তন সম্পর্কে তাত্ক্ষণিক প্রতিক্রিয়া জানায়।

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

ডিভটুলস কনসোল দিয়ে জাভাস্ক্রিপ্ট কোড ডিবাগ করুন

জাভাস্ক্রিপ্ট ডিবাগ করার সর্বোত্তম উপায়গুলির মধ্যে একটি হ'ল ক্রোমের বিকাশকারী সরঞ্জামগুলি। এটি আপনাকে অবৈধ স্ক্রিপ্টগুলির পাশাপাশি সরাসরি বাগের সঠিক অবস্থানের প্রতিবেদন দেয়।

জাভাস্ক্রিপ্ট সহ কোনও ওয়েবসাইট ডিজাইনের সময় সর্বদা খোলা রাখা ভাল অনুশীলন good উদাহরণস্বরূপ, জাভাস্ক্রিপ্টের কনসোল.লগ () নির্দেশটি একটি সেটে চালানো কমান্ড চালনা ডিফল্টস কনসোলে সেই লগের ফলাফল প্রদর্শন করে যদি প্রোগ্রামটি সফলভাবে চালিত হয়।

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

একটি ডাটাবেস থেকে রিসোর্স লোডিং নিরীক্ষণ

জাভাস্ক্রিপ্ট ডিবাগ করা ছাড়াও, কনসোল আপনাকে এমন সংস্থানগুলির বিশদও দিতে পারে যা ওয়েবসাইটের ডাটাবেস থেকে সঠিকভাবে লোড হচ্ছে না।

যদিও ব্যাকএন্ড সমস্যাগুলি ডিবাগ করার জন্য এটি সর্বদা সর্বোত্তম উপায় নয় তবে এটি আপনাকে এখনও বলবে যে সংস্থানগুলি সেই উপাদানগুলির একটি ডাটাবেস ক্যোয়ারী চালানোর পরে 404 ত্রুটি ফিরিয়ে দিচ্ছে।

সম্পর্কিত: প্রচলিত ওয়েবসাইট ত্রুটি এবং এর অর্থ কী

Chrome বিকাশকারী সরঞ্জামগুলির ওরিয়েন্টেশন স্যুইচ করুন

ক্রোম বিকাশকারী সরঞ্জামগুলির অবস্থান পরিবর্তন করতে, ডিভটুলগুলির মধ্যে তিনটি মেনু ডটে ক্লিক করুন (ব্রাউজারে মূলটি নয়)। তারপরে ডক সাইড অপশন থেকে আপনার পছন্দসই অবস্থানটি নির্বাচন করুন।

Chrome DevTools এক্সটেনশানগুলি ইনস্টল করুন

আপনি Chrome ডিভাইসগুলির সাথে কাজ করে এমন ভাষা বা ফ্রেমওয়ার্ক-নির্দিষ্ট এক্সটেনশানগুলিও ইনস্টল করতে পারেন। এই এক্সটেনশানগুলি ইনস্টল করা আপনাকে আরও কার্যকরভাবে আপনার ওয়েবপৃষ্ঠাটি ডিবাগ করতে দেয়।

আপনি ক্রোমের ফিচারযুক্ত ডেভটুলগুলি এক্সটেনশানস গ্যালারীটিতে ক্রোম ডেভটুলগুলির জন্য উপলব্ধ এক্সটেনশনের একটি তালিকা অ্যাক্সেস করতে পারেন।

কোনও ওয়েবসাইটে সুরক্ষা ইস্যুগুলির জন্য পরীক্ষা করুন

ওয়েব সিকিউরিটি শংসাপত্রের প্রাপ্যতা এবং অন্যদের মধ্যে সংযোগটি কতটা সুরক্ষিত রয়েছে তার মতো পরামিতিগুলির উপর ভিত্তি করে ক্রোম ডেভটুলস আপনাকে মূল্যায়ন করতে দেয় যে আপনার ওয়েবসাইটটি কী সুরক্ষিত। আপনার ওয়েবসাইটটি সুরক্ষিত কিনা তা পরীক্ষা করতে, ডিভুলসগুলির শীর্ষে সুরক্ষা বিকল্পে ক্লিক করুন।

সুরক্ষা ট্যাব আপনাকে আপনার ওয়েবসাইটের সুরক্ষা বিবরণগুলির একটি ওভারভিউ দেয় এবং আপনাকে যে কোনও সম্ভাব্য হুমকি বলে।

আপনার ওয়েবসাইট নিরীক্ষণ

ক্রোম ডেভটুলগুলির একটি বৈশিষ্ট্য রয়েছে যা আপনাকে নির্দিষ্ট পরামিতিগুলির উপর ভিত্তি করে আপনার ওয়েবসাইটের সামগ্রিক কর্মক্ষমতা পরীক্ষা করতে দেয়।

এই বৈশিষ্ট্যটি অ্যাক্সেস করতে, ডিভুলস উইন্ডোর শীর্ষে বাতিঘর বিকল্পটি নির্বাচন করুন। এরপরে, আপনি যা প্যারামিটারগুলি পরীক্ষা করতে চান তা নির্বাচন করুন, তারপরে আপনার ওয়েবপৃষ্ঠাটি বিভিন্ন প্ল্যাটফর্মগুলিতে কীভাবে সম্পাদন করে তা দেখতে মোবাইল বা ডেস্কটপ বিকল্পগুলিতে টিক দিন।

এরপরে, আপনি আগে নির্বাচিত পরামিতিগুলির উপর ভিত্তি করে আপনার ওয়েবপৃষ্ঠার বিশ্লেষণ চালানোর জন্য জেনারেট প্রতিবেদনে ক্লিক করুন।

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

Chrome DevTools এর সুবিধা নিন

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

আপনি এই নিবন্ধে আলোচনা করিনি এমন কিছু অন্যান্য বিকল্পও আবিষ্কার করতে পারেন। সুতরাং, উপলভ্য বৈশিষ্ট্যগুলির সাথে চারপাশে খেলতে নির্দ্বিধায়। তদতিরিক্ত, এই বৈশিষ্ট্যগুলি টুইট করা কোনও ওয়েবসাইটকে কিছুটা ক্ষতি করে না।