ব্যাকগ্রাউন্ড পরিষেবাগুলি ডিবাগ করুন

কেইস বাস্ক
Kayce Basques
সোফিয়া এমেলিয়ানোভা
Sofia Emelianova

Chrome DevTools-এর ব্যাকগ্রাউন্ড সার্ভিসেস বিভাগটি জাভাস্ক্রিপ্ট API-এর জন্য এমন কিছু টুলের সংগ্রহ যা আপনার ওয়েবসাইটকে আপডেট পাঠাতে এবং গ্রহণ করতে সক্ষম করে, এমনকি যখন কোনও ব্যবহারকারী আপনার ওয়েবসাইট খোলা না রাখেন তখনও। একটি ব্যাকগ্রাউন্ড সার্ভিস কার্যকরীভাবে একটি ব্যাকগ্রাউন্ড প্রক্রিয়ার অনুরূপ।

ব্যাকগ্রাউন্ড সার্ভিসেস বিভাগ আপনাকে নিম্নলিখিত ব্যাকগ্রাউন্ড সার্ভিসেস ডিবাগ করতে দেয়:

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

ব্যাকগ্রাউন্ড সার্ভিস ইভেন্ট ছাড়াও, DevTools এগুলি করতে পারে:

ব্যাকগ্রাউন্ড ফেচ

ব্যাকগ্রাউন্ড ফেচ এপিআই একজন পরিষেবা কর্মীকে ব্যাকগ্রাউন্ড পরিষেবা হিসেবে নির্ভরযোগ্যভাবে বৃহৎ রিসোর্স, যেমন সিনেমা বা পডকাস্ট, ডাউনলোড করতে সক্ষম করে। DevTools খোলা না থাকলেও, তিন দিনের জন্য ব্যাকগ্রাউন্ড ফেচ ইভেন্ট লগ করতে:

  1. ব্যাকগ্রাউন্ড ফেচ এপিআই ব্যবহার করে একটি পৃষ্ঠায় DevTools খুলুন
  2. অ্যাপ্লিকেশন > ব্যাকগ্রাউন্ড পরিষেবা > ব্যাকগ্রাউন্ড ফেচ এ নেভিগেট করুন এবং ক্লিক করুন রেকর্ড। রেকর্ড

    ব্যাকগ্রাউন্ড ফেচ প্যান।

  3. আপনার পৃষ্ঠায়, কিছু ব্যাকগ্রাউন্ড ফেচ অ্যাক্টিভিটি ট্রিগার করুন। DevTools ইভেন্টগুলি টেবিলে লগ করে।

    ব্যাকগ্রাউন্ড ফেচ প্যানে ইভেন্টের একটি লগ।

  4. টেবিলের নিচের জায়গায় ইভেন্টের বিশদ বিবরণ দেখতে ইভেন্টে ক্লিক করুন।

  5. আপনি DevTools বন্ধ করে রেকর্ডিং তিন দিন পর্যন্ত চালিয়ে যেতে পারেন। রেকর্ডিং বন্ধ করতে, ক্লিক করুন থামো। থামো

পটভূমি সিঙ্ক

ব্যাকগ্রাউন্ড সিঙ্ক API একজন অফলাইন পরিষেবা কর্মীকে একটি নির্ভরযোগ্য ইন্টারনেট সংযোগ পুনঃস্থাপন করার পরে সার্ভারে ডেটা পাঠাতে সক্ষম করে। DevTools খোলা না থাকলেও, তিন দিনের জন্য ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্ট লগ করতে:

  1. উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় DevTools খুলুন
  2. অ্যাপ্লিকেশন > ব্যাকগ্রাউন্ড পরিষেবা > ব্যাকগ্রাউন্ড সিঙ্কে নেভিগেট করুন এবং ক্লিক করুন রেকর্ড। রেকর্ড

    ব্যাকগ্রাউন্ড সিঙ্ক ফলক।

  3. ডেমো পৃষ্ঠায়, সংশ্লিষ্ট পরিষেবা কর্মীকে নিবন্ধন করতে Register background sync-এ ক্লিক করুন এবং অনুরোধ করা হলে Allow-এ ক্লিক করুন।

    সার্ভিস ওয়ার্কার রেজিস্ট্রেশন হল একটি ব্যাকগ্রাউন্ড সিঙ্ক অ্যাক্টিভিটি। DevTools ইভেন্টগুলিকে টেবিলে লগ করে।

    ব্যাকগ্রাউন্ড সিঙ্ক প্যানে ইভেন্টের একটি লগ।

  4. টেবিলের নিচের জায়গায় ইভেন্টের বিশদ বিবরণ দেখতে ইভেন্টে ক্লিক করুন।

  5. আপনি DevTools বন্ধ করে রেকর্ডিং তিন দিন পর্যন্ত চালিয়ে যেতে পারেন। রেকর্ডিং বন্ধ করতে, ক্লিক করুন থামো। থামো

(পরীক্ষামূলক) বাউন্স ট্র্যাকিং প্রশমন

Chrome-এ বাউন্স ট্র্যাকিং মিটিগেশন পরীক্ষা আপনাকে বাউন্স ট্র্যাকিং কৌশল ব্যবহার করে ক্রস-সাইট ট্র্যাকিং সম্পাদন করে এমন সাইটগুলির অবস্থা সনাক্ত করতে এবং মুছে ফেলতে দেয়। আপনি ম্যানুয়ালি ট্র্যাকিং মিটিগেশন জোর করে করতে পারেন এবং যেসব সাইটের অবস্থা মুছে ফেলা হয়েছে তার একটি তালিকা দেখতে পারেন।

জোর করে ট্র্যাকিং প্রশমন করতে:

  1. Chrome-এ তৃতীয় পক্ষের কুকিজ ব্লক করুন । নেভিগেট করুন এবং সক্ষম করুন তিন-বিন্দু মেনু। > সেটিংস > নিরাপত্তা। গোপনীয়তা এবং নিরাপত্তা > কুকিজ এবং অন্যান্য সাইট ডেটা > রেডিও বোতামটি চেক করা হয়েছে। তৃতীয় পক্ষের কুকিজ ব্লক করুন
  2. chrome://flags এ, Bounce tracking mitigations experiment কে Enabled With Deletion এ সেট করুন।
  3. DevTools খুলুন এবং Application > Background services > Bounce tracking mitigations এ নেভিগেট করুন।
  4. একটি বাউন্স লিঙ্কে ক্লিক করুন এবং Chrome এর বাউন্স রেকর্ড করার জন্য (১০ সেকেন্ড) অপেক্ষা করুন। সমস্যা ট্যাব আপনাকে আসন্ন অবস্থা মুছে ফেলার বিষয়ে সতর্ক করে।
  5. অবিলম্বে অবস্থাটি মুছে ফেলতে "ফোর্স রান" এ ক্লিক করুন।

বাউন্স ট্র্যাকিং মিটিগেশনগুলি একটি অবস্থা মুছে ফেলার তালিকা করে।

বিজ্ঞপ্তি

কোনও পরিষেবা কর্মী সার্ভার থেকে পুশ বার্তা পাওয়ার পর, পরিষেবা কর্মী ব্যবহারকারীকে ডেটা প্রদর্শনের জন্য নোটিফিকেশন API ব্যবহার করেন। DevTools খোলা না থাকলেও, তিন দিনের জন্য নোটিফিকেশন লগ করতে:

  1. DevTools খুলুন
  2. অ্যাপ্লিকেশন > ব্যাকগ্রাউন্ড পরিষেবা > বিজ্ঞপ্তিগুলিতে নেভিগেট করুন এবং ক্লিক করুন রেকর্ড। রেকর্ড

    বিজ্ঞপ্তি ফলক।

  3. বিজ্ঞপ্তি নির্ধারণ করুন ক্লিক করুন এবং অনুরোধ করা হলে অনুমতি দিন

  4. বিজ্ঞপ্তিটি প্রদর্শিত হওয়ার জন্য অপেক্ষা করুন। DevTools বিজ্ঞপ্তি ইভেন্টগুলি টেবিলে লগ করে।

    বিজ্ঞপ্তি ফলকে ইভেন্টের একটি লগ।

  5. টেবিলের নিচের জায়গায় ইভেন্টের বিশদ বিবরণ দেখতে ইভেন্টে ক্লিক করুন।

  6. আপনি DevTools বন্ধ করে রেকর্ডিং তিন দিন পর্যন্ত চালিয়ে যেতে পারেন। রেকর্ডিং বন্ধ করতে, ক্লিক করুন থামো। থামো

অনুমানমূলক বোঝা

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

প্রিফেচ আগে থেকেই একটি রিসোর্স নিয়ে আসে এবং প্রিরেন্ডার আরও এক ধাপ এগিয়ে একটি লুকানো ব্যাকগ্রাউন্ড রেন্ডারার প্রক্রিয়ায় পুরো পৃষ্ঠাটি রেন্ডার করে।

আপনি অ্যাপ্লিকেশন > ব্যাকগ্রাউন্ড সার্ভিস > স্পেকুলেটিভ লোড বিভাগে স্পেকুলেটিভ লোড ডিবাগ করতে পারেন। এই বিভাগে তিনটি ভিউ রয়েছে:

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

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

  1. পৃষ্ঠায় DevTools খুলুন এবং Application > Background services > Speculative loads এ যান। যদি আপনি পৃষ্ঠাটি দ্বারা শুরু করা কোনও speculative load দেখতে না পান, তাহলে এটি পুনরায় লোড করুন।

    এই পৃষ্ঠাটি অনুমানমূলকভাবে লোড করা URL গুলি, দুটি সফলতা এবং একটি ব্যর্থতা।

  2. ডেমোর শুরুর পৃষ্ঠাটি দুটি পৃষ্ঠা প্রিরেন্ডার করে এবং একটি প্রিরেন্ডার করতে ব্যর্থ হয়। View all speculations এ ক্লিক করুন।

  3. Speculations বিভাগে, ব্যর্থতার স্থিতি সহ অনুমান নির্বাচন করুন এবং নীচে বিস্তারিত তথ্য সহ ব্যর্থতার কারণ বিভাগটি দেখুন।

    ব্যর্থ জল্পনা নির্বাচিত।

    এই ক্ষেত্রে, প্রিরেন্ডার ব্যর্থ হয়েছে কারণ ওয়েবসাইটে কোন /next3.html পৃষ্ঠা নেই।

  4. "নিয়ম" বিভাগটি খুলুন এবং নীচের দিকে " স্থিতি" এ ক্লিক করুন। "নিয়ম" লিঙ্কে ক্লিক করলে আপনি "এলিমেন্টস" প্যানেলে যাবেন এবং আপনাকে দেখাবেন যে "অনুমান নিয়ম" কোথায় সংজ্ঞায়িত করা হয়েছে।

    নিয়ম সেটের লিঙ্ক সহ নিয়ম বিভাগ।

আরও বিস্তারিত ওয়াকথ্রুর জন্য, ডিবাগিং অনুমানের নিয়ম দেখুন।

পুশ মেসেজিং

ব্যবহারকারীকে পুশ নোটিফিকেশন প্রদর্শনের জন্য, একজন পরিষেবা কর্মীকে প্রথমে সার্ভার থেকে ডেটা গ্রহণের জন্য পুশ মেসেজ API ব্যবহার করতে হবে। যখন পরিষেবা কর্মী বিজ্ঞপ্তি প্রদর্শনের জন্য প্রস্তুত হন, তখন তারা নোটিফিকেশন API ব্যবহার করে। DevTools খোলা না থাকলেও, তিন দিনের জন্য পুশ মেসেজ লগ করতে:

  1. উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় DevTools খুলুন
  2. অ্যাপ্লিকেশন > ব্যাকগ্রাউন্ড পরিষেবা > পুশ মেসেজিং- এ নেভিগেট করুন এবং ক্লিক করুন রেকর্ড। রেকর্ড

    পুশ মেসেজিং ফলক।

  3. ডেমো পৃষ্ঠায়, পুশ বিজ্ঞপ্তি সক্ষম করুন টগল করুন, অনুরোধ করা হলে অনুমতি দিন ক্লিক করুন, একটি বার্তা টাইপ করুন এবং এটি পাঠান। DevTools টেবিলে পুশ বিজ্ঞপ্তি ইভেন্টগুলি লগ করে।

    পুশ মেসেজিং প্যানে ইভেন্টের একটি লগ।

  4. টেবিলের নিচের জায়গায় ইভেন্টের বিশদ বিবরণ দেখতে ইভেন্টে ক্লিক করুন।

  5. আপনি DevTools বন্ধ করে রেকর্ডিং তিন দিন পর্যন্ত চালিয়ে যেতে পারেন। রেকর্ডিং বন্ধ করতে, ক্লিক করুন থামো। থামো

রিপোর্টিং এপিআই

কিছু ত্রুটি কেবল উৎপাদনের সময় ঘটে। আপনি স্থানীয়ভাবে বা উন্নয়নের সময় এগুলি কখনই দেখতে পাবেন না কারণ প্রকৃত ব্যবহারকারী, নেটওয়ার্ক এবং ডিভাইসগুলি খেলাটি পরিবর্তন করে।

উদাহরণস্বরূপ, ধরুন আপনার নতুন সাইটটি গুরুত্বপূর্ণ স্ক্রিপ্ট লোড করার জন্য তৃতীয় পক্ষের সফ্টওয়্যারের উপর নির্ভর করে যা document.write() ব্যবহার করে। সারা বিশ্ব জুড়ে নতুন ব্যবহারকারীরা আপনার সাইটটি খোলেন কিন্তু তাদের সংযোগগুলি আপনার পরীক্ষা করা সংযোগের চেয়ে ধীর হতে পারে। আপনার অজানা, আপনার সাইটটি তাদের জন্য ভাঙতে শুরু করে কারণ Chrome ধীর নেটওয়ার্কগুলিতে document.write() এর বিরুদ্ধে হস্তক্ষেপ করে। বিকল্পভাবে, আপনি আপনার কোডবেস ব্যবহার করা বন্ধ বা শীঘ্রই বন্ধ হতে যাওয়া API গুলির উপর নজর রাখতে পারেন।

রিপোর্টিং API টি এমনভাবে তৈরি করা হয়েছে যাতে আপনি অবচিত API কল, আপনার পৃষ্ঠার নিরাপত্তা লঙ্ঘন এবং আরও অনেক কিছু পর্যবেক্ষণ করতে পারেন। আপনি রিপোর্টিং API ব্যবহার করে আপনার ওয়েব অ্যাপ্লিকেশন পর্যবেক্ষণে বর্ণিত পদ্ধতিতে রিপোর্টিং সেট আপ করতে পারেন।

একটি পৃষ্ঠা দ্বারা তৈরি প্রতিবেদনগুলি দেখতে:

  1. chrome://flags/#enable-experimental-web-platform-features এ যান, Experimental Web Platform features কে Enabled এ সেট করুন এবং Chrome পুনরায় চালু করুন।
  2. DevTools খুলুন এবং Application > Background services > Reporting API এ নেভিগেট করুন।

    রিপোর্টিং API-তে তালিকাভুক্ত রিপোর্টগুলি

রিপোর্টিং এপিআই ট্যাবটি তিনটি ভাগে বিভক্ত:

  • প্রতিটি প্রতিবেদনের উপর নিম্নলিখিত তথ্য সহ প্রতিবেদন সারণী:
    • রিপোর্ট তৈরির কারণ URL
    • লঙ্ঘনের ধরণ
    • রিপোর্ট স্ট্যাটাস
    • গন্তব্যস্থলের শেষ বিন্দু
    • টাইমস্ট্যাম্পে তৈরি করা হয়েছে
    • প্রতিবেদনের মূল অংশ
  • রিপোর্ট বডি প্রিভিউ বিভাগ। রিপোর্ট বডি প্রিভিউ করতে, রিপোর্টের টেবিলে একটি রিপোর্টে ক্লিক করুন।
  • Reporting-Endpoints হেডারে কনফিগার করা সমস্ত এন্ডপয়েন্টের একটি ওভারভিউ সহ এন্ডপয়েন্টস বিভাগ।

রিপোর্ট স্ট্যাটাস

স্থিতি কলামটি আপনাকে জানাবে যে Chrome রিপোর্টটি সফলভাবে পাঠিয়েছে, পাঠাতে চলেছে, নাকি ব্যর্থ হয়েছে।

অবস্থা বিবরণ
Success ব্রাউজারটি রিপোর্টটি পাঠিয়েছে এবং এন্ডপয়েন্টটি একটি সাফল্য কোড ( 200 অথবা অন্য কোনও সাফল্য প্রতিক্রিয়া কোড 2xx ) দিয়ে উত্তর দিয়েছে।
Pending ব্রাউজারটি রিপোর্টটি পাঠানোর চেষ্টা করছে।
Queued রিপোর্টটি তৈরি করা হয়েছে এবং ব্রাউজারটি এখনও এটি পাঠানোর চেষ্টা করছে না। এই দুটি ক্ষেত্রে একটিতে একটি রিপোর্ট Queued হিসাবে প্রদর্শিত হয়:
  • রিপোর্টটি নতুন এবং ব্রাউজারটি এটি পাঠানোর চেষ্টা করার আগে আরও রিপোর্ট আসে কিনা তা দেখার জন্য অপেক্ষা করছে।
  • এই রিপোর্টটি নতুন নয়; ব্রাউজারটি ইতিমধ্যেই এই রিপোর্টটি পাঠানোর চেষ্টা করেছে এবং ব্যর্থ হয়েছে, এবং আবার চেষ্টা করার আগে অপেক্ষা করছে।
MarkedForRemoval কিছুক্ষণ পুনরায় চেষ্টা করার পর ( Queued ), ব্রাউজারটি রিপোর্ট পাঠানোর চেষ্টা বন্ধ করে দিয়েছে এবং শীঘ্রই এটি পাঠানোর জন্য রিপোর্টের তালিকা থেকে সরিয়ে দেবে।

রিপোর্টগুলি সফলভাবে পাঠানো হোক বা না হোক, কিছুক্ষণ পরে মুছে ফেলা হয়।