Chrome DevTools-এ পূর্বাভাস ধরুন: কেন এটি কঠিন এবং কীভাবে এটি আরও ভাল করা যায়৷

Eric Leese

দ্রষ্টব্য: DevTools উন্নত করতে সাহায্য করতে আগ্রহী? এখানে Google ব্যবহারকারী গবেষণায় অংশ নিতে সাইন আপ করুন।

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

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

কেন ভবিষ্যদ্বাণী বিষয় ধরা

Chrome DevTools-এ, আপনার কাছে শুধুমাত্র ধরা না পড়া ব্যতিক্রমগুলির জন্য কোড এক্সিকিউশন পজ করার একটি বিকল্প আছে, যেগুলি ধরা হয়েছে সেগুলিকে এড়িয়ে গিয়ে৷

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

নিম্নলিখিত উদাহরণ বিবেচনা করুন: ডিবাগার কোথায় বিরতি করা উচিত? (পরবর্তী বিভাগে একটি উত্তর খুঁজুন।)

async function inner() {
  throw new Error(); // Should the debugger pause here?
}

async function outer() {
  try {
    const promise = inner();
    // ...
    await promise;
  } catch (e) {
    // ... or should the debugger pause here?
  }
}

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

ভুল ভবিষ্যদ্বাণী হতাশার দিকে পরিচালিত করে:

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

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

কিভাবে অ্যাসিঙ্ক্রোনাস কোড কাজ করে

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

async function inner() {
  throw new Error();
}

async function outer() {
  try {
    const promise = inner();
    // ...
    await promise;
  } catch (e) {
    // ...
  }
}

এই উদাহরণে, outer() প্রথমে inner() কল করে যা অবিলম্বে একটি ব্যতিক্রম নিক্ষেপ করে। এটি থেকে ডিবাগার উপসংহারে আসতে পারে যে inner() একটি প্রত্যাখ্যান প্রতিশ্রুতি ফিরিয়ে দেবে তবে বর্তমানে কিছুই অপেক্ষা করছে না বা অন্যথায় সেই প্রতিশ্রুতি পরিচালনা করছে। ডিবাগার অনুমান করতে পারে যে outer() সম্ভবত এটির জন্য অপেক্ষা করবে এবং অনুমান করবে যে এটি তার বর্তমান try ব্লকে এটি করবে এবং তাই এটি পরিচালনা করবে কিন্তু ডিবাগার প্রত্যাখ্যান প্রতিশ্রুতি ফিরে না আসা পর্যন্ত এবং await বিবৃতিটি শেষ পর্যন্ত পৌঁছানো না হওয়া পর্যন্ত এটি সম্পর্কে নিশ্চিত হতে পারে না।

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

V8-এ, একটি জাভাস্ক্রিপ্ট Promise একটি বস্তু হিসাবে উপস্থাপন করা হয় যা তিনটি অবস্থার একটিতে হতে পারে: পূরণ, প্রত্যাখ্যান বা মুলতুবি। যদি একটি প্রতিশ্রুতি পূর্ণ অবস্থায় থাকে এবং আপনি .then() পদ্ধতিতে কল করেন, একটি নতুন মুলতুবি প্রতিশ্রুতি তৈরি করা হয় এবং একটি নতুন প্রতিশ্রুতি প্রতিক্রিয়া কাজ নির্ধারিত হয় যা হ্যান্ডলারকে চালাবে এবং তারপর হ্যান্ডলারের ফলাফলের সাথে প্রতিশ্রুতিটি পূরণে সেট করে বা হ্যান্ডলার একটি ব্যতিক্রম নিক্ষেপ করলে প্রত্যাখ্যানে সেট করে। আপনি যদি প্রত্যাখ্যান করা প্রতিশ্রুতিতে .catch() পদ্ধতিতে কল করেন তবে একই ঘটনা ঘটে। বিপরীতে, একটি প্রত্যাখ্যাত প্রতিশ্রুতিতে .then() বা পূর্ণ প্রতিশ্রুতিতে .catch() কল করা একই অবস্থায় একটি প্রতিশ্রুতি ফিরিয়ে দেবে এবং হ্যান্ডলার চালাবে না।

একটি মুলতুবি প্রতিশ্রুতিতে একটি প্রতিক্রিয়া তালিকা রয়েছে যেখানে প্রতিটি প্রতিক্রিয়া বস্তুতে একটি পূরণ হ্যান্ডলার বা প্রত্যাখ্যান হ্যান্ডলার (বা উভয়) এবং একটি প্রতিক্রিয়া প্রতিশ্রুতি রয়েছে। সুতরাং একটি মুলতুবি প্রতিশ্রুতিতে .then() কল করলে একটি পূর্ণ হ্যান্ডলারের সাথে একটি প্রতিক্রিয়া যোগ হবে এবং সেই সাথে প্রতিক্রিয়া প্রতিশ্রুতির জন্য একটি নতুন মুলতুবি প্রতিশ্রুতি যুক্ত হবে, যা .then() ফিরে আসবে। .catch() কল করলে অনুরূপ প্রতিক্রিয়া যোগ হবে কিন্তু একটি প্রত্যাখ্যান হ্যান্ডলারের সাথে। দুটি আর্গুমেন্ট সহ .then() কল করা উভয় হ্যান্ডলারের সাথে একটি প্রতিক্রিয়া তৈরি করে এবং .finally() কল করা বা প্রতিশ্রুতির জন্য অপেক্ষা করা দুটি হ্যান্ডলারের সাথে একটি প্রতিক্রিয়া যোগ করবে যা এই বৈশিষ্ট্যগুলি বাস্তবায়নের জন্য নির্দিষ্ট বিল্ট-ইন ফাংশন।

যখন মুলতুবি প্রতিশ্রুতি শেষ পর্যন্ত পূর্ণ বা প্রত্যাখ্যান করা হয়, তখন প্রতিক্রিয়া কাজগুলি তার সমস্ত পূর্ণ হ্যান্ডলার বা প্রত্যাখ্যান করা সমস্ত হ্যান্ডলারের জন্য নির্ধারিত হবে। সংশ্লিষ্ট প্রতিক্রিয়া প্রতিশ্রুতি আপডেট করা হবে, সম্ভাব্য তাদের নিজস্ব প্রতিক্রিয়া কাজ ট্রিগার.

উদাহরণ

নিম্নলিখিত কোড বিবেচনা করুন:

return new Promise(() => {throw new Error();})
    .then(() => console.log('Never happened'))
    .catch(() => console.log('Caught'));

এটা স্পষ্ট নাও হতে পারে যে এই কোডে তিনটি স্বতন্ত্র Promise বিষয় জড়িত। উপরের কোডটি নিম্নলিখিত কোডের সমতুল্য:

const promise1 = new Promise(() => {throw new Error();});
const promise2 = promise1.then(() => console.log('Never happened'));
const promise3 = promise2.catch(() => console.log('Caught'));
return promise3;

এই উদাহরণে, নিম্নলিখিত পদক্ষেপগুলি ঘটবে:

1. Promise নির্মাণকারী বলা হয়.
2. একটি নতুন মুলতুবি Promise তৈরি করা হয়েছে।
3. বেনামী ফাংশন চালানো হয়.
4. একটি ব্যতিক্রম নিক্ষেপ করা হয়. এই মুহুর্তে, ডিবাগারকে থামাতে হবে কিনা তা সিদ্ধান্ত নিতে হবে।
5. প্রতিশ্রুতি কনস্ট্রাক্টর এই ব্যতিক্রমটি ক্যাচ করে এবং তারপরে তার প্রতিশ্রুতির অবস্থাকে rejected করে তার মান থ্রো করা ত্রুটিতে সেট করে। এটি এই প্রতিশ্রুতি ফিরিয়ে দেয়, যা promise1 এ সংরক্ষিত হয়।
6. .then() কোনো প্রতিক্রিয়া কাজের সময়সূচী নির্ধারণ করে না কারণ promise1 rejected অবস্থায় রয়েছে। পরিবর্তে, একটি নতুন প্রতিশ্রুতি ( promise2 ) ফেরত দেওয়া হয়েছে, যা একই ত্রুটির সাথে প্রত্যাখ্যাত অবস্থায় রয়েছে।
7. .catch() প্রদত্ত হ্যান্ডলারের সাথে একটি প্রতিক্রিয়া কাজের সময়সূচী করে এবং একটি নতুন মুলতুবি প্রতিক্রিয়া প্রতিশ্রুতি দেয়, যা promise3 হিসাবে ফেরত দেওয়া হয়। এই মুহুর্তে ডিবাগার জানে যে ত্রুটিটি পরিচালনা করা হবে।
8. যখন প্রতিক্রিয়া টাস্ক চলে, তখন হ্যান্ডলার স্বাভাবিকভাবে ফিরে আসে এবং promise3 এর অবস্থা fulfilled হয়।

পরবর্তী উদাহরণের একটি অনুরূপ কাঠামো আছে কিন্তু মৃত্যুদন্ড সম্পূর্ণ ভিন্ন:

return Promise.resolve()
    .then(() => {throw new Error();})
    .then(() => console.log('Never happened'))
    .catch(() => console.log('Caught'));

এটি এর সমতুল্য:

const promise1 = Promise.resolve();
const promise2 = promise1.then(() => {throw new Error();});
const promise3 = promise2.then(() => console.log('Never happened'));
const promise4 = promise3.catch(() => console.log('Caught'));
return promise4;

এই উদাহরণে, নিম্নলিখিত পদক্ষেপগুলি ঘটবে:

1. একটি Promise fulfilled অবস্থায় তৈরি করা হয় এবং promise1 এ সংরক্ষণ করা হয়।
2. একটি প্রতিশ্রুতি প্রতিক্রিয়া টাস্ক প্রথম বেনামী ফাংশনের সাথে নির্ধারিত হয় এবং এর (pending) প্রতিক্রিয়া প্রতিশ্রুতি promise2 হিসাবে ফেরত দেওয়া হয়।
3. একটি পরিপূর্ণ হ্যান্ডলার এবং তার প্রতিক্রিয়া প্রতিশ্রুতির সাথে promise2 এ একটি প্রতিক্রিয়া যোগ করা হয়, যা promise3 হিসাবে ফেরত দেওয়া হয়।
4. প্রত্যাখ্যাত হ্যান্ডলারের সাথে promise3 এ একটি প্রতিক্রিয়া যোগ করা হয় এবং আরেকটি প্রতিক্রিয়া প্রতিশ্রুতি, যা promise4 হিসাবে ফেরত দেওয়া হয়।
5. পদক্ষেপ 2 এ নির্ধারিত প্রতিক্রিয়া টাস্ক চালানো হয়।
6. হ্যান্ডলার একটি ব্যতিক্রম নিক্ষেপ. এই মুহুর্তে ডিবাগারকে থামাতে হবে কিনা তা সিদ্ধান্ত নিতে হবে। বর্তমানে হ্যান্ডলার হল আপনার একমাত্র চলমান জাভাস্ক্রিপ্ট কোড।
7. কারণ টাস্কটি একটি ব্যতিক্রমের সাথে শেষ হয়, যুক্ত প্রতিক্রিয়া প্রতিশ্রুতি ( promise2 ) প্রত্যাখ্যান অবস্থায় সেট করা হয় এবং এর মানটি ছুঁড়ে দেওয়া ত্রুটিতে সেট করা হয়।
8. যেহেতু promise2 একটি প্রতিক্রিয়া ছিল, এবং সেই প্রতিক্রিয়াটির কোনো প্রত্যাখ্যানকারী হ্যান্ডলার ছিল না, এর প্রতিক্রিয়া প্রতিশ্রুতি ( promise3 ) একই ত্রুটির সাথে rejected জন্য সেট করা হয়েছে।
9. যেহেতু promise3 একটি প্রতিক্রিয়া ছিল, এবং সেই প্রতিক্রিয়াটির একটি প্রত্যাখ্যান হ্যান্ডলার ছিল, একটি প্রতিশ্রুতি প্রতিক্রিয়া কাজ সেই হ্যান্ডলার এবং তার প্রতিক্রিয়া প্রতিশ্রুতির সাথে নির্ধারিত হয় ( promise4 )।
10. যখন সেই প্রতিক্রিয়া টাস্কটি চলে, হ্যান্ডলারটি স্বাভাবিকভাবে ফিরে আসে এবং promise4 এর অবস্থা পরিপূর্ণ হিসাবে পরিবর্তিত হয়।

ধরা ভবিষ্যদ্বাণী জন্য পদ্ধতি

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

প্রথমত, ডিবাগার অনুমান করে যে একটি ফাংশন যা একটি প্রত্যাবর্তিত প্রতিশ্রুতি প্রাপ্ত করে সেই প্রতিশ্রুতি বা একটি প্রাপ্ত প্রতিশ্রুতি ফেরত দিতে পারে যাতে স্ট্যাকের আরও উপরে অ্যাসিঙ্ক্রোনাস ফাংশনগুলি এটির জন্য অপেক্ষা করার সুযোগ পাবে। দ্বিতীয়ত, ডিবাগার অনুমান করে যে যদি একটি প্রতিশ্রুতি একটি অ্যাসিঙ্ক্রোনাস ফাংশনে ফিরিয়ে দেওয়া হয়, তবে এটি শীঘ্রই এটির জন্য অপেক্ষা করবে প্রথমে প্রবেশ না করে বা try...catch ব্লক। এই অনুমানগুলির কোনটিই সঠিক হওয়ার গ্যারান্টিযুক্ত নয় তবে এগুলি অ্যাসিঙ্ক্রোনাস ফাংশন সহ সবচেয়ে সাধারণ কোডিং প্যাটার্নগুলির জন্য সঠিক ভবিষ্যদ্বাণী করার জন্য যথেষ্ট। ক্রোম সংস্করণ 125-এ, আমরা আরেকটি হিউরিস্টিক যোগ করেছি: ডিবাগার চেক করে যে একটি কলকারী .catch() কল করতে চলেছে কিনা তা দুটি আর্গুমেন্ট সহ (বা .then() ফেরত দেওয়া হবে, অথবা .then() বা .finally() এর পরে একটি .catch() বা একটি দ্বি-আর্গুমেন্ট .then() )। এই ক্ষেত্রে, ডিবাগার অনুমান করে যে আমরা যে প্রতিশ্রুতির সন্ধান করছি বা এটির সাথে সম্পর্কিত এইগুলি হল সেই পদ্ধতিগুলি, তাই প্রত্যাখ্যানটি ধরা পড়বে৷

তথ্যের দ্বিতীয় উৎস হল প্রতিশ্রুতি প্রতিক্রিয়া গাছ। ডিবাগার একটি মূল প্রতিশ্রুতি দিয়ে শুরু হয়। কখনও কখনও এটি একটি প্রতিশ্রুতি যার জন্য এটির reject() পদ্ধতিটি বলা হয়েছে। আরও সাধারণভাবে, যখন প্রতিশ্রুতি প্রতিক্রিয়া কাজের সময় একটি ব্যতিক্রম বা প্রত্যাখ্যান ঘটে, এবং কল স্ট্যাকের কোন কিছুই এটি ধরার জন্য প্রদর্শিত হয় না, তখন ডিবাগার প্রতিক্রিয়াটির সাথে যুক্ত প্রতিশ্রুতি থেকে ট্রেস করে। ডিবাগার মুলতুবি প্রতিশ্রুতির সমস্ত প্রতিক্রিয়া দেখে এবং তাদের প্রত্যাখ্যান হ্যান্ডলার আছে কিনা তা দেখে। কোন প্রতিক্রিয়া না হলে, এটি প্রতিক্রিয়া প্রতিশ্রুতি দেখে এবং এটি থেকে পুনরাবৃত্তিমূলকভাবে ট্রেস করে। যদি সমস্ত প্রতিক্রিয়া শেষ পর্যন্ত একটি প্রত্যাখ্যান হ্যান্ডলারের দিকে নিয়ে যায়, ডিবাগার প্রতিশ্রুতি প্রত্যাখ্যানকে ধরা বলে মনে করে। কভার করার জন্য কিছু বিশেষ ক্ষেত্রে আছে, উদাহরণস্বরূপ, একটি .finally() কলের জন্য অন্তর্নির্মিত প্রত্যাখ্যান হ্যান্ডলারকে গণনা না করা।

প্রতিশ্রুতি প্রতিক্রিয়া গাছ তথ্যের একটি নির্ভরযোগ্য উৎস প্রদান করে যদি তথ্য থাকে। কিছু ক্ষেত্রে, যেমন Promise.reject() কে কল করা বা Promise কনস্ট্রাক্টরে বা একটি অ্যাসিঙ্ক ফাংশনে যা এখনও কিছুর জন্য অপেক্ষা করেনি, ট্রেস করার জন্য কোন প্রতিক্রিয়া হবে না এবং ডিবাগারকে একা কল স্ট্যাকের উপর নির্ভর করতে হবে। অন্যান্য ক্ষেত্রে, প্রতিশ্রুতি প্রতিক্রিয়া গাছে সাধারণত ক্যাচের পূর্বাভাস অনুমান করার জন্য প্রয়োজনীয় হ্যান্ডলার থাকে তবে এটি সর্বদা সম্ভব যে পরে আরও হ্যান্ডলার যোগ করা হবে যা ধরা থেকে ধরা না হওয়া বা বিপরীতে ব্যতিক্রম পরিবর্তন করবে। এছাড়াও Promise.all/any/race দ্বারা তৈরি করা প্রতিশ্রুতি রয়েছে, যেখানে গ্রুপের অন্যান্য প্রতিশ্রুতিগুলি কীভাবে প্রত্যাখ্যান করা হয় তা প্রভাবিত করতে পারে। এই পদ্ধতিগুলির জন্য, ডিবাগার অনুমান করে একটি প্রতিশ্রুতি প্রত্যাখ্যান ফরোয়ার্ড করা হবে যদি প্রতিশ্রুতি এখনও মুলতুবি থাকে।

নিম্নলিখিত দুটি উদাহরণ দেখুন:

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

সারাংশ

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

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

স্বীকৃতি

আমাদের গভীর কৃতজ্ঞতা সোফিয়া ইমেলিয়ানোভা এবং জেসেলিন ইয়েনের কাছে তাদের অমূল্য সাহায্যের জন্য এই পোস্টটি সম্পাদনা করার জন্য!