DevTools এ নতুন কি আছে (Chrome 71)

Kayce Basques

Chrome 71-এ Chrome DevTools-এ আসছে নতুন বৈশিষ্ট্য এবং বড় পরিবর্তনগুলির মধ্যে রয়েছে:

• একটি DOM নোড হাইলাইট করতে একটি লাইভ এক্সপ্রেশনের উপর হোভার করুন
• গ্লোবাল ভেরিয়েবল হিসাবে DOM নোড সংরক্ষণ করুন
• এইচএআর আমদানি ও রপ্তানিতে এখন সূচনাকারী এবং অগ্রাধিকার তথ্য
• প্রধান মেনু থেকে কমান্ড মেনু অ্যাক্সেস করুন
• পিকচার-ইন-পিকচার ব্রেকপয়েন্ট
• (বোনাস টিপ) কোনো উপাদানের ইভেন্ট ফায়ার দেখতে কনসোলে মনিটর ইভেন্টস() চালান

পড়ুন, বা এই পৃষ্ঠার ভিডিও সংস্করণ দেখুন:

একটি DOM নোড হাইলাইট করতে একটি লাইভ এক্সপ্রেশনের উপর হোভার করুন

যখন একটি লাইভ এক্সপ্রেশন একটি DOM নোডে মূল্যায়ন করে, তখন ভিউপোর্টে সেই নোডটিকে হাইলাইট করতে লাইভ এক্সপ্রেশন ফলাফলের উপর হোভার করুন।

চিত্র 1 । ভিউপোর্টে নোড হাইলাইট করার জন্য একটি লাইভ এক্সপ্রেশন ফলাফলের উপর হোভার করা

গ্লোবাল ভেরিয়েবল হিসাবে DOM নোড সংরক্ষণ করুন

একটি DOM নোডকে একটি গ্লোবাল ভেরিয়েবল হিসাবে সঞ্চয় করতে, কনসোলে একটি এক্সপ্রেশন চালান যা একটি নোডের মূল্যায়ন করে, ফলাফলটিতে ডান ক্লিক করুন এবং তারপর গ্লোবাল ভেরিয়েবল হিসাবে স্টোর নির্বাচন করুন।

চিত্র 2 । কনসোলে গ্লোবাল ভেরিয়েবল হিসাবে সংরক্ষণ করুন

অথবা, DOM Tree- এর নোডটিতে ডান-ক্লিক করুন এবং গ্লোবাল ভেরিয়েবল হিসাবে Store নির্বাচন করুন।

চিত্র 3 । DOM Tree-এ গ্লোবাল ভেরিয়েবল হিসেবে স্টোর করুন

এইচএআর আমদানি ও রপ্তানিতে এখন সূচনাকারী এবং অগ্রাধিকার তথ্য

আপনি যদি সহকর্মীদের সাথে নেটওয়ার্ক লগগুলি নির্ণয় করতে চান, আপনি একটি HAR ফাইলে নেটওয়ার্ক অনুরোধগুলি রপ্তানি করতে পারেন৷

চিত্র 8 । একটি HAR ফাইলে নেটওয়ার্ক অনুরোধ রপ্তানি করা হচ্ছে

নেটওয়ার্ক প্যানেলে ফাইলটি আবার আমদানি করতে, শুধু টেনে আনুন এবং ফেলে দিন।

আপনি যখন একটি HAR ফাইল রপ্তানি করেন, তখন DevTools এখন HAR ফাইলে ইনিশিয়েটর এবং অগ্রাধিকার তথ্য অন্তর্ভুক্ত করে। আপনি যখন HAR ফাইলগুলি আবার DevTools-এ আমদানি করেন, তখন ইনিশিয়েটর এবং অগ্রাধিকার কলামগুলি এখন পপুলেট হয়।

_initiator ক্ষেত্রটি রিসোর্সের অনুরোধের কারণ সম্পর্কে আরও প্রসঙ্গ সরবরাহ করে। এটি অনুরোধ টেবিলের ইনিশিয়েটর কলামে ম্যাপ করে।

চিত্র 9 । সূচনাকারী কলাম

এছাড়াও আপনি Shift ধরে রাখতে পারেন এবং এটির সূচনাকারী এবং নির্ভরতা দেখার অনুরোধের উপর হোভার করতে পারেন।

চিত্র 10 । সূচনাকারী এবং নির্ভরতা দেখা

_priority ক্ষেত্রটি বলে যে সংস্থানটিতে ব্রাউজারটি কোন অগ্রাধিকারের স্তর নির্ধারণ করেছে। এটি অনুরোধ সারণীতে অগ্রাধিকার কলামে ম্যাপ করে, যা ডিফল্টরূপে লুকানো থাকে।

চিত্র 11 । অগ্রাধিকার কলাম

অনুরোধ টেবিলের হেডারে ডান ক্লিক করুন এবং অগ্রাধিকার কলামটি দেখানোর জন্য অগ্রাধিকার নির্বাচন করুন।

চিত্র 12 । কীভাবে অগ্রাধিকার কলাম দেখাবেন

প্রধান মেনু থেকে কমান্ড মেনু অ্যাক্সেস করুন

DevTools প্যানেল, ট্যাব এবং বৈশিষ্ট্যগুলি অ্যাক্সেস করার একটি দ্রুত উপায়ের জন্য কমান্ড মেনু ব্যবহার করুন।

চিত্র 13 । কমান্ড মেনু

আপনি এখন প্রধান মেনু থেকে কমান্ড মেনু খুলতে পারেন। প্রধান মেনুতে ক্লিক করুন বোতাম এবং রান কমান্ড নির্বাচন করুন।

চিত্র 14 । প্রধান মেনু থেকে কমান্ড মেনু খোলা

পিকচার-ইন-পিকচার ব্রেকপয়েন্ট

Picture-in-Picture হল একটি নতুন পরীক্ষামূলক API যা ডেস্কটপের উপর একটি ভাসমান ভিডিও উইন্ডো তৈরি করতে একটি পৃষ্ঠাকে সক্ষম করে৷

enterpictureinpicture সক্রিয় করুন, leavepictureinpicture , এবং ইভেন্ট লিসেনার ব্রেকপয়েন্ট প্যানে চেকবক্সের resize যখনই এই পিকচার-ইন-পিকচার ইভেন্টগুলির মধ্যে একটি চালু হয় তখন বিরাম দিতে। DevTools হ্যান্ডলারের প্রথম লাইনে বিরতি দেয়।

চিত্র 16 । ইভেন্ট লিসেনার ব্রেকপয়েন্ট প্যানে পিকচার-ইন-পিকচার ইভেন্ট

(বোনাস টিপ) কোনো উপাদানের ইভেন্ট ফায়ার দেখতে কনসোলে মনিটর ইভেন্টস() চালান

ধরুন আপনি একটি বোতাম ফোকাস করার পরে এবং R , E , D চাপার পরে একটি লাল সীমানা যোগ করতে চান, কিন্তু আপনি জানেন না শ্রোতাদের কোন ইভেন্টে যোগ করতে হবে৷ কনসোলে উপাদানের সমস্ত ইভেন্ট লগ করতে monitorEvents() ব্যবহার করুন।

1. নোডের একটি রেফারেন্স পান।

   

   চিত্র 17 । নোডের একটি রেফারেন্স পেতে গ্লোবাল ভেরিয়েবল হিসাবে স্টোর ব্যবহার করে

2. monitorEvents() জন্য প্রথম আর্গুমেন্ট হিসাবে নোডটি পাস করুন।

   

   চিত্র 18 । monitorEvents() নিরীক্ষণে নোড পাস করা

3. নোডের সাথে যোগাযোগ করুন। DevTools নোডের সমস্ত ইভেন্ট কনসোলে লগ করে।

   

   চিত্র 19 । কনসোলে নোডের ঘটনা

কনসোলে ইভেন্ট লগ করা বন্ধ করতে unmonitorEvents() কল করুন।

unmonitorEvents(temp1);

আপনি যদি শুধুমাত্র নির্দিষ্ট ইভেন্ট বা ইভেন্টের ধরন নিরীক্ষণ করতে চান তাহলে monitorEvents() কে দ্বিতীয় যুক্তি হিসাবে একটি অ্যারে পাস করুন:

monitorEvents(temp1, ['mouse', 'focus']);

mouse ধরন DevTools-কে মাউস-সম্পর্কিত সমস্ত ইভেন্ট লগ করতে বলে, যেমন mousedown এবং click । অন্যান্য সমর্থিত প্রকারগুলি হল key , touch এবং control ।

অন্যান্য সহজ ফাংশনগুলির জন্য কমান্ড লাইন রেফারেন্স দেখুন যা আপনি কনসোল থেকে কল করতে পারেন।

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev বা Beta ব্যবহার করার কথা বিবেচনা করুন। এই পূর্বরূপ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করে এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পায়!

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

পোস্টের নতুন বৈশিষ্ট্য এবং পরিবর্তনগুলি বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

• crbug.com এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
• আরও বিকল্প ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ।
• @ChromeDevTools- এ টুইট করুন।
• আমাদের DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

DevTools-এ নতুন কি আছে

DevTools সিরিজে নতুন কী আছে তাতে কভার করা হয়েছে এমন সবকিছুর একটি তালিকা।

Kayce Basques

Chrome 71 এর ক্রোম ডেভটুলগুলিতে আসা নতুন বৈশিষ্ট্য এবং বড় পরিবর্তনগুলির মধ্যে রয়েছে:

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

পড়ুন, বা এই পৃষ্ঠার ভিডিও সংস্করণটি দেখুন:

একটি ডোম নোড হাইলাইট করার জন্য একটি লাইভ এক্সপ্রেশন জুড়ে ঘোরান

যখন কোনও লাইভ এক্সপ্রেশন কোনও ডোম নোডের মূল্যায়ন করে, তখন লাইভ এক্সপ্রেশনটির উপরে ঘুরে বেড়ায় ভিউপোর্টে সেই নোডটি হাইলাইট করার জন্য।

চিত্র 1 । ভিউপোর্টে নোডটি হাইলাইট করার জন্য একটি লাইভ এক্সপ্রেশন ফলাফলের উপর ঘুরে বেড়ানো

গ্লোবাল ভেরিয়েবল হিসাবে ডোম নোডগুলি সঞ্চয় করুন

গ্লোবাল ভেরিয়েবল হিসাবে একটি ডোম নোড সঞ্চয় করতে, কনসোলে একটি অভিব্যক্তি চালান যা একটি নোডের মূল্যায়ন করে, ফলাফলটি ডান ক্লিক করুন এবং তারপরে গ্লোবাল ভেরিয়েবল হিসাবে স্টোর নির্বাচন করুন।

চিত্র 2 । কনসোলে গ্লোবাল ভেরিয়েবল হিসাবে সঞ্চয় করুন

অথবা, ডোম গাছের নোডটিতে ডান ক্লিক করুন এবং গ্লোবাল ভেরিয়েবল হিসাবে স্টোর নির্বাচন করুন।

চিত্র 3 । ডোম ট্রিতে গ্লোবাল ভেরিয়েবল হিসাবে সঞ্চয় করুন

আরআর আমদানি ও রফতানিতে এখন সূচনা এবং অগ্রাধিকারের তথ্য

আপনি যদি সহকর্মীদের সাথে নেটওয়ার্ক লগগুলি নির্ণয় করতে চান তবে আপনি কোনও হার ফাইলে নেটওয়ার্কের অনুরোধগুলি রফতানি করতে পারেন।

চিত্র 8 । একটি হার ফাইলে নেটওয়ার্ক অনুরোধ রফতানি করা

নেটওয়ার্ক প্যানেলে ফাইলটি আবার আমদানি করতে, কেবল এটি টেনে এনে ফেলে দিন।

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

_initiator ক্ষেত্রটি সংস্থানটির জন্য অনুরোধ করার কারণে কী কারণে আরও প্রসঙ্গ সরবরাহ করে। এই অনুরোধ টেবিলের সূচনা কলামে এই মানচিত্র।

চিত্র 9 । ইনিশিয়েটার কলাম

আপনি শিফট ধরে রাখতে পারেন এবং এর সূচনা এবং নির্ভরতাগুলি দেখার জন্য একটি অনুরোধের উপরেও ঘুরে বেড়াতে পারেন।

চিত্র 10 । সূচনা এবং নির্ভরতা দেখা

_priority ক্ষেত্রটি জানিয়েছে যে ব্রাউজারটি সংস্থানটিতে নির্ধারিত কোন অগ্রাধিকার স্তর। এই অনুরোধ টেবিলের অগ্রাধিকার কলামে মানচিত্র, যা ডিফল্টরূপে লুকানো থাকে।

চিত্র 11 । অগ্রাধিকার কলাম

অনুরোধ টেবিলের শিরোনামে ডান ক্লিক করুন এবং অগ্রাধিকার কলামটি দেখানোর জন্য অগ্রাধিকার নির্বাচন করুন।

চিত্র 12 । অগ্রাধিকার কলামটি কীভাবে দেখাবেন

মূল মেনু থেকে কমান্ড মেনুতে অ্যাক্সেস করুন

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

চিত্র 13 । কমান্ড মেনু

আপনি এখন মূল মেনু থেকে কমান্ড মেনু খুলতে পারেন। মূল মেনুতে ক্লিক করুন বোতাম এবং রান কমান্ড নির্বাচন করুন।

চিত্র 14 । মূল মেনু থেকে কমান্ড মেনু খোলার

চিত্র-ইন-চিত্রের ব্রেকপয়েন্টগুলি

চিত্র-ইন-চিত্রটি একটি নতুন পরীক্ষামূলক এপিআই যা ডেস্কটপের উপরে একটি ভাসমান ভিডিও উইন্ডো তৈরি করতে একটি পৃষ্ঠা সক্ষম করে।

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

চিত্র 16 । ইভেন্ট শ্রোতার ব্রেকপয়েন্টস ফলকগুলিতে চিত্র-ইন-চিত্রের ইভেন্টগুলি

(বোনাস টিপ) কনসোলে মনিটোরিভেন্টস () চালান কোনও উপাদানগুলির ইভেন্টগুলি আগুন দেখার জন্য

মনে করুন আপনি কোনও বোতামটি ফোকাস করার পরে এবং R , E , D টিপানোর পরে একটি লাল সীমানা যুক্ত করতে চান তবে শ্রোতাদের কী ইভেন্টগুলিতে যুক্ত করতে হবে তা আপনি জানেন না। কনসোলে উপাদানগুলির সমস্ত ইভেন্ট লগ করতে monitorEvents() ব্যবহার করুন।

1. নোডের একটি রেফারেন্স পান।

   

   চিত্র 17 । নোডের একটি রেফারেন্স পেতে গ্লোবাল ভেরিয়েবল হিসাবে স্টোর ব্যবহার করা

2. monitorEvents() এর প্রথম যুক্তি হিসাবে নোডটি পাস করুন।

   

   চিত্র 18 । monitorEvents()

3. নোডের সাথে ইন্টারঅ্যাক্ট করুন। ডিভটুলস নোডের সমস্ত ইভেন্টগুলি কনসোলে লগ করে।

   

   চিত্র 19 । কনসোলে নোডের ঘটনা

কনসোলে লগিং ইভেন্টগুলি বন্ধ করতে unmonitorEvents() কল করুন।

unmonitorEvents(temp1);

monitorEvents() এর দ্বিতীয় যুক্তি হিসাবে একটি অ্যারে পাস করুন যদি আপনি কেবল কিছু ইভেন্ট বা ইভেন্টের ধরণের পর্যবেক্ষণ করতে চান:

monitorEvents(temp1, ['mouse', 'focus']);

mouse প্রকারটি ডিভটুলগুলিকে মাউস-সম্পর্কিত সমস্ত ইভেন্ট যেমন mousedown এবং click লগ করতে বলে। অন্যান্য সমর্থিত প্রকারগুলি হ'ল key , touch এবং control ।

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

পূর্বরূপ চ্যানেলগুলি ডাউনলোড করুন

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

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করা

পোস্টে নতুন বৈশিষ্ট্য এবং পরিবর্তনগুলি বা ডেভটুল সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন।

• Crbug.com এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
• আরও বিকল্প ব্যবহার করে একটি ডিভটুল ইস্যু রিপোর্ট করুন > সহায়তা > ডিভটুলগুলিতে একটি ডিভটুলস ইস্যুগুলির প্রতিবেদন করুন ।
• @ক্রোমডেভটুলস এ টুইট করুন।
• ডিভটুলস ইউটিউব ভিডিও বা ডিভটুলস টিপস ইউটিউব ভিডিওগুলিতে আমাদের নতুন কী সম্পর্কে মন্তব্যগুলি ছেড়ে দিন।

ডিভটুলসে নতুন কি

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।