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

জেসেলিন ইয়েন

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

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

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

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

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

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

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

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

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

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

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

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

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

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

টাইমস্প্যান মোড

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

ক্রোমিয়াম সমস্যা: 1291284

কর্মক্ষমতা অন্তর্দৃষ্টি আপডেট

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

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

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

ক্রোমিয়াম সমস্যা: 1313382

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

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

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

ক্রোমিয়াম সমস্যা: 1318087

এলিমেন্টস প্যানেলে প্যানগুলি পুনরায় সাজান

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

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

এলিমেন্টস প্যানেলে প্যানগুলি পুনরায় সাজান

ক্রোমিয়াম সমস্যা: 1146146

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

DevTools এখন ব্রাউজারের বাইরে একটি রঙ বাছাই সমর্থন করে। পূর্বে, আপনি শুধুমাত্র ব্রাউজারের মধ্যে একটি রঙ বাছাই করতে পারেন।

শৈলী ফলকে, একটি রঙ চয়নকারী খুলতে যে কোনও রঙের পূর্বরূপ ক্লিক করুন। যে কোন জায়গা থেকে রং বাছাই করতে আইড্রপার ব্যবহার করুন।

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

ক্রোমিয়াম সমস্যা: 1245191

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

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

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

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

ক্রোমিয়াম সমস্যা: 1316340

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

WebAuthn ট্যাবে এখন ভার্চুয়াল প্রমাণীকরণকারীদের জন্য নতুন সমর্থন বড় ব্লব চেকবক্স রয়েছে।

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

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

ক্রোমিয়াম সমস্যা: 1321803

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

দুটি নতুন কীবোর্ড শর্টকাট এখন উত্স প্যানেলে উপলব্ধ:

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

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

ক্রোমিয়াম সমস্যা: 1226363

উৎস মানচিত্র উন্নতি

পূর্বে, বিকাশকারীরা এলোমেলো ব্যর্থতার সম্মুখীন হন:

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

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

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

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

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

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

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

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

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

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

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