প্রকাশিত: নভেম্বর 13, 2024
একটি পারফরম্যান্স ট্রেস দেখে কল্পনা করুন এবং একটি নির্দিষ্ট এলাকা হাইলাইট করতে চান, যেমন দীর্ঘতম কাজ বা কাজের একটি অপ্রয়োজনীয় অংশ। সম্ভবত আপনি ভবিষ্যতের রেফারেন্সের জন্য নোট তৈরি করতে বা আপনার ফলাফলগুলি একজন সহকর্মীর সাথে ভাগ করতে চেয়েছিলেন। এটা করার সেরা উপায় কি?
অবশ্যই, এটি একটি বিশাল কাগজের টুকরোতে ট্রেসটি মুদ্রণ করছে এবং ম্যানুয়ালি আপনার নোটগুলি আঁকছে এবং লিখছে, বা একটি ট্রেসের স্ক্রিনশটে নোট আঁকতে তৃতীয় পক্ষের সফ্টওয়্যার ব্যবহার করছে! (যদিও এটি এখন পর্যন্ত সেরা উপায় ছিল।)
ডেভেলপার ওয়ার্কফ্লো স্ট্রিমলাইন করার জন্য আমাদের দলের উত্সর্গের অংশ হিসাবে, আমরা সেই বিকল্পগুলির একটি বিকল্প উপস্থাপন করতে পেরে উত্তেজিত: পারফরম্যান্স প্যানেলের মধ্যে ট্রেসে সরাসরি টীকা যোগ করার ক্ষমতা!
এখন, আপনি জায়গায় ট্রেসগুলি টীকা করতে পারেন, সেই টীকাগুলিকে সহজে নেভিগেট করতে পারেন এবং এমনকি সরাসরি ট্রেস ফাইলের মধ্যে সংরক্ষণ করতে পারেন৷ এটি হাইলাইট করা অন্তর্দৃষ্টি শেয়ার করাকে একটি ফাইল পাঠানোর মতোই সহজ করে তোলে, যখন বাহ্যিক সরঞ্জাম বা সমাধানের প্রয়োজনীয়তা দূর করে৷ টীকাগুলি আপনাকে কেবল ডিবাগিং কার্য সম্পাদনে সহায়তা করতে পারে না, তবে আপনার সহকর্মীর সাথে দ্রুত একই পৃষ্ঠায় যেতে বা কী ঘটছে তা তাদের বোঝার উন্নতি করতেও সাহায্য করে।
তিন ধরনের টীকা আছে:
টীকাকৃত সময় ব্যাপ্তি : টাইমলাইনে যেকোন সময় পরিসীমা লেবেল করা
টীকাযুক্ত এন্ট্রি : টাইমলাইনে যেকোনো এন্ট্রিতে একটি লেবেল যোগ করা
এন্ট্রি সংযোগ : যে কোনো দুটি এন্ট্রিকে একটি তীর দিয়ে সংযুক্ত করে তাদের সম্পর্ক দেখান
আসুন প্রতিটি ধরণের টীকা এবং সেগুলি যখন কাজে আসে তখন আপনি নিজেকে খুঁজে পেতে পারেন এমন পরিস্থিতিতে দেখুন।
টীকাকৃত সময় ব্যাপ্তি
DevTools-এ একটি সাধারণ ওয়ার্কফ্লো একটি ধীর মিথস্ক্রিয়া ডিবাগ করার জন্য একটি ট্রেস রেকর্ড করছে। ট্রেস ভিউ প্রথমে অপ্রতিরোধ্য বলে মনে হতে পারে, কিন্তু আপনি নির্দিষ্ট ইভেন্ট হ্যান্ডলার এবং কল স্ট্যাকের উপর ড্রিল ডাউন করার সাথে সাথে এটি অর্থপূর্ণ হতে শুরু করবে। ট্রেস ভিউটি সহজে কাজ করার জন্য আপনি একটি জিনিস করতে পারেন তা হল একটি টীকা তৈরি করা যাতে লেবেল করা হয় যে কীভাবে একটি ব্লক সাধারণত ব্যয় করা হয়। সুতরাং উদাহরণস্বরূপ, ব্যবহারকারীর ইন্টারঅ্যাকশনের পরে অর্থপূর্ণভাবে আপডেট করার জন্য UI-এর সময় পরিসীমা টীকা করা সহায়ক হতে পারে।
একটি সময় পরিসীমা টীকা করতে : Shift ধরে রাখুন এবং ইন্টারঅ্যাকশনের শুরু থেকে UI আপডেটে টেনে আনুন। তারপরে, টীকা তৈরি করতে একটি লেবেল টাইপ করুন। নির্বাচিত পরিসর সঠিক না হলে, টাইপ করার আগে দূরে ক্লিক করে এটি বাতিল করুন। অথবা, একটি টীকা এর লেবেল সম্পাদনা করতে, এটিতে ডাবল ক্লিক করুন৷ এই সময়ে আপনি বিদ্যমান টীকাটির সময়সীমা সামঞ্জস্য করতে পারবেন না৷ যদি সময়সীমা ভুল হয়, টীকাটি মুছুন এবং একটি নতুন তৈরি করুন।
এই টীকাটির সাহায্যে, ব্যবহারকারীর দৃশ্যমান পরিবর্তনের আগে ঘটতে হবে এমন সমস্ত কাজ আপনি পরিষ্কারভাবে দেখতে পাবেন, যাতে আপনি সেই অনুযায়ী আপনার ডিবাগিং ফোকাস করতে পারেন।
টীকাভুক্ত এন্ট্রি
ব্যবহারকারীর-দৃশ্যমান পরিবর্তনটিকে আরও সুস্পষ্ট করতে, আপনি একটি এন্ট্রি লেবেল দিয়ে রূপান্তরের জন্য দায়ী টাস্কটি টীকাও করতে পারেন৷
এন্ট্রির জন্য একটি লেবেল তৈরি করতে : নির্বাচিত এন্ট্রিতে ডাবল-ক্লিক করুন এবং আপনার লেবেল টাইপ করুন বা এন্ট্রিতে ডান-ক্লিক করুন এবং প্রসঙ্গ মেনু থেকে "লেবেল এন্ট্রি" নির্বাচন করুন। একটি টীকাটির লেবেল সম্পাদনা করতে, এন্ট্রি বা লেবেলে ডাবল ক্লিক করুন৷ বিকল্পভাবে, প্রসঙ্গ মেনু থেকে "লেবেল এন্ট্রি" বিকল্পটি নির্বাচন করুন৷
এই এন্ট্রি টীকাগুলির সাহায্যে, মিথস্ক্রিয়াটির জন্য যে কাজটি গুরুত্বপূর্ণ (বা নয়) এবং এটি কতটা সময় নেয় তা চিহ্নিত করা সহজ।
প্রবেশ সংযোগ
তৃতীয় যেভাবে আমরা ট্রেসটি টীকা করতে পারি তা হল মিথস্ক্রিয়া এবং উত্তরণের জন্য দায়ী দীর্ঘ টাস্কের মধ্যে সংযোগ আঁকতে।
এন্ট্রিগুলির মধ্যে একটি সংযোগ তৈরি করতে : যে এন্ট্রিতে আপনি অন্য একটির সাথে সংযোগ করতে চান তাতে ডাবল ক্লিক করুন এবং সেই এন্ট্রির ডানদিকে প্রদর্শিত তীরটিতে ক্লিক করুন৷ এরপরে, আপনি যে এন্ট্রিতে এটি সংযোগ করতে চান সেটিতে ক্লিক করুন। বিকল্পভাবে, এন্ট্রিতে ডান-ক্লিক করুন এবং এন্ট্রি প্রসঙ্গ মেনু থেকে "লিঙ্ক এন্ট্রি" নির্বাচন করুন।
তাই মিথস্ক্রিয়া নিজেই শেষ হয়ে গেলেও, আপনি এই ধরণের টীকা ব্যবহার করতে পারেন আরও স্পষ্টভাবে দেখাতে যে এটি পরবর্তী দীর্ঘ কাজগুলির সাথে কীভাবে সংযুক্ত যা শেষ পর্যন্ত UI কে ব্লক করে।
টীকা মুছুন এবং লুকান
সমস্ত টীকা সাইডবারে টীকা তালিকা দৃশ্য থেকে দ্রুত মুছে ফেলা যেতে পারে। একটি টীকাটির উপর হোভার করা একটি বিন আইকন প্রকাশ করে। টীকাটি মুছে ফেলতে এই আইকনে ক্লিক করুন।
বিকল্পভাবে, একটি নির্দিষ্ট ইভেন্টের সাথে যুক্ত এন্ট্রি লেবেল এবং এন্ট্রি সংযোগ টীকা মুছে ফেলতে, ইভেন্টে ডান-ক্লিক করুন এবং "টীকা মুছুন" নির্বাচন করুন। লেবেল সহ টীকাগুলিও লেবেলটি সরিয়ে এবং টীকা সংরক্ষণ করে মুছে ফেলা যেতে পারে।
আপনি যদি টীকাগুলিকে মুছে না দিয়ে লুকিয়ে রাখতে চান যাতে তারা আপনাকে ট্রেস অন্বেষণ করতে বিরক্ত না করে, শুধু টীকা সাইডবারের নীচে অবস্থিত "টীকা লুকান" চেকবক্সটি চেক করুন৷ এই পছন্দ সংরক্ষণ করা হবে. এই সেটিংটি সক্ষম থাকা অবস্থায় আপনি যখন টীকা সহ একটি ট্রেস লোড করেন, আপনি চেকবক্সটি সাফ না করা পর্যন্ত টীকাগুলি লুকিয়ে থাকবে৷
টীকাযুক্ত ট্রেস সংরক্ষণ করুন বা লোড করুন
দুর্দান্ত, আপনি নিজেকে এবং অন্যদের ট্রেস বোঝাতে সাহায্য করার জন্য এই সমস্ত টীকা যোগ করেছেন। এরপর কি?
টীকা দেওয়ার আগে, পুরানো সময়ের মতো সহকর্মীর কাছে পাঠানোর জন্য ট্রেসের স্ক্রিনশট নেওয়ার দরকার নেই৷ শুধু আপনার টীকা করা ফাইল সংরক্ষণ করুন এবং তাদের সেই ফাইলটি পাঠান। এটাই—তারা পারফরম্যান্স প্যানেলে ফাইলটি আপলোড করতে পারে এবং ট্রেসের প্রসঙ্গে আপনার তৈরি করা সমস্ত টীকা দেখতে পারে, অথবা এমনকি আরও টীকা যোগ করতে পারে এবং সেগুলি আপনার কাছে ফেরত পাঠাতে পারে!
DevTools ট্রেস ভিউতে অন্যান্য ধরনের কাস্টমাইজেশনও সেভ করবে। উদাহরণস্বরূপ, আপনি জুম ইন করে এবং একটি ব্রেডক্রাম্ব সেট করে আগ্রহের একটি এলাকাকে আলাদা করতে পারেন, অথবা অপ্রাসঙ্গিক কল স্ট্যাকগুলিতে এন্ট্রি লুকিয়ে রাখতে পারেন, এবং সেই সমস্ত সেটিংস ট্রেস ফাইলের দ্বারা স্থির থাকবে, কার্যক্ষমতা ডিবাগিং-এ সহযোগিতা করা আরও সহজ করে তুলবে৷ এই সমস্ত কাস্টমাইজেশনের সাহায্যে, আপনি স্ক্রিনশটের বিপরীতে সমগ্র, ইন্টারেক্টিভ ট্রেস-এর প্রসঙ্গ প্রদান করার সময় সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলির প্রতি মনোযোগ আকর্ষণ করতে পারেন।
টীকা এবং অন্যান্য কাস্টমাইজেশন সংরক্ষণ করতে, ডাউনলোড আইকন অধীনে সেভ ট্রেস বিকল্পে ক্লিক করুন। যখন একটি ট্রেস লোড করা হয়, এতে সেই সমস্ত কাস্টমাইজেশন থাকবে। টীকাগুলির সাথে সংরক্ষণ করা হল ডিফল্ট বিকল্প, কিন্তু আপনি যদি শুধুমাত্র কাঁচা ট্রেস ফাইলটি সংরক্ষণ করতে চান তবে টীকা ছাড়াই সংরক্ষণ করুন বিকল্পটি নির্বাচন করুন৷
উপসংহার
এটি শোষণ করার জন্য অনেক তথ্যের মত মনে হতে পারে, কিন্তু চিন্তা করবেন না! টীকা তৈরির নির্দেশাবলী সর্বদা পারফরম্যান্স প্যানেল সাইডবারের টীকা ট্যাবে পাওয়া যাবে। এই ট্যাবটি নির্দেশনা প্রদান করে যখন কোন টীকা বিদ্যমান থাকে না এবং টীকা তৈরি হয়ে গেলে তাদের একটি তালিকা প্রদর্শন করে।
ঠিক তেমনই, পারফরম্যান্স প্যানেলে টীকাগুলি বিকাশকারীদেরকে ব্যক্তিগতকৃত প্রসঙ্গ এবং অন্তর্দৃষ্টি যোগ করে একটি ট্রেসের মধ্যে গুরুত্বপূর্ণ মুহূর্তগুলি চিহ্নিত করতে সক্ষম করে৷ এটি বিশ্লেষণ প্রক্রিয়াটিকে সহজতর করে, পারফরম্যান্স অপ্টিমাইজেশানগুলিতে ভাগ করা এবং সহযোগিতা করা সহজ করে তোলে। পারফরম্যান্স প্যানেলে টীকাগুলি ব্যবহার করে দেখুন এবং আপনি কী ভাবছেন তা আমাদের জানান৷ যদি আপনার কোন প্রতিক্রিয়া থাকে, আমরা পাবলিক ইস্যুতে আপনার মন্তব্য পড়তে চাই।
বাহ্যিক সরঞ্জামগুলির প্রয়োজনকে বিদায় বলুন এবং আরও দক্ষ কর্মপ্রবাহকে হ্যালো বলুন!