জাভাস্ক্রিপ্ট ডিবাগিং রেফারেন্স

Kayce Basques

Sofia Emelianova

Chrome DevTools ডিবাগিং বৈশিষ্ট্যগুলির এই ব্যাপক রেফারেন্স সহ নতুন ডিবাগিং ওয়ার্কফ্লোগুলি আবিষ্কার করুন৷

ডিবাগিংয়ের মূল বিষয়গুলি শিখতে Chrome DevTools-এ জাভাস্ক্রিপ্ট ডিবাগিং দিয়ে শুরু করুন দেখুন।

ব্রেকপয়েন্ট সহ কোড পজ করুন

একটি ব্রেকপয়েন্ট সেট করুন যাতে আপনি আপনার কোডটি কার্যকর করার মাঝখানে বিরতি দিতে পারেন। ব্রেকপয়েন্ট কিভাবে সেট করতে হয় তা জানতে, ব্রেকপয়েন্টের সাথে আপনার কোড পজ করুন দেখুন।

বিরাম দেওয়া হলে মান পরীক্ষা করুন

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

আপনি মূল্যায়ন করা ভেরিয়েবল, ধ্রুবক এবং অবজেক্ট অনুসন্ধান করতে কনসোল ব্যবহার করতে পারেন।

হোভারে ক্লাস/ফাংশনের বৈশিষ্ট্যগুলির পূর্বরূপ দেখুন

এক্সিকিউশন পজ করার সময়, এর বৈশিষ্ট্যগুলির পূর্বরূপ দেখতে একটি ক্লাস বা ফাংশনের নামের উপর হোভার করুন।

কোড মাধ্যমে ধাপ

একবার আপনার কোড বিরাম দেওয়া হলে, এটির মাধ্যমে ধাপে ধাপে, এক সময়ে একটি অভিব্যক্তি, পথের সাথে নিয়ন্ত্রণ প্রবাহ এবং সম্পত্তির মান তদন্ত করে।

কোডের লাইনের উপরে ধাপ

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

উদাহরণস্বরূপ, ধরুন আপনি নিম্নলিখিত কোডটি ডিবাগ করছেন:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

আপনি A এ বিরতি দিয়েছেন। Step over টিপে, DevTools আপনি যে ফাংশনটি অতিক্রম করছেন তার সমস্ত কোড এক্সিকিউট করে, যেটি হল B এবং C DevTools তারপর D এ বিরতি দেয়।

কোডের লাইনে প্রবেশ করুন

যখন আপনি ডিবাগ করছেন এমন সমস্যার সাথে সম্পর্কিত একটি ফাংশন কল ধারণকারী কোডের একটি লাইনে বিরতি দেওয়া হয়, তখন ধাপে ধাপে ক্লিক করুন যে ফাংশন আরও তদন্ত করতে.

উদাহরণস্বরূপ, ধরুন আপনি নিম্নলিখিত কোডটি ডিবাগ করছেন:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

আপনি A এ বিরতি দিয়েছেন। স্টেপ ইন টিপে, DevTools কোডের এই লাইনটি কার্যকর করে, তারপর B তে বিরতি দেয়।

কোড লাইনের বাইরে যান

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

উদাহরণস্বরূপ, ধরুন আপনি নিম্নলিখিত কোডটি ডিবাগ করছেন:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

আপনি A এ বিরতি দিয়েছেন। Step out টিপে, DevTools বাকি কোডটি getName() এ এক্সিকিউট করে, যা এই উদাহরণে শুধু B , এবং তারপর C তে বিরতি দেয়।

একটি নির্দিষ্ট লাইন পর্যন্ত সমস্ত কোড চালান

একটি দীর্ঘ ফাংশন ডিবাগ করার সময়, এমন অনেক কোড থাকতে পারে যা আপনি যে সমস্যাটি ডিবাগ করছেন তার সাথে সম্পর্কিত নয়।

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

আপনি আগ্রহী কোডের লাইনটিতে ডান-ক্লিক করুন এবং এখানে চালিয়ে যান নির্বাচন করুন। DevTools সেই পয়েন্ট পর্যন্ত সমস্ত কোড চালায় এবং তারপর সেই লাইনে বিরতি দেয়।

স্ক্রিপ্ট এক্সিকিউশন পুনরায় শুরু করুন

বিরতির পরে আপনার স্ক্রিপ্টের সম্পাদন চালিয়ে যেতে, স্ক্রিপ্ট এক্সিকিউশন পুনরায় শুরু করুন ক্লিক করুন . DevTools পরবর্তী ব্রেকপয়েন্ট পর্যন্ত স্ক্রিপ্ট চালায়, যদি থাকে।

জোর করে স্ক্রিপ্ট এক্সিকিউশন

সমস্ত ব্রেকপয়েন্ট উপেক্ষা করতে এবং আপনার স্ক্রিপ্টকে এক্সিকিউশন পুনরায় শুরু করতে বাধ্য করতে, স্ক্রিপ্ট এক্সিকিউশন পুনরায় শুরু করুন ক্লিক করুন এবং ধরে রাখুন এবং তারপর ফোর্স স্ক্রিপ্ট এক্সিকিউশন নির্বাচন করুন .

থ্রেড প্রসঙ্গ পরিবর্তন করুন

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

উপরের স্ক্রিনশটের থ্রেড প্যানটি নীল রঙে বর্ণিত হয়েছে।

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

কমা দ্বারা বিভক্ত অভিব্যক্তি মাধ্যমে ধাপ

কমা-বিভক্ত এক্সপ্রেশনের মাধ্যমে ধাপে ধাপে আপনাকে ছোট কোড ডিবাগ করতে দেয়। উদাহরণস্বরূপ, নিম্নলিখিত কোড বিবেচনা করুন:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

যখন ছোট করা হয়, এতে একটি কমা দ্বারা পৃথক করা foo(),foo(),42 অভিব্যক্তি থাকে:

function foo(){}function bar(){return foo(),foo(),42}bar();

ডিবাগার এই ধরনের অভিব্যক্তির মাধ্যমে একইভাবে পদক্ষেপ করে।

অতএব, পদক্ষেপের আচরণ অভিন্ন:

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

স্থানীয়, বন্ধ এবং বিশ্বব্যাপী বৈশিষ্ট্যগুলি দেখুন এবং সম্পাদনা করুন৷

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

• এটি পরিবর্তন করতে একটি সম্পত্তি মান ডাবল ক্লিক করুন.
• অ-গণনাযোগ্য সম্পত্তি ধূসর করা হয়।

উপরের স্ক্রিনশটের স্কোপ ফলকটি নীল রঙে বর্ণিত হয়েছে।

বর্তমান কল স্ট্যাক দেখুন

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

কোডের লাইনে লাফ দিতে একটি এন্ট্রিতে ক্লিক করুন যেখানে সেই ফাংশনটি কল করা হয়েছিল। নীল তীর আইকনটি বোঝায় যে DevTools বর্তমানে কোন ফাংশন হাইলাইট করছে।

উপরের স্ক্রিনশটের কল স্ট্যাক ফলকটি নীল রঙে বর্ণিত হয়েছে।

একটি কল স্ট্যাকে একটি ফাংশন (ফ্রেম) পুনরায় চালু করুন

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

একটি ফ্রেম পুনরায় চালু করতে:

1. একটি ব্রেকপয়েন্টে ফাংশন সঞ্চালন বিরাম দিন । কল স্ট্যাক ফলক ফাংশন কলের ক্রম রেকর্ড করে।

2. কল স্ট্যাক প্যানে, একটি ফাংশনে ডান-ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে রিস্টার্ট ফ্রেম নির্বাচন করুন।

   

রিস্টার্ট ফ্রেম কীভাবে কাজ করে তা বোঝার জন্য, নিম্নলিখিত কোডটি বিবেচনা করুন:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

foo() ফাংশনটি একটি আর্গুমেন্ট হিসাবে 0 নেয়, এটি লগ করে এবং bar() ফাংশনটিকে কল করে। bar() ফাংশন, ঘুরে, আর্গুমেন্ট বৃদ্ধি করে।

নিম্নলিখিত উপায়ে উভয় ফাংশনের ফ্রেম পুনরায় চালু করার চেষ্টা করুন:

1. উপরের কোডটি একটি নতুন স্নিপেটে অনুলিপি করুন এবং এটি চালান । debugger লাইন-অফ-কোড ব্রেকপয়েন্টে এক্সিকিউশন থামে।
2. লক্ষ্য করুন যে ডিবাগার আপনাকে ফাংশন ঘোষণার পাশে বর্তমান মান দেখায়: value = 1 ।
3. bar() ফ্রেম পুনরায় চালু করুন।
4. F9 টিপে ভ্যালু ইনক্রিমেন্ট স্টেটমেন্টের মধ্য দিয়ে যান। লক্ষ্য করুন যে বর্তমান মান বৃদ্ধি পায়: value = 2 ।
5. ঐচ্ছিকভাবে, স্কোপ ফলকে, মানটিকে সম্পাদনা করতে ডাবল-ক্লিক করুন এবং পছন্দসই মান সেট করুন।

6. bar() ফ্রেম পুনরায় চালু করার চেষ্টা করুন এবং আরও কয়েকবার ইনক্রিমেন্ট স্টেটমেন্টের মধ্য দিয়ে ধাপে ধাপে যান। মান বাড়তে থাকে।

ফ্রেম রিস্টার্ট আর্গুমেন্ট রিসেট করে না। অন্য কথায়, পুনঃসূচনা ফাংশন কলে প্রাথমিক অবস্থা পুনরুদ্ধার করে না। পরিবর্তে, এটি কেবল এক্সিকিউশন পয়েন্টারটিকে ফাংশনের শুরুতে নিয়ে যায়।

অতএব, বর্তমান আর্গুমেন্টের মান একই ফাংশনের রিস্টার্ট জুড়ে মেমরিতে টিকে থাকে।

1. এখন, কল স্ট্যাকের foo() ফ্রেমটি পুনরায় চালু করুন। লক্ষ্য করুন যে মানটি আবার 0 ।

জাভাস্ক্রিপ্টে, আর্গুমেন্টের পরিবর্তনগুলি ফাংশনের বাইরে দৃশ্যমান (প্রতিফলিত) হয় না। নেস্টেড ফাংশন মান পায়, মেমরিতে তাদের অবস্থান নয়। 1. এই টিউটোরিয়ালটি সম্পূর্ণ করতে স্ক্রিপ্ট এক্সিকিউশন ( F8 ) পুনরায় শুরু করুন।

উপেক্ষা-তালিকাভুক্ত ফ্রেম দেখান

ডিফল্টরূপে, কল স্ট্যাক ফলক শুধুমাত্র সেই ফ্রেমগুলি দেখায় যা আপনার কোডের সাথে প্রাসঙ্গিক এবং এতে যোগ করা যেকোনো স্ক্রিপ্ট বাদ দেয় সেটিংস > উপেক্ষা তালিকা ।

তৃতীয় পক্ষের ফ্রেম সহ সম্পূর্ণ কল স্ট্যাক দেখতে, কল স্ট্যাক বিভাগের অধীনে উপেক্ষা-তালিকাভুক্ত ফ্রেমগুলি দেখান সক্ষম করুন৷

এই ডেমো পৃষ্ঠায় এটি চেষ্টা করুন:

1. উৎস প্যানেলে, src > app > app.component.ts ফাইলটি খুলুন।
2. increment() ফাংশনে একটি ব্রেকপয়েন্ট সেট করুন।
3. কল স্ট্যাক বিভাগে, উপেক্ষা-তালিকাভুক্ত ফ্রেমগুলি দেখান চেকবক্সটি চেক করুন বা সাফ করুন এবং কল স্ট্যাকের ফ্রেমের প্রাসঙ্গিক বা সম্পূর্ণ তালিকা পর্যবেক্ষণ করুন।

অ্যাসিঙ্ক ফ্রেম দেখুন

আপনি যে ফ্রেমওয়ার্ক ব্যবহার করছেন তা দ্বারা সমর্থিত হলে, DevTools অ্যাসিঙ্ক কোডের উভয় অংশকে একসাথে লিঙ্ক করে অ্যাসিঙ্ক অপারেশন ট্রেস করতে পারে।

এই ক্ষেত্রে, কল স্ট্যাক অ্যাসিঙ্ক কল ফ্রেম সহ সমগ্র কল ইতিহাস দেখায়।

স্ট্যাক ট্রেস কপি করুন

কল স্ট্যাক ফলকের যেকোনো জায়গায় ডান-ক্লিক করুন এবং ক্লিপবোর্ডে বর্তমান কল স্ট্যাক কপি করতে স্ট্যাক ট্রেস অনুলিপি করুন নির্বাচন করুন।

নীচে আউটপুট একটি উদাহরণ:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

ফাইল ট্রি নেভিগেট করুন

ফাইল ট্রি নেভিগেট করতে পৃষ্ঠা ফলকটি ব্যবহার করুন।

ফাইল ট্রিতে ফাইল রচিত এবং স্থাপন করা হয়েছে

ফ্রেমওয়ার্ক ব্যবহার করে ওয়েব অ্যাপ্লিকেশন তৈরি করার সময় (উদাহরণস্বরূপ, প্রতিক্রিয়া বা কৌণিক ), বিল্ড টুল (উদাহরণস্বরূপ, ওয়েবপ্যাক বা Vite ) দ্বারা উত্পন্ন ক্ষুদ্র ফাইলগুলির কারণে উত্স নেভিগেট করা কঠিন হতে পারে।

আপনাকে উত্সগুলি নেভিগেট করতে সহায়তা করার জন্য, উত্স > পৃষ্ঠা ফলক ফাইলগুলিকে দুটি বিভাগে গোষ্ঠীবদ্ধ করতে পারে:

• লেখক । আপনি আপনার IDE তে যে সোর্স ফাইলগুলি দেখেন তার অনুরূপ৷ DevTools এই ফাইলগুলি তৈরি করে আপনার বিল্ড টুল দ্বারা প্রদত্ত সোর্স ম্যাপের উপর ভিত্তি করে।
• মোতায়েন করা হয়েছে । প্রকৃত ফাইল যা ব্রাউজার পড়ে। সাধারণত এই ফাইলগুলি ছোট করা হয়।

গ্রুপিং সক্রিয় করতে, সক্রিয় করুন > অথরেড/ডিপ্লোয়েড দ্বারা গ্রুপ ফাইল ফাইল ট্রির শীর্ষে থ্রি-ডট মেনুর অধীনে বিকল্প।

ফাইল ট্রি থেকে উপেক্ষা-তালিকাবদ্ধ উত্সগুলি লুকান

শুধুমাত্র আপনার তৈরি করা কোডের উপর ফোকাস করতে সাহায্য করার জন্য, উত্স > পৃষ্ঠা প্যানে যোগ করা সমস্ত স্ক্রিপ্ট বা ডিরেক্টরি ধূসর করে সেটিংস > ডিফল্টরূপে তালিকা উপেক্ষা করুন ।

এই ধরনের স্ক্রিপ্টগুলিকে সম্পূর্ণরূপে লুকানোর জন্য, উত্স > পৃষ্ঠা > নির্বাচন করুন > উপেক্ষা-তালিকাভুক্ত উত্স লুকান .

স্ক্রিপ্ট বা স্ক্রিপ্টের প্যাটার্ন উপেক্ষা করুন

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

উদাহরণ স্বরূপ, ধরুন আপনি এই কোডের মধ্য দিয়ে যাচ্ছেন:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A হল একটি তৃতীয় পক্ষের লাইব্রেরি যা আপনি বিশ্বাস করেন৷ আপনি যদি নিশ্চিত হন যে আপনি যে সমস্যাটি ডিবাগ করছেন সেটি তৃতীয় পক্ষের লাইব্রেরির সাথে সম্পর্কিত নয়, তাহলে স্ক্রিপ্টটি উপেক্ষা করা বোধগম্য।

ফাইল ট্রি থেকে একটি স্ক্রিপ্ট বা একটি ডিরেক্টরি উপেক্ষা করুন

একটি পৃথক স্ক্রিপ্ট বা একটি সম্পূর্ণ ডিরেক্টরি উপেক্ষা করতে:

1. উত্স > পৃষ্ঠাতে , একটি ডিরেক্টরি বা একটি স্ক্রিপ্ট ফাইলে ডান-ক্লিক করুন।
2. তালিকা উপেক্ষা করতে ডিরেক্টরি/স্ক্রিপ্ট যোগ করুন নির্বাচন করুন।

আপনি যদি উপেক্ষা-তালিকাভুক্ত উত্সগুলি লুকিয়ে না রাখেন তবে আপনি ফাইল ট্রিতে এই জাতীয় উত্স নির্বাচন করতে পারেন এবং সতর্কতা ব্যানার, উপেক্ষা করা তালিকা থেকে সরান বা কনফিগার ক্লিক করুন।

অন্যথায়, আপনি তালিকা থেকে লুকানো এবং উপেক্ষা করা ডিরেক্টরি এবং স্ক্রিপ্টগুলি সরাতে পারেন৷ সেটিংস > উপেক্ষা তালিকা ।

সম্পাদক ফলক থেকে একটি স্ক্রিপ্ট উপেক্ষা করুন

সম্পাদক ফলক থেকে একটি স্ক্রিপ্ট উপেক্ষা করতে:

1. ফাইলটি খুলুন।
2. যে কোন জায়গায় রাইট ক্লিক করুন।
3. তালিকা উপেক্ষা করতে স্ক্রিপ্ট যোগ করুন নির্বাচন করুন।

আপনি উপেক্ষা করা তালিকা থেকে একটি স্ক্রিপ্ট সরাতে পারেন সেটিংস > উপেক্ষা তালিকা ।

কল স্ট্যাক ফলক থেকে একটি স্ক্রিপ্ট উপেক্ষা করুন

কল স্ট্যাক ফলক থেকে একটি স্ক্রিপ্ট উপেক্ষা করতে:

1. স্ক্রিপ্ট থেকে একটি ফাংশনে ডান-ক্লিক করুন।
2. তালিকা উপেক্ষা করতে স্ক্রিপ্ট যোগ করুন নির্বাচন করুন।

আপনি উপেক্ষা করা তালিকা থেকে একটি স্ক্রিপ্ট সরাতে পারেন সেটিংস > উপেক্ষা তালিকা ।

সেটিংস থেকে একটি স্ক্রিপ্ট উপেক্ষা করুন

দেখুন সেটিংস > উপেক্ষা তালিকা ।

যেকোনো পৃষ্ঠা থেকে ডিবাগ কোডের স্নিপেট চালান

আপনি যদি কনসোলে একই ডিবাগ কোড বারবার চালাতে দেখেন, স্নিপেটগুলি বিবেচনা করুন। স্নিপেটগুলি হল এক্সিকিউটেবল স্ক্রিপ্ট যা আপনি লেখেন, সঞ্চয় করেন এবং DevTools-এর মধ্যে চালান।

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

কাস্টম জাভাস্ক্রিপ্ট এক্সপ্রেশনের মান দেখুন

কাস্টম এক্সপ্রেশনের মান দেখতে ওয়াচ প্যান ব্যবহার করুন। আপনি যেকোনো বৈধ জাভাস্ক্রিপ্ট এক্সপ্রেশন দেখতে পারেন।

• এক্সপ্রেশন যোগ করুন ক্লিক করুন একটি নতুন ঘড়ি অভিব্যক্তি তৈরি করতে.
• রিফ্রেশ ক্লিক করুন বিদ্যমান সকল এক্সপ্রেশনের মান রিফ্রেশ করতে। কোডের মধ্য দিয়ে যাওয়ার সময় মানগুলি স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়।
• একটি অভিব্যক্তির উপর হোভার করুন এবং এক্সপ্রেশন মুছুন ক্লিক করুন এটা মুছে ফেলার জন্য

স্ক্রিপ্টগুলি পরিদর্শন এবং সম্পাদনা করুন

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

উপরন্তু, আপনি স্থানীয়ভাবে বিষয়বস্তু ওভাররাইড করতে পারেন বা একটি ওয়ার্কস্পেস তৈরি করতে পারেন এবং DevTools-এ করা পরিবর্তনগুলি সরাসরি আপনার স্থানীয় উত্সগুলিতে সংরক্ষণ করতে পারেন।

একটি ছোট ফাইল পাঠযোগ্য করুন

ডিফল্টরূপে, সোর্স প্যানেল মিনিফাইড ফাইলগুলি প্রিন্ট-প্রিন্ট করে। যখন সুন্দর-মুদ্রিত হয়, তখন সম্পাদক একাধিক লাইনে একটি একক দীর্ঘ কোড লাইন দেখাতে পারে, এর সাথে - এটি লাইনের ধারাবাহিকতা বোঝাতে।

লোড হওয়ার সাথে সাথে মিনিফাই করা ফাইলটি দেখতে, সম্পাদকের নীচে বাম কোণে { } ক্লিক করুন৷

ভাঁজ কোড ব্লক

একটি কোড ব্লক ভাঁজ করতে, বাম কলামে লাইন নম্বরের উপর হোভার করুন এবং ক্লিক করুন সঙ্কুচিত

কোড ব্লক খোলার জন্য, এটির পাশে {...} এ ক্লিক করুন।

এই আচরণ কনফিগার করতে, দেখুন সেটিংস > পছন্দ > উৎস ।

একটি স্ক্রিপ্ট সম্পাদনা করুন

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

একটি স্ক্রিপ্ট সম্পাদনা করতে:

1. সোর্স প্যানেলের এডিটর প্যানে ফাইলটি খুলুন।
2. এডিটর প্যানে আপনার পরিবর্তন করুন।

3. সংরক্ষণ করতে Command + S (Mac) বা Ctrl + S (উইন্ডোজ, লিনাক্স) টিপুন। DevTools পুরো JS ফাইলটিকে Chrome এর JavaScript ইঞ্জিনে প্যাচ করে।

   

   উপরের স্ক্রিনশটের সম্পাদক ফলকটি নীল রঙে বর্ণিত হয়েছে।

একটি বিরতি ফাংশন লাইভ সম্পাদনা করুন

এক্সিকিউশন পজ করার সময়, আপনি বর্তমান ফাংশন সম্পাদনা করতে পারেন এবং নিম্নলিখিত সীমাবদ্ধতার সাথে লাইভ পরিবর্তনগুলি প্রয়োগ করতে পারেন:

• আপনি কল স্ট্যাকের মধ্যে শুধুমাত্র সর্বোচ্চ ফাংশন সম্পাদনা করতে পারেন।
• স্ট্যাকের আরও নিচে একই ফাংশনে রিকারসিভ কল করা উচিত নয়।

একটি ফাংশন লাইভ-এডিট করতে:

1. একটি ব্রেকপয়েন্ট দিয়ে মৃত্যুদন্ড থামান ।
2. বিরতি ফাংশন সম্পাদনা করুন.
3. পরিবর্তনগুলি প্রয়োগ করতে Command / Control + S টিপুন। ডিবাগার স্বয়ংক্রিয়ভাবে ফাংশনটি পুনরায় চালু করে ।
4. ফাঁসি চালিয়ে যান।

এই কর্মপ্রবাহ শিখতে নিচের ভিডিওটি দেখুন।

এই উদাহরণে, addend1 এবং addend2 ভেরিয়েবলের প্রাথমিকভাবে একটি ভুল string টাইপ আছে। সুতরাং, সংখ্যা যোগ করার পরিবর্তে, স্ট্রিংগুলি সংযুক্ত করা হয়। এটি ঠিক করার জন্য, লাইভ সম্পাদনার সময় parseInt() ফাংশন যোগ করা হয়।

একটি স্ক্রিপ্টে পাঠ্য অনুসন্ধান এবং প্রতিস্থাপন করুন

একটি স্ক্রিপ্টে পাঠ্য অনুসন্ধান করতে:

1. সোর্স প্যানেলের এডিটর প্যানে ফাইলটি খুলুন।
2. একটি অন্তর্নির্মিত অনুসন্ধান বার খুলতে, Command + F (Mac) বা Ctrl + F (Windows, Linux) টিপুন।
3. বারে, আপনার প্রশ্ন লিখুন। ঐচ্ছিকভাবে, আপনি করতে পারেন:
   • ক্লিক করুন আপনার ক্যোয়ারী কেস-সংবেদনশীল করতে কেস ম্যাচ করুন ।
   • ক্লিক করুন একটি RegEx এক্সপ্রেশন ব্যবহার করে অনুসন্ধান করতে নিয়মিত এক্সপ্রেশন ব্যবহার করুন ।
4. এন্টার টিপুন। পূর্ববর্তী বা পরবর্তী অনুসন্ধান ফলাফলে যেতে, উপরে বা নিচে বোতাম টিপুন।

আপনি যে পাঠ্যটি খুঁজে পেয়েছেন তা প্রতিস্থাপন করতে:

1. অনুসন্ধান বারে, ক্লিক করুন প্রতিস্থাপন বোতাম।
2. প্রতিস্থাপন করার জন্য পাঠ্য টাইপ করুন, তারপর প্রতিস্থাপন বা প্রতিস্থাপন করুন ক্লিক করুন।

জাভাস্ক্রিপ্ট অক্ষম করুন

Chrome DevTools দিয়ে JavaScript নিষ্ক্রিয় করুন দেখুন।

Kayce Basques

Sofia Emelianova

Chrome DevTools ডিবাগিং বৈশিষ্ট্যগুলির এই ব্যাপক রেফারেন্স সহ নতুন ডিবাগিং ওয়ার্কফ্লোগুলি আবিষ্কার করুন৷

ডিবাগিংয়ের মূল বিষয়গুলি শিখতে Chrome DevTools-এ জাভাস্ক্রিপ্ট ডিবাগিং দিয়ে শুরু করুন দেখুন।

ব্রেকপয়েন্ট সহ কোড পজ করুন

একটি ব্রেকপয়েন্ট সেট করুন যাতে আপনি আপনার কোডটি কার্যকর করার মাঝখানে বিরতি দিতে পারেন। ব্রেকপয়েন্ট কিভাবে সেট করতে হয় তা জানতে, ব্রেকপয়েন্টের সাথে আপনার কোড পজ করুন দেখুন।

বিরাম দেওয়া হলে মান পরীক্ষা করুন

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

আপনি মূল্যায়ন করা ভেরিয়েবল, ধ্রুবক এবং অবজেক্ট অনুসন্ধান করতে কনসোল ব্যবহার করতে পারেন।

হোভারে ক্লাস/ফাংশনের বৈশিষ্ট্যগুলির পূর্বরূপ দেখুন

এক্সিকিউশন পজ করার সময়, এর বৈশিষ্ট্যগুলির পূর্বরূপ দেখতে একটি ক্লাস বা ফাংশনের নামের উপর হোভার করুন।

কোড মাধ্যমে ধাপ

একবার আপনার কোড বিরাম দেওয়া হলে, এটির মাধ্যমে ধাপে ধাপে, এক সময়ে একটি অভিব্যক্তি, পথের সাথে নিয়ন্ত্রণ প্রবাহ এবং সম্পত্তির মান তদন্ত করে।

কোডের লাইনের উপরে ধাপ

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

উদাহরণস্বরূপ, ধরুন আপনি নিম্নলিখিত কোডটি ডিবাগ করছেন:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

আপনি A এ বিরতি দিয়েছেন। Step over টিপে, DevTools আপনি যে ফাংশনটি অতিক্রম করছেন তার সমস্ত কোড এক্সিকিউট করে, যেটি হল B এবং C DevTools তারপর D এ বিরতি দেয়।

কোডের লাইনে প্রবেশ করুন

যখন আপনি ডিবাগ করছেন এমন সমস্যার সাথে সম্পর্কিত একটি ফাংশন কল ধারণকারী কোডের একটি লাইনে বিরতি দেওয়া হয়, তখন ধাপে ধাপে ক্লিক করুন যে ফাংশন আরও তদন্ত করতে.

উদাহরণস্বরূপ, ধরুন আপনি নিম্নলিখিত কোডটি ডিবাগ করছেন:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

আপনি A এ বিরতি দিয়েছেন। স্টেপ ইন টিপে, DevTools কোডের এই লাইনটি কার্যকর করে, তারপর B তে বিরতি দেয়।

কোড লাইনের বাইরে যান

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

উদাহরণস্বরূপ, ধরুন আপনি নিম্নলিখিত কোডটি ডিবাগ করছেন:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

আপনি A এ বিরতি দিয়েছেন। Step out টিপে, DevTools বাকি কোডটি getName() এ এক্সিকিউট করে, যা এই উদাহরণে শুধু B , এবং তারপর C তে বিরতি দেয়।

একটি নির্দিষ্ট লাইন পর্যন্ত সমস্ত কোড চালান

একটি দীর্ঘ ফাংশন ডিবাগ করার সময়, এমন অনেক কোড থাকতে পারে যা আপনি যে সমস্যাটি ডিবাগ করছেন তার সাথে সম্পর্কিত নয়।

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

আপনি আগ্রহী কোডের লাইনটিতে ডান-ক্লিক করুন এবং এখানে চালিয়ে যান নির্বাচন করুন। DevTools সেই পয়েন্ট পর্যন্ত সমস্ত কোড চালায় এবং তারপর সেই লাইনে বিরতি দেয়।

স্ক্রিপ্ট এক্সিকিউশন পুনরায় শুরু করুন

বিরতির পরে আপনার স্ক্রিপ্টের সম্পাদন চালিয়ে যেতে, স্ক্রিপ্ট এক্সিকিউশন পুনরায় শুরু করুন ক্লিক করুন . DevTools পরবর্তী ব্রেকপয়েন্ট পর্যন্ত স্ক্রিপ্ট চালায়, যদি থাকে।

জোর করে স্ক্রিপ্ট এক্সিকিউশন

সমস্ত ব্রেকপয়েন্ট উপেক্ষা করতে এবং আপনার স্ক্রিপ্টকে এক্সিকিউশন পুনরায় শুরু করতে বাধ্য করতে, স্ক্রিপ্ট এক্সিকিউশন পুনরায় শুরু করুন ক্লিক করুন এবং ধরে রাখুন এবং তারপর ফোর্স স্ক্রিপ্ট এক্সিকিউশন নির্বাচন করুন .

থ্রেড প্রসঙ্গ পরিবর্তন করুন

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

উপরের স্ক্রিনশটের থ্রেড প্যানটি নীল রঙে বর্ণিত হয়েছে।

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

কমা দ্বারা বিভক্ত অভিব্যক্তি মাধ্যমে ধাপ

কমা-বিভক্ত এক্সপ্রেশনের মাধ্যমে ধাপে ধাপে আপনাকে ছোট কোড ডিবাগ করতে দেয়। উদাহরণস্বরূপ, নিম্নলিখিত কোড বিবেচনা করুন:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

যখন ছোট করা হয়, এতে একটি কমা দ্বারা পৃথক করা foo(),foo(),42 অভিব্যক্তি থাকে:

function foo(){}function bar(){return foo(),foo(),42}bar();

ডিবাগার এই ধরনের অভিব্যক্তির মাধ্যমে একইভাবে পদক্ষেপ করে।

অতএব, পদক্ষেপের আচরণ অভিন্ন:

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

স্থানীয়, বন্ধ এবং বিশ্বব্যাপী বৈশিষ্ট্যগুলি দেখুন এবং সম্পাদনা করুন৷

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

• এটি পরিবর্তন করতে একটি সম্পত্তি মান ডাবল ক্লিক করুন.
• অ-গণনাযোগ্য সম্পত্তি ধূসর করা হয়।

উপরের স্ক্রিনশটের স্কোপ ফলকটি নীল রঙে বর্ণিত হয়েছে।

বর্তমান কল স্ট্যাক দেখুন

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

কোডের লাইনে লাফ দিতে একটি এন্ট্রিতে ক্লিক করুন যেখানে সেই ফাংশনটি কল করা হয়েছিল। নীল তীর আইকনটি বোঝায় যে DevTools বর্তমানে কোন ফাংশন হাইলাইট করছে।

উপরের স্ক্রিনশটের কল স্ট্যাক ফলকটি নীল রঙে বর্ণিত হয়েছে।

একটি কল স্ট্যাকে একটি ফাংশন (ফ্রেম) পুনরায় চালু করুন

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

একটি ফ্রেম পুনরায় চালু করতে:

1. একটি ব্রেকপয়েন্টে ফাংশন সঞ্চালন বিরাম দিন । কল স্ট্যাক ফলক ফাংশন কলের ক্রম রেকর্ড করে।

2. কল স্ট্যাক প্যানে, একটি ফাংশনে ডান-ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে রিস্টার্ট ফ্রেম নির্বাচন করুন।

   

রিস্টার্ট ফ্রেম কীভাবে কাজ করে তা বোঝার জন্য, নিম্নলিখিত কোডটি বিবেচনা করুন:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

foo() ফাংশনটি একটি আর্গুমেন্ট হিসাবে 0 নেয়, এটি লগ করে এবং bar() ফাংশনটিকে কল করে। bar() ফাংশন, ঘুরে, আর্গুমেন্ট বৃদ্ধি করে।

নিম্নলিখিত উপায়ে উভয় ফাংশনের ফ্রেম পুনরায় চালু করার চেষ্টা করুন:

1. উপরের কোডটি একটি নতুন স্নিপেটে অনুলিপি করুন এবং এটি চালান । debugger লাইন-অফ-কোড ব্রেকপয়েন্টে এক্সিকিউশন থামে।
2. লক্ষ্য করুন যে ডিবাগার আপনাকে ফাংশন ঘোষণার পাশে বর্তমান মান দেখায়: value = 1 ।
3. bar() ফ্রেম পুনরায় চালু করুন।
4. F9 টিপে ভ্যালু ইনক্রিমেন্ট স্টেটমেন্টের মধ্য দিয়ে যান। লক্ষ্য করুন যে বর্তমান মান বৃদ্ধি পায়: value = 2 ।
5. ঐচ্ছিকভাবে, স্কোপ ফলকে, মানটিকে সম্পাদনা করতে ডাবল-ক্লিক করুন এবং পছন্দসই মান সেট করুন।

6. bar() ফ্রেম পুনরায় চালু করার চেষ্টা করুন এবং আরও কয়েকবার ইনক্রিমেন্ট স্টেটমেন্টের মধ্য দিয়ে ধাপে ধাপে যান। মান বাড়তে থাকে।

ফ্রেম রিস্টার্ট আর্গুমেন্ট রিসেট করে না। অন্য কথায়, পুনঃসূচনা ফাংশন কলে প্রাথমিক অবস্থা পুনরুদ্ধার করে না। পরিবর্তে, এটি কেবল এক্সিকিউশন পয়েন্টারটিকে ফাংশনের শুরুতে নিয়ে যায়।

অতএব, বর্তমান আর্গুমেন্টের মান একই ফাংশনের রিস্টার্ট জুড়ে মেমরিতে টিকে থাকে।

1. এখন, কল স্ট্যাকের foo() ফ্রেমটি পুনরায় চালু করুন। লক্ষ্য করুন যে মানটি আবার 0 ।

জাভাস্ক্রিপ্টে, আর্গুমেন্টের পরিবর্তনগুলি ফাংশনের বাইরে দৃশ্যমান (প্রতিফলিত) হয় না। নেস্টেড ফাংশন মান পায়, মেমরিতে তাদের অবস্থান নয়। 1. এই টিউটোরিয়ালটি সম্পূর্ণ করতে স্ক্রিপ্ট এক্সিকিউশন ( F8 ) পুনরায় শুরু করুন।

উপেক্ষা-তালিকাভুক্ত ফ্রেম দেখান

ডিফল্টরূপে, কল স্ট্যাক ফলক শুধুমাত্র সেই ফ্রেমগুলি দেখায় যা আপনার কোডের সাথে প্রাসঙ্গিক এবং এতে যোগ করা যেকোনো স্ক্রিপ্ট বাদ দেয় সেটিংস > উপেক্ষা তালিকা ।

তৃতীয় পক্ষের ফ্রেম সহ সম্পূর্ণ কল স্ট্যাক দেখতে, কল স্ট্যাক বিভাগের অধীনে উপেক্ষা-তালিকাভুক্ত ফ্রেমগুলি দেখান সক্ষম করুন৷

এই ডেমো পৃষ্ঠায় এটি চেষ্টা করুন:

1. উৎস প্যানেলে, src > app > app.component.ts ফাইলটি খুলুন।
2. increment() ফাংশনে একটি ব্রেকপয়েন্ট সেট করুন।
3. কল স্ট্যাক বিভাগে, উপেক্ষা-তালিকাভুক্ত ফ্রেমগুলি দেখান চেকবক্সটি চেক করুন বা সাফ করুন এবং কল স্ট্যাকের ফ্রেমের প্রাসঙ্গিক বা সম্পূর্ণ তালিকা পর্যবেক্ষণ করুন।

অ্যাসিঙ্ক ফ্রেম দেখুন

আপনি যে ফ্রেমওয়ার্ক ব্যবহার করছেন তা দ্বারা সমর্থিত হলে, DevTools অ্যাসিঙ্ক কোডের উভয় অংশকে একসাথে লিঙ্ক করে অ্যাসিঙ্ক অপারেশন ট্রেস করতে পারে।

এই ক্ষেত্রে, কল স্ট্যাক অ্যাসিঙ্ক কল ফ্রেম সহ সমগ্র কল ইতিহাস দেখায়।

স্ট্যাক ট্রেস কপি করুন

কল স্ট্যাক ফলকের যেকোনো জায়গায় ডান-ক্লিক করুন এবং ক্লিপবোর্ডে বর্তমান কল স্ট্যাক কপি করতে স্ট্যাক ট্রেস অনুলিপি করুন নির্বাচন করুন।

নীচে আউটপুট একটি উদাহরণ:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

ফাইল ট্রি নেভিগেট করুন

ফাইল ট্রি নেভিগেট করতে পৃষ্ঠা ফলকটি ব্যবহার করুন।

ফাইল ট্রিতে ফাইল রচিত এবং স্থাপন করা হয়েছে

ফ্রেমওয়ার্ক ব্যবহার করে ওয়েব অ্যাপ্লিকেশন তৈরি করার সময় (উদাহরণস্বরূপ, প্রতিক্রিয়া বা কৌণিক ), বিল্ড টুল (উদাহরণস্বরূপ, ওয়েবপ্যাক বা Vite ) দ্বারা উত্পন্ন ক্ষুদ্র ফাইলগুলির কারণে উত্স নেভিগেট করা কঠিন হতে পারে।

আপনাকে উত্সগুলি নেভিগেট করতে সহায়তা করার জন্য, উত্স > পৃষ্ঠা ফলক ফাইলগুলিকে দুটি বিভাগে গোষ্ঠীবদ্ধ করতে পারে:

• লেখক । আপনি আপনার IDE তে যে সোর্স ফাইলগুলি দেখেন তার অনুরূপ৷ DevTools এই ফাইলগুলি তৈরি করে আপনার বিল্ড টুল দ্বারা প্রদত্ত সোর্স ম্যাপের উপর ভিত্তি করে।
• মোতায়েন করা হয়েছে । প্রকৃত ফাইল যা ব্রাউজার পড়ে। সাধারণত এই ফাইলগুলি ছোট করা হয়।

গ্রুপিং সক্রিয় করতে, সক্রিয় করুন > অথরেড/ডিপ্লোয়েড দ্বারা গ্রুপ ফাইল ফাইল ট্রির শীর্ষে থ্রি-ডট মেনুর অধীনে বিকল্প।

ফাইল ট্রি থেকে উপেক্ষা-তালিকাবদ্ধ উত্সগুলি লুকান

শুধুমাত্র আপনার তৈরি করা কোডের উপর ফোকাস করতে সাহায্য করার জন্য, উত্স > পৃষ্ঠা প্যানে যোগ করা সমস্ত স্ক্রিপ্ট বা ডিরেক্টরি ধূসর করে সেটিংস > ডিফল্টরূপে তালিকা উপেক্ষা করুন ।

এই ধরনের স্ক্রিপ্টগুলিকে সম্পূর্ণরূপে লুকানোর জন্য, উত্স > পৃষ্ঠা > নির্বাচন করুন > উপেক্ষা-তালিকাভুক্ত উত্স লুকান .

স্ক্রিপ্ট বা স্ক্রিপ্টের প্যাটার্ন উপেক্ষা করুন

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

উদাহরণ স্বরূপ, ধরুন আপনি এই কোডের মধ্য দিয়ে যাচ্ছেন:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A হল একটি তৃতীয় পক্ষের লাইব্রেরি যা আপনি বিশ্বাস করেন৷ আপনি যদি নিশ্চিত হন যে আপনি যে সমস্যাটি ডিবাগ করছেন সেটি তৃতীয় পক্ষের লাইব্রেরির সাথে সম্পর্কিত নয়, তাহলে স্ক্রিপ্টটি উপেক্ষা করা বোধগম্য।

ফাইল ট্রি থেকে একটি স্ক্রিপ্ট বা একটি ডিরেক্টরি উপেক্ষা করুন

একটি পৃথক স্ক্রিপ্ট বা একটি সম্পূর্ণ ডিরেক্টরি উপেক্ষা করতে:

1. উত্স > পৃষ্ঠাতে , একটি ডিরেক্টরি বা একটি স্ক্রিপ্ট ফাইলে ডান-ক্লিক করুন।
2. তালিকা উপেক্ষা করতে ডিরেক্টরি/স্ক্রিপ্ট যোগ করুন নির্বাচন করুন।

আপনি যদি উপেক্ষা-তালিকাভুক্ত উত্সগুলি লুকিয়ে না রাখেন তবে আপনি ফাইল ট্রিতে এই জাতীয় উত্স নির্বাচন করতে পারেন এবং সতর্কতা ব্যানার, উপেক্ষা করা তালিকা থেকে সরান বা কনফিগার ক্লিক করুন।

অন্যথায়, আপনি তালিকা থেকে লুকানো এবং উপেক্ষা করা ডিরেক্টরি এবং স্ক্রিপ্টগুলি সরাতে পারেন৷ সেটিংস > উপেক্ষা তালিকা ।

সম্পাদক ফলক থেকে একটি স্ক্রিপ্ট উপেক্ষা করুন

সম্পাদক ফলক থেকে একটি স্ক্রিপ্ট উপেক্ষা করতে:

1. ফাইলটি খুলুন।
2. যে কোন জায়গায় রাইট ক্লিক করুন।
3. তালিকা উপেক্ষা করতে স্ক্রিপ্ট যোগ করুন নির্বাচন করুন।

আপনি উপেক্ষা করা তালিকা থেকে একটি স্ক্রিপ্ট সরাতে পারেন সেটিংস > উপেক্ষা তালিকা ।

কল স্ট্যাক ফলক থেকে একটি স্ক্রিপ্ট উপেক্ষা করুন

কল স্ট্যাক ফলক থেকে একটি স্ক্রিপ্ট উপেক্ষা করতে:

1. স্ক্রিপ্ট থেকে একটি ফাংশনে ডান-ক্লিক করুন।
2. তালিকা উপেক্ষা করতে স্ক্রিপ্ট যোগ করুন নির্বাচন করুন।

আপনি উপেক্ষা করা তালিকা থেকে একটি স্ক্রিপ্ট সরাতে পারেন সেটিংস > উপেক্ষা তালিকা ।

সেটিংস থেকে একটি স্ক্রিপ্ট উপেক্ষা করুন

দেখুন সেটিংস > উপেক্ষা তালিকা ।

যেকোনো পৃষ্ঠা থেকে ডিবাগ কোডের স্নিপেট চালান

আপনি যদি কনসোলে একই ডিবাগ কোড বারবার চালাতে দেখেন, স্নিপেটগুলি বিবেচনা করুন। স্নিপেটগুলি হল এক্সিকিউটেবল স্ক্রিপ্ট যা আপনি লেখেন, সঞ্চয় করেন এবং DevTools-এর মধ্যে চালান।

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

কাস্টম জাভাস্ক্রিপ্ট এক্সপ্রেশনের মান দেখুন

কাস্টম এক্সপ্রেশনের মান দেখতে ওয়াচ প্যান ব্যবহার করুন। আপনি যেকোনো বৈধ জাভাস্ক্রিপ্ট এক্সপ্রেশন দেখতে পারেন।

• এক্সপ্রেশন যোগ করুন ক্লিক করুন একটি নতুন ঘড়ি অভিব্যক্তি তৈরি করতে.
• রিফ্রেশ ক্লিক করুন বিদ্যমান সকল এক্সপ্রেশনের মান রিফ্রেশ করতে। কোডের মধ্য দিয়ে যাওয়ার সময় মানগুলি স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়।
• একটি অভিব্যক্তির উপর হোভার করুন এবং এক্সপ্রেশন মুছুন ক্লিক করুন এটা মুছে ফেলার জন্য

স্ক্রিপ্টগুলি পরিদর্শন এবং সম্পাদনা করুন

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

উপরন্তু, আপনি স্থানীয়ভাবে বিষয়বস্তু ওভাররাইড করতে পারেন বা একটি ওয়ার্কস্পেস তৈরি করতে পারেন এবং DevTools-এ করা পরিবর্তনগুলি সরাসরি আপনার স্থানীয় উত্সগুলিতে সংরক্ষণ করতে পারেন।

একটি ছোট ফাইল পাঠযোগ্য করুন

ডিফল্টরূপে, সোর্স প্যানেল মিনিফাইড ফাইলগুলি প্রিন্ট-প্রিন্ট করে। যখন সুন্দর-মুদ্রিত হয়, তখন সম্পাদক একাধিক লাইনে একটি একক দীর্ঘ কোড লাইন দেখাতে পারে, এর সাথে - এটি লাইনের ধারাবাহিকতা বোঝাতে।

লোড হওয়ার সাথে সাথে মিনিফাই করা ফাইলটি দেখতে, সম্পাদকের নীচে বাম কোণে { } ক্লিক করুন৷

ভাঁজ কোড ব্লক

একটি কোড ব্লক ভাঁজ করতে, বাম কলামে লাইন নম্বরের উপর হোভার করুন এবং ক্লিক করুন সঙ্কুচিত

কোড ব্লক খোলার জন্য, এটির পাশে {...} এ ক্লিক করুন।

এই আচরণ কনফিগার করতে, দেখুন সেটিংস > পছন্দ > উৎস ।

একটি স্ক্রিপ্ট সম্পাদনা করুন

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

একটি স্ক্রিপ্ট সম্পাদনা করতে:

1. সোর্স প্যানেলের এডিটর প্যানে ফাইলটি খুলুন।
2. এডিটর প্যানে আপনার পরিবর্তন করুন।

3. সংরক্ষণ করতে Command + S (Mac) বা Ctrl + S (উইন্ডোজ, লিনাক্স) টিপুন। DevTools পুরো JS ফাইলটিকে Chrome এর JavaScript ইঞ্জিনে প্যাচ করে।

   

   উপরের স্ক্রিনশটের সম্পাদক ফলকটি নীল রঙে বর্ণিত হয়েছে।

একটি বিরতি ফাংশন লাইভ সম্পাদনা করুন

এক্সিকিউশন পজ করার সময়, আপনি বর্তমান ফাংশন সম্পাদনা করতে পারেন এবং নিম্নলিখিত সীমাবদ্ধতার সাথে লাইভ পরিবর্তনগুলি প্রয়োগ করতে পারেন:

• আপনি কল স্ট্যাকের মধ্যে শুধুমাত্র সর্বোচ্চ ফাংশন সম্পাদনা করতে পারেন।
• স্ট্যাকের আরও নিচে একই ফাংশনে রিকারসিভ কল করা উচিত নয়।

একটি ফাংশন লাইভ-এডিট করতে:

1. একটি ব্রেকপয়েন্ট দিয়ে মৃত্যুদন্ড থামান ।
2. বিরতি ফাংশন সম্পাদনা করুন.
3. পরিবর্তনগুলি প্রয়োগ করতে Command / Control + S টিপুন। ডিবাগার স্বয়ংক্রিয়ভাবে ফাংশনটি পুনরায় চালু করে ।
4. ফাঁসি চালিয়ে যান।

এই কর্মপ্রবাহ শিখতে নিচের ভিডিওটি দেখুন।

এই উদাহরণে, addend1 এবং addend2 ভেরিয়েবলের প্রাথমিকভাবে একটি ভুল string টাইপ আছে। সুতরাং, সংখ্যা যোগ করার পরিবর্তে, স্ট্রিংগুলি সংযুক্ত করা হয়। এটি ঠিক করার জন্য, লাইভ সম্পাদনার সময় parseInt() ফাংশন যোগ করা হয়।

একটি স্ক্রিপ্টে পাঠ্য অনুসন্ধান এবং প্রতিস্থাপন করুন

একটি স্ক্রিপ্টে পাঠ্য অনুসন্ধান করতে:

1. সোর্স প্যানেলের এডিটর প্যানে ফাইলটি খুলুন।
2. একটি অন্তর্নির্মিত অনুসন্ধান বার খুলতে, Command + F (Mac) বা Ctrl + F (Windows, Linux) টিপুন।
3. বারে, আপনার প্রশ্ন লিখুন। ঐচ্ছিকভাবে, আপনি করতে পারেন:
   • ক্লিক করুন আপনার ক্যোয়ারী কেস-সংবেদনশীল করতে কেস ম্যাচ করুন ।
   • ক্লিক করুন একটি RegEx এক্সপ্রেশন ব্যবহার করে অনুসন্ধান করতে নিয়মিত এক্সপ্রেশন ব্যবহার করুন ।
4. এন্টার টিপুন। পূর্ববর্তী বা পরবর্তী অনুসন্ধান ফলাফলে যেতে, উপরে বা নিচে বোতাম টিপুন।

আপনি যে পাঠ্যটি খুঁজে পেয়েছেন তা প্রতিস্থাপন করতে:

1. অনুসন্ধান বারে, ক্লিক করুন প্রতিস্থাপন বোতাম।
2. প্রতিস্থাপন করার জন্য পাঠ্য টাইপ করুন, তারপর প্রতিস্থাপন বা প্রতিস্থাপন করুন ক্লিক করুন।

জাভাস্ক্রিপ্ট অক্ষম করুন

Chrome DevTools দিয়ে JavaScript নিষ্ক্রিয় করুন দেখুন।