Chrome DevTools Revolutions 2013

Arthur Evans

Tim Statler

ভূমিকা

ওয়েব অ্যাপ্লিকেশনগুলির জটিলতা এবং কার্যকারিতা যেমন বেড়েছে, তেমনি Chrome DevToolsও বেড়েছে। পল আইরিশের Google I/O 2013 টক Chrome DevTools Revolutions 2013- এর এই সংক্ষিপ্ত বিবরণে, আপনি সাম্প্রতিক বৈশিষ্ট্যগুলি দেখতে পাবেন যেগুলি আপনি কীভাবে ওয়েব অ্যাপ্লিকেশন তৈরি এবং পরীক্ষা করছেন তাতে বিপ্লব ঘটছে৷

আপনি যদি পলের বক্তৃতা মিস করেন, আপনি এটি উপরে ধরতে পারেন (এগিয়ে যান, আমরা অপেক্ষা করব) অথবা আপনি সরাসরি বৈশিষ্ট্য রাউন্ডআপে কাটাতে পারেন:

• ওয়ার্কস্পেস আপনাকে আপনার সোর্স কোড এডিটর হিসাবে DevTools ব্যবহার করতে দেয়।
• আপনি যদি Sass ব্যবহার করেন, তাহলে আপনি DevTools-এর মধ্যে Sass (.scss) ফাইলগুলিকে লাইভ-সম্পাদনা করার ক্ষমতা পছন্দ করবেন এবং আপনার পরিবর্তনগুলি অবিলম্বে পৃষ্ঠায় প্রতিফলিত দেখতে পাবেন।
• অ্যান্ড্রয়েডের জন্য ক্রোমে দূরবর্তীভাবে পৃষ্ঠাগুলি ডিবাগ করা কিছু সময়ের জন্য সম্ভব হয়েছে, তবে ADB এক্সটেনশনটি অ্যান্ড্রয়েড ডিভাইসগুলির সাথে সংযোগ করা সহজ করে তোলে৷ বিপরীত পোর্ট ফরওয়ার্ডিং আপনাকে সহজেই আপনার ডিভাইস থেকে আপনার ডেভেলপমেন্ট মেশিনে লোকালহোস্টের সাথে সংযোগ করতে দেয়।
• ওয়েব অ্যাপ্লিকেশানগুলিতে পারফরম্যান্স সর্বদা একটি উদ্বেগের বিষয়, এবং আপনাকে বাধাগুলি ট্র্যাক করতে সহায়তা করার জন্য DevTools-এ বেশ কয়েকটি নতুন বৈশিষ্ট্য রয়েছে, যার মধ্যে রয়েছে CPU প্রোফাইলিংয়ের জন্য নতুন ফ্লেম চার্ট ভিজ্যুয়ালাইজেশন এবং রেন্ডারিং এবং মেমরি ব্যবহার সম্পর্কিত পারফরম্যান্স সমস্যা ডিবাগ করার জন্য বেশ কয়েকটি নতুন সরঞ্জাম।

এই বৈশিষ্ট্যগুলি Chrome 28-এ লাইভ, এখন স্থিতিশীল আপডেট চ্যানেলে উপলব্ধ৷

কর্মক্ষেত্র

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

নীচের স্ক্রিনশটটি কর্মক্ষেত্রে কর্মক্ষেত্রের একটি উদাহরণ দেখায়। ক্যালেন্ডার সাইটটি লোকালহোস্টের উপর লোড করা হয়েছে, যখন সোর্স প্যানেল সাইটের রুট ফোল্ডারের স্থানীয় ফাইল সিস্টেম ভিউ দেখায়। এই ফোল্ডারের ফাইলগুলিতে আপনার করা সম্পাদনাগুলি ডিস্কে স্থায়ী হয়৷ নীচের স্ক্রিনশটে, Calendar.css-এ কিছু অসংরক্ষিত পরিবর্তন করা হয়েছে, তাই ফাইলের নামের পাশে একটি তারকাচিহ্ন রাখা হয়েছে।

Control+S বা Command+S চাপলে ডিস্কের পরিবর্তনগুলি বজায় থাকে।

একইভাবে, আপনি উপাদান প্যানেলে একটি উপাদানের শৈলীতে যে পরিবর্তনগুলি করেন তা উত্স প্যানেল এবং আপনার বহিরাগত সম্পাদক উভয়েই প্রতিফলিত হয়৷ উল্লেখ্য যে:

• এলিমেন্টস প্যানেলে DOM পরিবর্তনগুলি স্থায়ী হয় না । এলিমেন্টস প্যানেলে শুধুমাত্র শৈলী পরিবর্তনগুলি অব্যাহত থাকে।
• শুধুমাত্র একটি বহিরাগত CSS ফাইলে সংজ্ঞায়িত শৈলী পরিবর্তন করা যেতে পারে। element.style বা ইনলাইন শৈলীতে পরিবর্তনগুলি ডিস্কে ফিরে আসে না। আপনার যদি ইনলাইন শৈলী থাকে তবে সেগুলি উৎস প্যানেলে পরিবর্তন করা যেতে পারে।
• উপাদান প্যানেলে শৈলী পরিবর্তন অবিলম্বে অব্যাহত থাকে; আপনাকে Control+S বা Command+S টিপতে হবে না।

একটি ওয়ার্কস্পেস ফোল্ডার যোগ করা হচ্ছে

ওয়ার্কস্পেস ব্যবহার করার দুটি অংশ রয়েছে: একটি স্থানীয় ফোল্ডারের বিষয়বস্তু DevTools-এ উপলব্ধ করা এবং সেই ফোল্ডারটিকে একটি URL-এ ম্যাপ করা৷

একটি নতুন ওয়ার্কস্পেস ফোল্ডার যোগ করতে:

1. DevTools-এ, সেটিংস-এ ক্লিক করুন DevTools সেটিংস খুলতে।
2. ওয়ার্কস্পেস ক্লিক করুন।
3. ফোল্ডার যোগ করুন ক্লিক করুন।
4. আপনার প্রকল্পের সোর্স ফাইল ধারণকারী ফোল্ডারে ব্রাউজ করুন এবং নির্বাচন ক্লিক করুন।
5. অনুরোধ করা হলে, DevTools ফোল্ডারে সম্পূর্ণ অ্যাক্সেসের অনুমতি দিতে অনুমতিতে ক্লিক করুন।

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

একটি URL-এ একটি ফোল্ডার ম্যাপিং

একবার আপনি একটি ওয়ার্কস্পেস ফোল্ডার যোগ করলে আপনি এটিকে একটি URL এ ম্যাপ করতে পারেন। যখনই Chrome নির্দিষ্ট URL লোড করে, উৎস প্যানেল নেটওয়ার্ক ফোল্ডার সামগ্রীর জায়গায় ওয়ার্কস্পেস ফোল্ডার সামগ্রীগুলি প্রদর্শন করে৷

একটি URL এ একটি ওয়ার্কস্পেস ফোল্ডার ম্যাপ করতে:

1. উত্স প্যানেলে, ওয়ার্কস্পেস ফোল্ডারে একটি ফাইলের উপর ডান-ক্লিক করুন বা কন্ট্রোল+ক্লিক করুন।
2. নেটওয়ার্ক রিসোর্সে মানচিত্র নির্বাচন করুন।

   

3. বর্তমানে লোড করা পৃষ্ঠা থেকে সংশ্লিষ্ট নেটওয়ার্ক সংস্থান নির্বাচন করুন।

   

4. Chrome এ পৃষ্ঠাটি পুনরায় লোড করুন।

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

দ্রষ্টব্য: আপনি যদি এখনও স্থানীয় হোস্ট উত্সগুলি দেখতে পান তবে Chrome-এ পৃষ্ঠাটি রিফ্রেশ করুন৷

একটি ওয়ার্কস্পেস ফোল্ডারে একটি নেটওয়ার্ক ফোল্ডার লিঙ্ক করার অন্য দুটি উপায় আছে:

• নেটওয়ার্ক রিসোর্সে রাইট-ক্লিক করুন (বা কন্ট্রোল+ক্লিক করুন) এবং ম্যাপ টু ফাইল সিস্টেম রিসোর্স নির্বাচন করুন।
• DevTools সেটিংস ডায়ালগের ওয়ার্কস্পেস ট্যাবে ম্যানুয়ালি ম্যাপিং যোগ করুন।

Sass/CSS সোর্স ম্যাপ ডিবাগিং

Sass (CSS উত্স মানচিত্র) ডিবাগিং আপনাকে উত্স প্যানেলে Sass (.scss) ফাইলগুলিকে লাইভ-সম্পাদনা করতে দেয় এবং DevTools ছেড়ে বা পৃষ্ঠাটি রিফ্রেশ না করেই ফলাফলগুলি দেখতে দেয়৷ আপনি যখন একটি উপাদান পরিদর্শন করেন যার শৈলীগুলি একটি Sass-উত্পাদিত CSS ফাইল দ্বারা সরবরাহ করা হয়, তখন Elements প্যানেল .scss ফাইলের একটি লিঙ্ক প্রদর্শন করে, উত্পন্ন .css ফাইল নয়।

লিঙ্কটিতে ক্লিক করলে উৎস প্যানেলে (সম্পাদনাযোগ্য) SCSS ফাইলটি খোলে। আপনি এই ফাইলে আপনি চান যে কোনো পরিবর্তন করতে পারেন.

আপনি যখন একটি SCSS ফাইলে (DevTools বা অন্য কোথাও) পরিবর্তনগুলি সংরক্ষণ করেন, তখন Sass কম্পাইলার CSS ফাইলগুলি পুনরায় তৈরি করে। তারপর DevTools নতুন জেনারেট হওয়া CSS ফাইলটি পুনরায় লোড করে।

দ্রষ্টব্য: প্রযুক্তিগতভাবে এই বৈশিষ্ট্যটি উৎস মানচিত্র সমর্থন করে এমন যেকোনো CSS প্রিপ্রসেসরের সাথে কাজ করা উচিত। আরও তথ্যের জন্য, DevTools ডকুমেন্টেশনে CSS প্রিপ্রসেসরের সাথে কাজ করা পড়ুন।

Sass ডিবাগিং ব্যবহার করে

ক্রোমে Sass ডিবাগিং ব্যবহার করার জন্য আপনার কাছে Sass কম্পাইলারের প্রাক-রিলিজ সংস্করণ থাকতে হবে, এটিই একমাত্র সংস্করণ যা বর্তমানে সোর্স ম্যাপ জেনারেশন সমর্থন করে।

gem install sass -v '>=3.3.0alpha' --pre

এছাড়াও আপনাকে DevTools পরীক্ষায় Sass ডিবাগিং বৈশিষ্ট্য সক্ষম করতে হবে:

1. সম্পর্কে খুলুন: Chrome-এ পতাকা ।
2. বিকাশকারী সরঞ্জাম পরীক্ষাগুলি সক্ষম করুন।
3. Chrome পুনরায় চালু করুন।
4. DevTools সেটিংস খুলুন এবং পরীক্ষায় ক্লিক করুন।
5. Sass এর জন্য সমর্থন চালু করুন (বা Sass স্টাইলশীট ডিবাগিং , আপনি যে ব্রাউজার সংস্করণটি ব্যবহার করছেন তার উপর নির্ভর করে)।

Sass ইনস্টল হয়ে গেলে, আপনার Sass সোর্স ফাইলে পরিবর্তন দেখতে Sass কম্পাইলার শুরু করুন এবং প্রতিটি জেনারেট করা CSS ফাইলের জন্য সোর্স ম্যাপ ফাইল তৈরি করুন, উদাহরণস্বরূপ:

sass --watch **--sourcemap** sass/styles.scss:styles.css

আপনি যদি কম্পাস ব্যবহার করেন তবে মনে রাখবেন যে কম্পাস এখনও Sass-এর প্রাক-রিলিজ সংস্করণ সমর্থন করে না, তাই আপনি কম্পাসের সাথে Sass ডিবাগিং ব্যবহার করতে পারবেন না।

এটা কিভাবে কাজ করে

প্রতিটি SCSS সোর্স ফাইলের জন্য এটি প্রক্রিয়া করে, Sass কম্পাইলার কম্পাইল করা CSS ছাড়াও একটি সোর্স ম্যাপ ফাইল (.map ফাইল) তৈরি করে। সোর্স ম্যাপ ফাইল হল একটি JSON ফাইল যা .scss ফাইল এবং .css ফাইলগুলির মধ্যে ম্যাপিংগুলিকে সংজ্ঞায়িত করে৷ প্রতিটি CSS ফাইলে একটি টীকা থাকে যা একটি বিশেষ মন্তব্যে এমবেড করা তার উৎস মানচিত্র ফাইলের URL নির্দিষ্ট করে:

/*# sourceMappingURL=<url>; */

উদাহরণস্বরূপ, নিম্নলিখিত SCSS ফাইল দেওয়া হয়েছে:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

সোর্সম্যাপিংইউআরএল টীকা সহ Sass এর মতো একটি CSS ফাইল তৈরি করে:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

নীচে একটি উদাহরণ উত্স মানচিত্র ফাইল:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

অ্যান্ড্রয়েডের জন্য ক্রোমে সহজে রিমোট ডিবাগিং

DevTools-এ কয়েকটি নতুন বৈশিষ্ট্য Android এর জন্য Chrome-এ রিমোট ডিবাগিংকে সেটআপ করা সহজ করে তোলে: ADB এক্সটেনশন এবং রিভার্স পোর্ট ফরওয়ার্ডিং।

ADB Chrome এক্সটেনশন রিমোট ডিবাগিং সেট আপ করার প্রক্রিয়াটিকে সহজ করে। এটি নিম্নলিখিত সুবিধা প্রদান করে:

• অ্যান্ড্রয়েড ডিবাগ ব্রিজ (এডিবি) বান্ডেল করে যাতে আপনাকে এটি ইনস্টল করতে হবে না।
• কোন কমান্ড লাইন মিথস্ক্রিয়া প্রয়োজন.
• ADB ডেমন সহজে শুরু এবং বন্ধ করার জন্য এবং সংযুক্ত ডিভাইসগুলি দেখার জন্য UI।

বিপরীত পোর্ট ফরওয়ার্ডিং আপনার লোকালহোস্টে চলমান একটি ওয়েব সার্ভারের সাথে Android-এ Chrome সংযোগ করা সহজ করে তোলে, যা কিছু নেটওয়ার্ক পরিবেশ কিছু DNS কৌশল ছাড়াই কঠিন করে তোলে।

ADB এক্সটেনশন ব্যবহার করে

প্রথমে, Chrome ওয়েব স্টোর থেকে ADB Chrome এক্সটেনশন ইনস্টল করুন। এক্সটেনশন ইনস্টল করতে Chrome এ Add এ ক্লিক করুন।

দ্রষ্টব্য: ক্রোম ওয়েব স্টোর থেকে এক্সটেনশন ইনস্টল করা Windows 8 এ সমর্থিত নয়। আপনার যদি Chrome ওয়েব স্টোর থেকে ইনস্টল করতে কোনো সমস্যা হয়, তাহলে বিকল্প ইনস্টলেশন নির্দেশাবলীর জন্য অ্যান্ড্রয়েডে রিমোট ডিবাগিং দেখুন।

একবার ইন্সটল করলে, ক্রোমে একটি ধূসর অ্যান্ড্রয়েড মেনু আইকন দেখা যাবে। ADB শুরু করতে, আইকনে ক্লিক করুন এবং তারপরে স্টার্ট ADB-এ ক্লিক করুন।

একবার ADB শুরু হয়ে গেলে, মেনু আইকনটি সবুজ হয়ে যায় এবং বর্তমানে সংযুক্ত ডিভাইসের সংখ্যা প্রদর্শন করে, যদি থাকে।

সম্পর্কে:পরিদর্শন পৃষ্ঠাটি খুলতে ডিভাইস দেখুন ক্লিক করুন যা প্রতিটি সংযুক্ত ডিভাইস এবং এর ট্যাবগুলি প্রদর্শন করে। DevTools-এ একটি ট্যাব পরিদর্শন করতে, তার URL-এর পাশের "পরিদর্শন" লিঙ্কে ক্লিক করুন।

আপনি যদি কোনো সংযুক্ত ডিভাইস দেখতে না পান, তাহলে আপনার ডিভাইস USB-এর সাথে সংযুক্ত আছে কিনা এবং Android সেটিংসের জন্য Chrome-এ USB ডিবাগিং সক্ষম করা আছে কিনা দেখে নিন। আরও বিশদ নির্দেশাবলী এবং সমস্যা সমাধানের পদক্ষেপের জন্য, Android এ রিমোট ডিবাগিং দেখুন।

বিপরীত পোর্ট ফরওয়ার্ডিং (পরীক্ষামূলক)

সাধারণত আপনার স্থানীয় ডেভেলপমেন্ট মেশিনে একটি ওয়েব সার্ভার চলছে এবং আপনি আপনার ডিভাইস থেকে সেই সাইটে সংযোগ করতে চান। ডেভেলপমেন্ট মেশিন এবং ডিভাইস একই নেটওয়ার্কে থাকলে, এটি সোজা। কিন্তু কিছু ক্ষেত্রে, সীমাবদ্ধ কর্পোরেট নেটওয়ার্কের মতো, কিছু চতুর DNS কৌশল ছাড়া এটি সম্ভব নাও হতে পারে। অ্যান্ড্রয়েডের জন্য Chrome-এ একটি নতুন বৈশিষ্ট্য যাকে বলা হয় বিপরীত পোর্ট ফরওয়ার্ডিং এটিকে সহজ করে তোলে৷ এটি আপনার ডিভাইসে একটি শোনার TCP পোর্ট তৈরি করে কাজ করে যা USB-এর মাধ্যমে আপনার ডেভেলপমেন্ট মেশিনের একটি নির্দিষ্ট TCP পোর্টে ট্র্যাফিক ফরওয়ার্ড করে।

এই বৈশিষ্ট্যটি ব্যবহার করতে আপনার প্রয়োজন হবে:

• আপনার ডেভেলপমেন্ট মেশিনে Chrome 28 বা তার পরে ইনস্টল করা হয়েছে
• আপনার ডিভাইসে Android বিটার জন্য Chrome ইনস্টল করা হয়েছে
• আপনার ডেভেলপমেন্ট মেশিনে Android ডিবাগ ব্রিজ (ADB Chrome এক্সটেনশন বা সম্পূর্ণ Android SDK) ইনস্টল করা আছে

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

প্রথমে, বিপরীত পোর্ট ফরওয়ার্ডিং সক্ষম করুন:

1. আপনার ডেভেলপমেন্ট মেশিনে Chrome খুলুন।
2. সম্পর্কে:পতাকাগুলিতে , বিকাশকারী সরঞ্জাম পরীক্ষাগুলি সক্ষম করুন এবং Chrome পুনরায় চালু করুন৷
3. সম্পর্কে খুলুন: পরিদর্শন করুন । আপনার মোবাইল ডিভাইস এবং এর খোলা ট্যাবগুলির একটি তালিকা দেখতে হবে।
4. তালিকাভুক্ত যেকোনো সাইটের পাশের "পরিদর্শন" লিঙ্কে ক্লিক করুন।
5. খোলে DevTools উইন্ডোতে, সেটিংস প্যানেল খুলুন।
6. পরীক্ষা-নিরীক্ষার অধীনে, বিপরীত পোর্ট ফরওয়ার্ডিং সক্ষম করুন।
7. DevTools উইন্ডো বন্ধ করুন এবং about:inspect এ ফিরে যান।

তারপর একটি পোর্ট ফরওয়ার্ডিং নিয়ম যোগ করুন:

1. DevTools খুলতে আবার "পরিদর্শন" লিঙ্কে ক্লিক করুন এবং আবার DevTools সেটিংস খুলুন।
2. পোর্ট ফরওয়ার্ডিং ট্যাবে ক্লিক করুন।
3. ডিভাইস পোর্ট ফিল্ডে, আপনার অ্যান্ড্রয়েড ডিভাইসে Chrome-এর সাথে সংযুক্ত হওয়া উচিত পোর্ট নম্বরটি লিখুন (ডিফল্ট 8080)।
4. টার্গেট ফিল্ডে, পোর্ট নম্বর যোগ করুন যেখানে আপনার ওয়েব অ্যাপ্লিকেশনটি আপনার ডেভেলপমেন্ট মেশিনে চলছে।

   

5. অ্যান্ড্রয়েডের জন্য ক্রোমে, লোকালহোস্ট খুলুন: , কোথায় আপনি ডিভাইস পোর্ট ক্ষেত্রে প্রবেশ করা মান (ডিফল্ট হল 8080)।

আপনি আপনার ডেভেলপমেন্ট মেশিন দ্বারা পরিবেশিত বিষয়বস্তু দেখতে হবে.

জাভাস্ক্রিপ্ট প্রোফাইলের জন্য ফ্লেম চার্ট ভিজ্যুয়ালাইজেশন

নতুন ফ্লেম চার্ট ভিউ সময়ের সাথে জাভাস্ক্রিপ্ট প্রক্রিয়াকরণের একটি ভিজ্যুয়াল উপস্থাপনা প্রদান করে, যা টাইমলাইন এবং নেটওয়ার্ক প্যানেলে পাওয়া যায়।

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

বিস্তারিত দেখুন একটি কল স্ট্যাক ফাংশন "ব্লক" এর একটি স্ট্যাক হিসাবে উপস্থাপিত হয়। একটি ব্লক যা অন্যটির উপরে বসে তাকে নিম্ন ফাংশন ব্লক বলে। একটি প্রদত্ত ব্লকের উপর ঘোরানো তার ফাংশনের নাম এবং সময় ডেটা প্রদর্শন করে:

• নাম - ফাংশনের নাম।
• সেল্ফ টাইম — ফাংশনের বর্তমান আমন্ত্রণটি সম্পূর্ণ করতে কত সময় লেগেছে, শুধুমাত্র ফাংশনের বিবৃতিগুলি সহ, এটি যে ফাংশনকে কল করেছে তা অন্তর্ভুক্ত করে না।
• মোট সময় — এই ফাংশনের বর্তমান আমন্ত্রণ এবং এটি যে কোনও ফাংশনকে কল করে তা সম্পূর্ণ করতে যে সময় লেগেছে।
• এগ্রিগেটেড সেলফ টাইম — রেকর্ডিং জুড়ে ফাংশনের সমস্ত আহ্বানের জন্য সামগ্রিক সময়, এই ফাংশন দ্বারা ডাকা ফাংশনগুলি অন্তর্ভুক্ত নয় ।
• সমষ্টিগত মোট সময় — এই ফাংশন দ্বারা বলা ফাংশন সহ ফাংশনের সমস্ত আহ্বানের জন্য মোট সময়।

একটি ফাংশন ব্লকে ক্লিক করলে তার ধারণকারী জাভাস্ক্রিপ্ট ফাইলটি সোর্স প্যানেলে খোলে, যেখানে ফাংশনটি সংজ্ঞায়িত করা হয়েছে।

শিখা চার্ট ব্যবহার করতে:

1. DevTools-এ, প্রোফাইল ট্যাবে ক্লিক করুন।
2. রেকর্ড জাভাস্ক্রিপ্ট সিপিইউ প্রোফাইল বেছে নিন এবং শুরুতে ক্লিক করুন।
3. আপনার ডেটা সংগ্রহ করা শেষ হলে, থামুন ক্লিক করুন।
4. প্রোফাইল ভিউতে, ফ্লেম চার্ট ভিজ্যুয়ালাইজেশন নির্বাচন করুন।

   

পাঁচটি মূল কর্মক্ষমতা পরিমাপ বৈশিষ্ট্য

DevTools-এ বৈপ্লবিক অগ্রগতির এই সমীক্ষাকে রাউন্ড করা হল পারফরম্যান্স সংক্রান্ত সমস্যাগুলির তদন্তের জন্য বেশ কিছু নতুন বৈশিষ্ট্য:

• ক্রমাগত পেইন্টিং মোড
• পেইন্ট আয়তক্ষেত্র এবং স্তর সীমানা দেখানো হচ্ছে
• FPS মিটার
• জোর করে সিঙ্ক্রোনাস লেআউট খোঁজা (লেআউট থ্র্যাশিং)
• বস্তু বরাদ্দ ট্র্যাকিং

ক্রমাগত পেইন্টিং মোড

অবিচ্ছিন্ন পেইন্টিং মোড হল DevTools সেটিংসে একটি বিকল্প ( রেন্ডারিং > ক্রমাগত পৃষ্ঠা পুনরায় পেইন্টিং সক্ষম করুন ) যা আপনাকে পৃথক উপাদান বা CSS শৈলীগুলির রেন্ডারিং খরচ সনাক্ত করতে সহায়তা করে৷

সাধারনত, ক্রোম শুধুমাত্র লেআউট বা শৈলী পরিবর্তনের প্রতিক্রিয়া হিসাবে স্ক্রিনে পেইন্ট করে এবং স্ক্রিনের শুধুমাত্র সেই অঞ্চলগুলিকে আপডেট করতে হবে। আপনি যখন ক্রমাগত পৃষ্ঠা পুনরায় রং করতে সক্ষম হন, তখন সমগ্র স্ক্রীনটি ক্রমাগত পুনরায় রং করা হয়। একটি হেড-আপ ডিসপ্লে দেখায় যে পৃষ্ঠাটি আঁকতে ক্রোম কত সময় নিচ্ছে, সেইসাথে সময়ের পরিসর এবং সাম্প্রতিক পেইন্ট সময়ের বিতরণ দেখানো একটি গ্রাফ। হিস্টোগ্রাম জুড়ে অনুভূমিক রেখাটি 16.6 ms চিহ্ন নির্দেশ করে।

এটি ব্যবহার করার সুবিধা হল আপনি এলিমেন্টস প্যানেলে DOM ট্রি হাঁটতে পারেন এবং পৃথক উপাদানগুলি লুকাতে পারেন (বর্তমানে নির্বাচিত উপাদানটি লুকানোর জন্য H কী টিপুন), বা একটি উপাদানের CSS শৈলীগুলি অক্ষম করতে পারেন৷ আপনি দেখতে পারেন যে একটি উপাদান বা শৈলী পৃষ্ঠা রেন্ডারে "ওজন" রেন্ডারে কত সময় যোগ করে, যদি থাকে, পৃষ্ঠার রঙের সময়ের পরিবর্তন লক্ষ্য করে। যদি একটি একক উপাদান লুকিয়ে রাখলে পেইন্টের সময় উল্লেখযোগ্যভাবে কমে যায়, তাহলে আপনি সেই উপাদানটির স্টাইলিং বা নির্মাণের উপর ফোকাস করতে জানেন।

ক্রমাগত ব্যথা মোড সক্ষম করতে:

1. DevTools সেটিংস খুলুন। 1. সাধারণ ট্যাবে, রেন্ডারিং-এর অধীনে, অবিচ্ছিন্ন পৃষ্ঠা পুনরায় রঙ করা সক্ষম করুন।

দ্রষ্টব্য: আপনি যদি সেটিংসে এই বিকল্পটি দেখতে না পান, তাহলে about:flags খুলুন, সমস্ত পৃষ্ঠায় GPU কম্পোজিটিং চালু করুন এবং Chrome পুনরায় চালু করুন৷

আরও তথ্যের জন্য, DevTools এর ক্রমাগত পেইন্টিং মোডের সাথে প্রোফাইলিং লং পেইন্ট টাইমস দেখুন।

পেইন্ট আয়তক্ষেত্র এবং স্তর সীমানা দেখাচ্ছে

DevTools-এর আরেকটি বিকল্প হল প্রদর্শনের কোন আয়তক্ষেত্রাকার অঞ্চলে আঁকা হচ্ছে তা দেখানো। (সেটিংস > রেন্ডারিং > পেইন্ট আয়তক্ষেত্র দেখান)। উদাহরণস্বরূপ, নীচের স্ক্রিনশটে একটি পেইন্ট আয়তক্ষেত্র আঁকা হচ্ছে যে অঞ্চলে বেগুনি গ্রাফিকে একটি CSS হোভার প্রভাব প্রয়োগ করা হচ্ছে। এটি ভাল, যেহেতু এটি পর্দার তুলনামূলকভাবে ছোট অংশ।

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

FPS মিটার

FPS মিটার পৃষ্ঠার বর্তমান ফ্রেম রেট, সর্বনিম্ন এবং সর্বোচ্চ ফ্রেম রেট, সময়ের সাথে সাথে ফ্রেম রেট দেখানো একটি বার গ্রাফ এবং ফ্রেম রেট পরিবর্তনশীলতা দেখায় এমন একটি হিস্টোগ্রাম প্রদর্শন করে।

FPS মিটার দেখানোর জন্য:

1. DevTools সেটিংস খুলুন।
2. সাধারণ ক্লিক করুন।
3. রেন্ডারিংয়ের অধীনে, ফোর্স অ্যাক্সিলারেটেড কম্পোজিটিং চালু করুন এবং FPS মিটার দেখান ৷

আপনি প্রায়:পতাকা খোলার মাধ্যমে, FPS কাউন্টার চালু করে এবং Chrome পুনরায় চালু করে FPS মিটারকে সর্বদা উপস্থিত হতে বাধ্য করতে পারেন৷

জোর করে সিঙ্ক্রোনাস লেআউট খোঁজা (লেআউট থ্র্যাশিং)

রেন্ডারিং পারফরম্যান্সকে সর্বাধিক করার জন্য, Chrome সাধারণত আপনার অ্যাপ্লিকেশন দ্বারা অনুরোধ করা লেআউট পরিবর্তনগুলিকে ব্যাচ করে এবং অনুরোধ করা পরিবর্তনগুলিকে অ্যাসিঙ্ক্রোনাসভাবে গণনা এবং রেন্ডার করার জন্য একটি লেআউট পাস নির্ধারণ করে৷ যাইহোক, যদি একটি অ্যাপ্লিকেশন একটি লেআউট-নির্ভর সম্পত্তি (যেমন অফসেট উচ্চতা বা অফসেটউইথ) এর মান জিজ্ঞাসা করে, Chrome অবিলম্বে এবং সিঙ্ক্রোনাসভাবে একটি পৃষ্ঠা বিন্যাস সম্পাদন করতে বাধ্য হয়। এই তথাকথিত ফোর্সড সিঙ্ক্রোনাস লেআউটগুলি রেন্ডারিং কার্যক্ষমতাকে উল্লেখযোগ্যভাবে হ্রাস করতে পারে, বিশেষ করে যখন বড় DOM গাছে বারবার সঞ্চালিত হয়। এই দৃশ্যটিকে "লেআউট থ্র্যাশিং"ও বলা হয়েছে।

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

এই পপ-আপটি লেআউটের প্রয়োজনীয় নোডের সংখ্যা, রি-লেআউট ট্রির আকার, লেআউটের সুযোগ এবং লেআউট রুটও দেখায়।

টাইমলাইন ডেমো দেখুন: আরো তথ্যের জন্য জোর করে সিঙ্ক্রোনাস লেআউট নির্ণয় করা ।

বস্তু বরাদ্দ ট্র্যাকিং

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

বস্তু বরাদ্দ ট্র্যাক করতে:

1. DevTools-এ, প্রোফাইল ট্যাবে ক্লিক করুন।
2. রেকর্ড হিপ বরাদ্দ নির্বাচন করুন এবং শুরুতে ক্লিক করুন।
3. আপনার ডেটা সংগ্রহ করা হয়ে গেলে, হিপ প্রোফাইল রেকর্ডিং বন্ধ করুন ক্লিক করুন (প্রোফাইলিং ফলকের নীচের বাম কোণে লাল বৃত্ত)।

ক্যানভাস প্রোফাইলিং (পরীক্ষামূলক)

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

ক্যানভাস প্রোফাইলিং ব্যবহার করতে:

1. DevTools সেটিংসের পরীক্ষা ট্যাবে ক্যানভাস পরিদর্শন বৈশিষ্ট্যটি চালু করুন। (যদি আপনি এই ট্যাবটি দেখতে না পান, সম্পর্কে:পতাকা খুলুন, বিকাশকারী সরঞ্জাম পরীক্ষাগুলি সক্ষম করুন এবং Chrome পুনরায় চালু করুন৷)
2. প্রোফাইল ট্যাবে ক্লিক করুন।
3. ক্যাপচার ক্যানভাস ফ্রেম নির্বাচন করুন এবং স্ন্যাপশট নিন ক্লিক করুন।
4. আপনি এখন ক্যানভাস ফ্রেম তৈরি করতে ব্যবহৃত কলগুলি অন্বেষণ করতে পারেন৷