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

Jecelyn Yeen

রেকর্ডার প্যানেলে ডাবল-ক্লিক এবং রাইট-ক্লিক ইভেন্ট ক্যাপচার করুন

রেকর্ডার প্যানেল এখন ডাবল-ক্লিক এবং রাইট-ক্লিক ইভেন্টগুলি ক্যাপচার করতে পারে।

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

• কার্ডটি বড় করতে ডাবল-ক্লিক করুন
• কার্ডটিতে ডান-ক্লিক করুন এবং প্রসঙ্গ মেনু থেকে একটি ক্রিয়া নির্বাচন করুন।

রেকর্ডার কীভাবে এই ঘটনাগুলি ধারণ করেছে তা বুঝতে, ধাপগুলি প্রসারিত করুন:

• ডাবল-ক্লিক type: doubleClick ।
• রাইট-ক্লিক ইভেন্টটি type: click হিসেবে ধরা হয় কিন্তু button বৈশিষ্ট্যটি secondary সেট করা হয়। একটি সাধারণ মাউস ক্লিকের button মান হল primary ।

ক্রোমিয়াম সমস্যা: 1300839 , 1322879 , 1299701 , 1323688

লাইটহাউস প্যানেলে নতুন টাইমস্প্যান এবং স্ন্যাপশট মোড

পৃষ্ঠা লোডের বাইরেও আপনার ওয়েবসাইটের কর্মক্ষমতা পরিমাপ করতে আপনি এখন Lighthouse ব্যবহার করতে পারেন।

লাইটহাউস প্যানেল এখন ব্যবহারকারীর প্রবাহ পরিমাপের 3টি মোড সমর্থন করে:

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

উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় কার্টে আইটেম যোগ করার পারফরম্যান্স পরিমাপ করা যাক। টাইমস্প্যান মোড নির্বাচন করুন এবং Start timespan এ ক্লিক করুন। স্ক্রোল করুন এবং কার্টে কয়েকটি আইটেম যোগ করুন। আপনার কাজ শেষ হয়ে গেলে, ব্যবহারকারীর ইন্টারঅ্যাকশনের একটি Lighthouse রিপোর্ট তৈরি করতে End timespan এ ক্লিক করুন।

প্রতিটি মোডের অনন্য ব্যবহারের ক্ষেত্রে, সুবিধা এবং সীমাবদ্ধতা সম্পর্কে জানতে Lighthouse-এ ব্যবহারকারীর প্রবাহ দেখুন।

ক্রোমিয়াম সমস্যা: ১২৯১২৮৪

পারফর্ম্যান্স ইনসাইট আপডেট

পারফরম্যান্স ইনসাইট প্যানেলে উন্নত জুম নিয়ন্ত্রণ

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

প্যানেলের সাহায্যে কীভাবে কার্যকরী অন্তর্দৃষ্টি পাবেন এবং আপনার ওয়েবসাইটের কর্মক্ষমতা উন্নত করবেন তা জানতে পারফরম্যান্স অন্তর্দৃষ্টি দেখুন।

ক্রোমিয়াম সমস্যা: ১৩১৩৩৮২

একটি পারফর্ম্যান্স রেকর্ডিং মুছে ফেলার বিষয়টি নিশ্চিত করুন

DevTools এখন একটি পারফর্ম্যান্স রেকর্ডিং মুছে ফেলার আগে একটি নিশ্চিতকরণ ডায়ালগ দেখায়।

ক্রোমিয়াম সমস্যা: ১৩১৮০৮৭

এলিমেন্টস প্যানেলে প্যানগুলি পুনঃক্রম করুন

আপনি এখন আপনার পছন্দের উপর ভিত্তি করে এলিমেন্টস প্যানেলে প্যানগুলি পুনরায় সাজাতে পারেন।

উদাহরণস্বরূপ, যখন আপনি একটি সংকীর্ণ স্ক্রিনে DevTools খুলবেন, তখন অ্যাক্সেসিবিলিটি প্যানটি আরও দেখান বোতামের নীচে লুকানো থাকবে। যদি আপনি ঘন ঘন অ্যাক্সেসিবিলিটি সমস্যাগুলি ডিবাগ করেন, তাহলে সহজে অ্যাক্সেসের জন্য আপনি এখন প্যানটিকে সামনের দিকে টেনে আনতে পারেন।

ক্রোমিয়াম সমস্যা: ১১৪৬১৪৬

ব্রাউজারের বাইরে একটি রঙ নির্বাচন করা

DevTools এখন ব্রাউজারের বাইরে রঙ নির্বাচন করতে সাহায্য করে। পূর্বে, আপনি কেবল ব্রাউজারের মধ্যে একটি রঙ নির্বাচন করতে পারতেন।

স্টাইলস প্যানে, যেকোনো রঙের প্রিভিউতে ক্লিক করে একটি কালার পিকার খুলুন। যেকোনো জায়গা থেকে রঙ বেছে নিতে আইড্রপার ব্যবহার করুন।

ক্রোমিয়াম সমস্যা: ১২৪৫১৯১

ডিবাগিংয়ের সময় উন্নত ইনলাইন মান প্রিভিউ

ডিবাগার এখন ইনলাইন মানগুলির প্রিভিউ সঠিকভাবে দেখায়।

এই উদাহরণে, double ফাংশনটিতে একটি ইনপুট প্যারামিটার a এবং একটি ভেরিয়েবল x রয়েছে। return লাইনে একটি ব্রেকপয়েন্ট রাখুন এবং কোডটি চালান। ইনলাইন প্রিভিউ a এবং x এর মান সঠিকভাবে দেখায়। পূর্বে, ডিবাগার ইনলাইন প্রিভিউতে x মানটি দেখাত না।

ক্রোমিয়াম সমস্যা: ১৩১৬৩৪০

ভার্চুয়াল প্রমাণীকরণকারীদের জন্য বড় ব্লব সমর্থন করুন

WebAuthn ট্যাবে এখন ভার্চুয়াল অথেনটিকেটরদের জন্য নতুন সাপোর্টস লার্জ ব্লব চেকবক্স রয়েছে।

এই চেকবক্সটি ডিফল্টরূপে নিষ্ক্রিয় করা আছে। আপনি এটি শুধুমাত্র ctap2 প্রোটোকল সহ প্রমাণীকরণকারীদের জন্য সক্ষম করতে পারেন যা রেসিডেন্ট কী সমর্থন করে।

ক্রোমিয়াম সমস্যা: ১৩২১৮০৩

সোর্স প্যানেলে নতুন কীবোর্ড শর্টকাট

সোর্স প্যানেলে এখন দুটি নতুন কীবোর্ড শর্টকাট পাওয়া যাচ্ছে:

• কন্ট্রোল / কমান্ড + শিফট + ওয়াই দিয়ে নেভিগেশন সাইডবার (বামে) টগল করুন
• Control / Command + Shift + H ব্যবহার করে ডিবাগার সাইডবার (ডানদিকে) টগল করুন

ক্রোমিয়াম সমস্যা: ১২২৬৩৬৩

সোর্স ম্যাপের উন্নতি

পূর্বে, ডেভেলপাররা নিম্নলিখিত সময়গুলিতে এলোমেলো ব্যর্থতার সম্মুখীন হন:

• কোডপেনের উদাহরণ দিয়ে ডিবাগিং
• কোডপেন উদাহরণে কর্মক্ষমতা সমস্যার উৎস অবস্থান সনাক্তকরণ
• React DevTools সক্রিয় থাকা অবস্থায় Component ট্যাব অনুপস্থিত

সামগ্রিক ডিবাগিং অভিজ্ঞতা উন্নত করার জন্য সোর্স ম্যাপের কিছু সংশোধন এখানে দেওয়া হল:

• ইনলাইন স্ক্রিপ্ট এবং উৎস অবস্থানের জন্য অবস্থান এবং অফসেটের মধ্যে সঠিক ম্যাপিং করুন।
• ফ্রেমের টেক্সট লোকেশনের জন্য ফলব্যাক তথ্য ব্যবহার করুন
• ফ্রেমের URL দিয়ে আপেক্ষিক URL গুলি সঠিকভাবে সমাধান করুন

ক্রোমিয়াম সমস্যা: 1319828 , 1318635 , 1305475

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করুন

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

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

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

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