সোর্স প্যানেল ওভারভিউ

Kayce Basques

Sofia Emelianova

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

সংক্ষিপ্ত বিবরণ

সোর্সেস প্যানেল আপনাকে নিম্নলিখিত কাজগুলো করতে দেয়:

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

সোর্স প্যানেলটি খুলুন

সোর্সেস প্যানেলটি খুলতে, এই ধাপগুলো অনুসরণ করুন:

1. ডেভটুলস খুলুন ।
2. নিম্নলিখিত বোতাম টিপে কমান্ড মেনু খুলুন:
   • ম্যাকওএস: কমান্ড + শিফট + পি
   • উইন্ডোজ, লিনাক্স, ক্রোমওএস: কন্ট্রোল + শিফট + পি
3. sources টাইপ করা শুরু করুন, Show Sources panel নির্বাচন করুন এবং Enter চাপুন।

বিকল্পভাবে, উপরের ডান কোণায়, আরও বিকল্প > আরও সরঞ্জাম > উৎস নির্বাচন করুন।

ফাইলগুলি দেখুন

পৃষ্ঠাটিতে লোড হওয়া সমস্ত রিসোর্স দেখতে 'পৃষ্ঠা' ট্যাবে ক্লিক করুন।

পেজ ট্যাবটি যেভাবে সাজানো হয়েছে:

• শীর্ষ-স্তর, যেমন উপরের স্ক্রিনশটে ' top দেখানো হয়েছে, একটি HTML ফ্রেমকে বোঝায়। আপনি যে কোনো পৃষ্ঠা ভিজিট করলেই top দেখতে পাবেন। top মূল ডকুমেন্ট ফ্রেমকে নির্দেশ করে।
• দ্বিতীয় স্তর, যেমন উপরের স্ক্রিনশটে developers.google.com , একটি অরিজিনকে প্রতিনিধিত্ব করে।
• তৃতীয়-স্তর, চতুর্থ-স্তর, ইত্যাদি সেই অরিজিন থেকে লোড হওয়া ডিরেক্টরি এবং রিসোর্সসমূহকে নির্দেশ করে। উদাহরণস্বরূপ, উপরের স্ক্রিনশটে, devsite-googler-button রিসোর্সটির সম্পূর্ণ পাথ হলো developers.google.com/_static/19aa27122b/css/devsite-googler-button ।

এডিটর ট্যাবে কোনো ফাইলের বিষয়বস্তু দেখতে পেজ ট্যাবে থাকা ফাইলটিতে ক্লিক করুন। আপনি যেকোনো ধরনের ফাইল দেখতে পারেন। ছবির ক্ষেত্রে, আপনি সেটির একটি প্রিভিউ দেখতে পাবেন।

CSS এবং JavaScript সম্পাদনা করুন

CSS এবং JavaScript সম্পাদনা করতে এডিটর ট্যাবে ক্লিক করুন। আপনার নতুন কোড চালানোর জন্য DevTools পৃষ্ঠাটি আপডেট করে দেবে।

এডিটরটি আপনাকে ডিবাগ করতেও সাহায্য করে। উদাহরণস্বরূপ, এটি সিনট্যাক্স ত্রুটি এবং অন্যান্য সমস্যা, যেমন—ব্যর্থ CSS @import ও url() স্টেটমেন্ট এবং অবৈধ URL সহ HTML href অ্যাট্রিবিউটের নিচে দাগ দেয় এবং পাশে ইনলাইন এরর টুলটিপ দেখায়।

আপনি যদি কোনো এলিমেন্টের background-color পরিবর্তন করেন, তাহলে দেখবেন যে পরিবর্তনটি সঙ্গে সঙ্গে কার্যকর হয়ে যায়।

জাভাস্ক্রিপ্ট পরিবর্তন কার্যকর করতে, Command + S (Mac) অথবা Control + S (Windows, Linux) চাপুন। DevTools কোনো স্ক্রিপ্ট পুনরায় চালায় না, তাই শুধুমাত্র ফাংশনের ভেতরে করা জাভাস্ক্রিপ্ট পরিবর্তনগুলোই কার্যকর হয়। উদাহরণস্বরূপ, লক্ষ্য করুন কীভাবে console.log('A') রান হয় না, অথচ console.log('B') রান হয়।

পরিবর্তনটি করার পর যদি DevTools পুরো স্ক্রিপ্টটি পুনরায় চালাত, তাহলে A লেখাটি কনসোলে লগ হতো।

আপনি যখন পৃষ্ঠাটি পুনরায় লোড করেন, তখন DevTools আপনার CSS এবং JavaScript পরিবর্তনগুলি মুছে ফেলে। আপনার ফাইল সিস্টেমে পরিবর্তনগুলি কীভাবে সংরক্ষণ করবেন তা জানতে 'একটি ওয়ার্কস্পেস সেট আপ করুন' দেখুন।

স্নিপেট তৈরি করুন, সংরক্ষণ করুন এবং চালান

স্নিপেট হলো এমন স্ক্রিপ্ট যা আপনি যেকোনো পেজে চালাতে পারেন। কল্পনা করুন যে, একটি পেজে jQuery লাইব্রেরি যুক্ত করার জন্য আপনি কনসোলে বারবার নিম্নলিখিত কোডটি টাইপ করছেন, যাতে আপনি কনসোল থেকেই jQuery কমান্ডগুলো চালাতে পারেন:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

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

একটি স্নিপেট চালাতে:

• Snippets ট্যাবে ফাইলটি খুলুন এবং Run-এ ক্লিক করুন। নীচের অ্যাকশন বারে।
• কমান্ড মেনু খুলুন, > চিহ্নটি মুছে দিন, ! টাইপ করুন, আপনার স্নিপেটের নাম টাইপ করুন, তারপর এন্টার চাপুন।

আরও জানতে ‘যেকোনো পৃষ্ঠা থেকে কোডের অংশবিশেষ চালান’ দেখুন।

জাভাস্ক্রিপ্ট ডিবাগ করুন

আপনার জাভাস্ক্রিপ্টে কোথায় ভুল হচ্ছে তা বোঝার জন্য console.log() ব্যবহার করার পরিবর্তে, ক্রোম ডেভটুলস-এর ডিবাগিং টুলগুলো ব্যবহার করার কথা ভাবতে পারেন। এর মূল ধারণাটি হলো, একটি ব্রেকপয়েন্ট সেট করা, যা আপনার কোডের একটি নির্দিষ্ট থামার জায়গা, এবং তারপর আপনার কোডটি এক এক করে লাইন ধরে চালানো।

কোডটি ধাপে ধাপে দেখার সময়, আপনি বর্তমানে সংজ্ঞায়িত সমস্ত প্রোপার্টি এবং ভেরিয়েবলের মান দেখতে ও পরিবর্তন করতে পারবেন, কনসোলে জাভাস্ক্রিপ্ট রান করতে পারবেন এবং আরও অনেক কিছু করতে পারবেন।

DevTools-এ ডিবাগিংয়ের প্রাথমিক বিষয়গুলো শিখতে "Get Started With Debugging JavaScript" দেখুন।

শুধুমাত্র আপনার কোডের উপর মনোযোগ দিন।

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

আপনাকে আধুনিক ওয়েব ডিবাগিং অভিজ্ঞতা প্রদানের জন্য, ডেভটুলস নিম্নলিখিত কাজগুলো করে থাকে:

• রচিত এবং ডেপ্লয় করা কোডকে আলাদা করে । আপনার কোড দ্রুত খুঁজে পেতে সাহায্য করার জন্য, সোর্সেস প্যানেলটি আপনার তৈরি করা কোডকে বান্ডল করা এবং মিনিফাইড করা কোড থেকে আলাদা করে ।
• পরিচিত তৃতীয় পক্ষের কোড উপেক্ষা করে :
  • সোর্সেস প্যানেলটি পেজ ট্যাবের ফাইল ট্রি থেকে এই ধরনের সোর্সগুলোকে লুকিয়ে রাখে।
  • কনসোল এই ধরনের ফ্রেমগুলোকে স্ট্যাক ট্রেস থেকে লুকিয়ে রাখে ।
  • ওপেন ফাইল মেনুটি অনুসন্ধানের ফলাফল থেকে এই ধরনের ফাইলগুলোকে লুকিয়ে রাখে ।

এছাড়াও, ফ্রেমওয়ার্ক দ্বারা সমর্থিত হলে, ডিবাগারের কল স্ট্যাক এবং কনসোলের স্ট্যাক ট্রেস অ্যাসিঙ্ক্রোনাস অপারেশনগুলোর সম্পূর্ণ ইতিহাস প্রদর্শন করে।

আরও জানতে দেখুন:

• Chrome DevTools-এ আধুনিক ওয়েব ডিবাগিং
• কেস স্টাডি: ডেভটুলস ব্যবহার করে উন্নত অ্যাঙ্গুলার ডিবাগিং

একটি কর্মক্ষেত্র তৈরি করুন

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

শুরু করার জন্য ‘ওয়ার্কস্পেস দিয়ে ফাইল সম্পাদনা’ দেখুন।