DevTools, Chrome 132-এ নতুন কী আছে৷

সোফিয়া এমেলিয়ানোভা
Sofia Emelianova
GitHub

জেমিনি ব্যবহার করে নেটওয়ার্ক অনুরোধ, উৎস ফাইল এবং কর্মক্ষমতা ট্রেস ডিবাগ করুন

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

এলিমেন্টস প্যানেলের কনটেক্সট মেনুর মতো, AI সহায়তা প্যানেল খুলতে এবং জেমিনির সাথে চ্যাট শুরু করতে, হয় ডান-ক্লিক করুন এবং Ask AI নির্বাচন করুন অথবানিচের পাশে থাকা "আস্ক এআই" বোতামটি দেখুন :

  • নেটওয়ার্ক প্যানেলে একটি নেটওয়ার্ক অনুরোধ।
  • সোর্স > পৃষ্ঠা ট্যাবে একটি ফাইল।
  • পারফর্মেন্স > মেইন ট্র্যাকের একটি অ্যাক্টিভিটি।

নেটওয়ার্ক, সোর্স এবং পারফরম্যান্সে Ask AI বোতাম এবং মেনু বিকল্প।

মিথুন নির্বাচিত অনুরোধ, ফাইল বা কার্যকলাপের প্রেক্ষাপট বিবেচনা করবে।

DevTools টিম crbug.com/364805393 এ আপনার প্রতিক্রিয়া জানার জন্য অধীর আগ্রহে অপেক্ষা করছে।

এআই চ্যাট ইতিহাস

আপনি এখন প্যানেলের উপরের বাম কোণে "নতুন চ্যাট " বোতামে ক্লিক করে অথবা নেটওয়ার্ক প্যানেলের "আস্ক এআই" বোতাম এবং মেনু বিকল্পগুলি, "সোর্স > পৃষ্ঠা ট্যাব" এবং "পারফরম্যান্স > প্রধান ট্র্যাক" ব্যবহার করে AI সহায়তা প্যানেলে জেমিনির সাথে অতীতের চ্যাটগুলি পুনরুদ্ধার করতে এবং দেখতে পারেন।

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

'ইতিহাস' বোতামের নিচে একটি ড্রপ-ডাউনে AI চ্যাট ইতিহাস।

অ্যাপ্লিকেশন > স্টোরেজে এক্সটেনশন স্টোরেজ পরিচালনা করুন

স্থানীয় এবং সেশন স্টোরেজের মতো, আপনি এখন অ্যাপ্লিকেশন > স্টোরেজ বিভাগে এক্সটেনশন স্টোরেজ এন্ট্রি দেখতে এবং পরিবর্তন করতে পারবেন।

অ্যাপ্লিকেশন প্যানেলে 'এক্সটেনশন স্টোরেজ' বিভাগটি যোগ করার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: crbug.com/40963428 ।

কর্মক্ষমতা উন্নতি

এই সংস্করণটি পারফরম্যান্স প্যানেলে বেশ কিছু উন্নতি এনেছে।

লাইভ মেট্রিক্সে ইন্টারঅ্যাকশনের পর্যায়গুলি

আপনি এখন পারফরম্যান্স লাইভ মেট্রিক্সে ইন্টারঅ্যাকশন প্রসারিত করে পর্যায় এবং তাদের সময়গুলির একটি বিশদ বিবরণ দেখতে পারেন।

আগে এবং পরে পর্যায়গুলির একটি ভাঙ্গন এবং মিথস্ক্রিয়ায় তাদের সময় যোগ করা।

ওয়েব ভাইটালস এক্সটেনশনে যেমন বলা হয়েছে, এখন DevTools-এ , এই বৈশিষ্ট্যগুলি প্রকাশের মাধ্যমে ওয়েব ভাইটালস এক্সটেনশনের সমর্থনের সমাপ্তি ঘটবে।

ক্রোমিয়াম সমস্যা: crbug.com/369097528 ।

সারাংশ ট্যাবে ব্লকিং তথ্য রেন্ডার করুন

যখন আপনি পারফরম্যান্স > নেটওয়ার্ক ট্র্যাকে লাল ত্রিভুজ দিয়ে চিহ্নিত একটি নেটওয়ার্ক অনুরোধ নির্বাচন করেন, তখন (রিফ্যাক্টর করা) টুলটিপ ছাড়াও সারাংশ ট্যাবটি আপনাকে এখন বলে যে অনুরোধটি রেন্ডার-ব্লকিং।

সারাংশ ট্যাবে রেন্ডার-ব্লকিং তথ্য যোগ করার আগে এবং পরে।

scheduler.postTask ইভেন্ট এবং তাদের ইনিশিয়েটার তীরগুলির জন্য সমর্থন

Performance > Main ট্র্যাক এখন scheduler.postTask() ইভেন্ট এবং নিম্নলিখিত ইনিশিয়েটার তীরগুলি দেখায়:

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

scheduler.postTask ইভেন্ট এবং তাদের ইনিশিয়েটার তীরগুলির জন্য সমর্থন যোগ করার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: crbug.com/40775984 ।

অ্যানিমেশন প্যানেল এবং এলিমেন্টস > স্টাইলস ট্যাবের উন্নতি

এই সংস্করণটি অ্যানিমেশন প্যানেল এবং এলিমেন্টস > স্টাইলস ট্যাবে কয়েকটি উন্নতি এনেছে।

এলিমেন্টস > স্টাইলস ট্যাবে এখন অ্যানিমেশন জাম্প টু অ্যানিমেশনস প্যানেল আইকনগুলি animation প্রোপার্টিজের মানের পাশে রাখা হয়েছে, যাতে আপনি সহজেই সেখানে অ্যানিমেশনগুলি পরিদর্শন করতে পারেন।

স্টাইলস ট্যাব থেকে অ্যানিমেশন প্যানেলে একটি লিঙ্ক যোগ করার আগে এবং পরে।

কম্পিউটেড ট্যাবে রিয়েল-টাইম আপডেট

এলিমেন্টস > কম্পিউটেড ট্যাব এখন রিয়েল-টাইমে কম্পিউটেড মান আপডেট করে, উদাহরণস্বরূপ, যখন অ্যানিমেশনগুলি সেগুলি আপডেট করে।

সেন্সরে কম্পিউট প্রেসার ইমুলেশন

সেন্সর প্যানেল এখন আপনাকে Nominal , Fair , Serious এবং Critical CPU চাপ অনুকরণ করতে দেয়।

সেন্সর প্যানেলে CPU প্রেসার ইমুলেশন বিকল্প যোগ করার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: crbug.com/362277525 ।

মেমোরি প্যানেলে উৎস অনুসারে গ্রুপ করা একই নামের JS অবজেক্ট

মেমোরি প্যানেল এখন একই নামের JS অবজেক্টগুলিকে আলাদা করে, যা বিভিন্ন উৎস থেকে আসে এবং সেগুলিকে একইভাবে গ্রুপ করে।

JS অবজেক্টগুলিকে একই নামের সাথে এবং উৎস অনুসারে গ্রুপ করার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: crbug.com/357902505 ।

সেটিংসের জন্য একটি নতুন চেহারা

ইউজার ইন্টারফেস ডিজাইনকে আরও ভালোভাবে সারিবদ্ধ করার জন্য, DevTools সেটিংস এখন Chrome সেটিংসের সাথে আরও ঘনিষ্ঠভাবে সম্পর্কিত। বিশেষ করে, বিভাগগুলি এখন দৃশ্যত "কার্ড"-এ বিভক্ত।

আগে এবং পরে বিভাগগুলিকে 'কার্ডে' বিভক্ত করা।

পারফর্ম্যান্স ইনসাইট প্যানেলটি বন্ধ করে DevTools থেকে সরানো হয়েছে

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

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

বিবিধ হাইলাইটস

এই রিলিজে কিছু উল্লেখযোগ্য সংশোধন এবং উন্নতি রয়েছে:

  • কর্মক্ষমতা :
    • অনুসন্ধান প্রশ্নের জন্য ৩ অক্ষরের অপ্রয়োজনীয় সীমা সরিয়ে ফেলা হয়েছে।
    • হোম বোতাম যোগ করা হয়েছে যা আপনাকে লাইভ মেট্রিক্স স্ক্রিনে ফিরিয়ে নিয়ে যাবে।
    • পূর্বে ভাঙা Shift + S / W ট্রেস জুম শর্টকাটগুলি ঠিক করা হয়েছে।
  • উপাদান > শৈলী :
    • 341991541 স্বয়ংক্রিয়ভাবে সম্পূর্ণ করতে অ্যাঙ্কর-সেন্টার যোগ করা হয়েছে।
    • 2-শব্দের মানের জন্য ফ্লেক্সবক্স এডিটর উপলব্ধ না থাকা একটি বাগ সংশোধন করা হয়েছে 341964645 ।
  • নেটওয়ার্ক : প্রিফেচ ব্যর্থতা এখন হলুদ সতর্কতার পরিবর্তে অথবা লাল ত্রুটির মাধ্যমে বোঝানো হয় যে কন্টেন্ট প্রদর্শন প্রভাবিত হয়নি 372055494 ।

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

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

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

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

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

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