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

Kayce Basques
সোফিয়া ইমেলিয়ানোভা
Sofia Emelianova
GitHub

এতে Chrome DevTools সোর্স প্যানেল ব্যবহার করুন:

ফাইল দেখুন

পৃষ্ঠাটি লোড করা সমস্ত সংস্থান দেখতে পৃষ্ঠা ফলকটি ব্যবহার করুন৷

পৃষ্ঠা ফলক।

পৃষ্ঠা ফলকটি কীভাবে সংগঠিত হয়:

  • উপরের স্ক্রীনশটের উপরে যেমন 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() স্টেটমেন্ট এবং HTML href বৈশিষ্ট্যগুলি অবৈধ URL সহ৷

একটি ইনলাইন সিনট্যাক্স ত্রুটি টুলটিপ।

আপনি যদি একটি উপাদানের background-color সম্পাদনা করেন, আপনি দেখতে পাবেন যে পরিবর্তনটি অবিলম্বে কার্যকর হবে৷

এডিটর প্যানে CSS সম্পাদনা করা হচ্ছে।

JavaScript পরিবর্তনগুলি কার্যকর করার জন্য, Command + S (Mac) বা Control + S (Windows, Linux) টিপুন। DevTools একটি স্ক্রিপ্ট পুনরায় চালায় না, তাই শুধুমাত্র JavaScript পরিবর্তনগুলি কার্যকর হয় যা আপনি ফাংশনের ভিতরে তৈরি করেন৷ উদাহরণ স্বরূপ, খেয়াল করুন কিভাবে 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);

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

একটি স্নিপেট যা একটি পৃষ্ঠায় jQuery লাইব্রেরি সন্নিবেশ করায়।

একটি স্নিপেট চালানোর জন্য:

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

আরও জানতে যেকোনো পৃষ্ঠা থেকে কোডের স্নিপেট চালান দেখুন।

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

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

একটি ব্রেকপয়েন্ট এ বিরতি.

আপনি কোডের মধ্য দিয়ে যাওয়ার সাথে সাথে, আপনি বর্তমান-সংজ্ঞায়িত সমস্ত বৈশিষ্ট্য এবং ভেরিয়েবলের মান দেখতে এবং পরিবর্তন করতে পারেন, কনসোলে JavaScript চালাতে পারেন এবং আরও অনেক কিছু করতে পারেন৷

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

শুধুমাত্র আপনার কোড ফোকাস

Chrome DevTools আপনাকে ওয়েব অ্যাপ্লিকেশন তৈরি করার সময় ফ্রেমওয়ার্ক এবং বিল্ড টুলস দ্বারা উত্পন্ন শব্দ ফিল্টার করে শুধুমাত্র আপনি যে কোডটি লিখেছেন তার উপর ফোকাস করতে দেয়৷

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

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

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

একটি ওয়ার্কস্পেস সেট আপ করুন

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

শুরু করতে ওয়ার্কস্পেস সহ ফাইল সম্পাদনা দেখুন।