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

নতুন CSS দৈর্ঘ্য অথরিং টুল

DevTools CSS-এ দৈর্ঘ্য আপডেট করার একটি সহজ কিন্তু নমনীয় উপায় যোগ করেছে!

শৈলী ফলকে, দৈর্ঘ্য সহ যেকোন CSS বৈশিষ্ট্য সন্ধান করুন (যেমন height , padding )।

ইউনিট টাইপের উপর হোভার করুন, এবং লক্ষ্য করুন যে ইউনিটের ধরন আন্ডারলাইন করা হয়েছে। ড্রপডাউন থেকে একটি ইউনিট টাইপ নির্বাচন করতে এটিতে ক্লিক করুন।

ইউনিট মানের উপর হোভার করুন, এবং আপনার মাউস পয়েন্টার অনুভূমিক কার্সারে পরিবর্তিত হবে। মান বাড়াতে বা কমাতে অনুভূমিকভাবে টেনে আনুন। মান 10 দ্বারা সামঞ্জস্য করতে, টেনে আনার সময় Shift কী ধরে রাখুন।

আপনি এখনও পাঠ্য হিসাবে ইউনিট মান সম্পাদনা করতে পারেন — শুধু মানটিতে ক্লিক করুন এবং সম্পাদনা শুরু করুন।

ক্রোমিয়াম সমস্যা: 1126178 , 1172993

সমস্যা ট্যাবে সমস্যা লুকান

আপনি এখন সমস্যা ট্যাবে নির্দিষ্ট সমস্যাগুলি লুকিয়ে রাখতে পারেন শুধুমাত্র আপনার কাছে গুরুত্বপূর্ণ সেই সমস্যাগুলিতে ফোকাস করতে।

ইস্যু ট্যাবে , আপনি যে সমস্যাটি লুকাতে চান তার উপর কার্সার করুন। আরও বিকল্পে ক্লিক করুন আরও > এই মত সমস্যা লুকান .

সমস্যা মেনু লুকান

সমস্ত লুকানো সমস্যা লুকানো সমস্যা ফলকের অধীনে যোগ করা হবে। ফলকটি প্রসারিত করুন। আপনি সমস্ত লুকানো সমস্যা বা নির্বাচিত একটি আনহাইড করতে পারেন।

লুকানো সমস্যা ফলক

Chromium সমস্যা: 1175722

বৈশিষ্ট্য প্রদর্শন উন্নত

DevTools এর দ্বারা বৈশিষ্ট্যগুলির প্রদর্শন উন্নত করে:

  • সর্বদা বোল্ড করুন এবং প্রথমে কনসোল , উত্স প্যানেল এবং বৈশিষ্ট্য প্যানেলে নিজের বৈশিষ্ট্যগুলি সাজান৷
  • বৈশিষ্ট্য ফলকে বৈশিষ্ট্য প্রদর্শন সমতল করুন।

উদাহরণস্বরূপ, নীচের স্নিপেটটি 2টি নিজস্ব বৈশিষ্ট্য সহ একটি URL অবজেক্ট link তৈরি করে: user এবং access , এবং উত্তরাধিকারসূত্রে পাওয়া সম্পত্তি search মান আপডেট করে।

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

কনসোলে link লগ করার চেষ্টা করুন। নিজস্ব বৈশিষ্ট্য এখন সাহসী এবং প্রথমে সাজানো হয়। এই পরিবর্তনগুলি কাস্টম বৈশিষ্ট্যগুলি সনাক্ত করা সহজ করে তোলে, বিশেষ করে ওয়েব API (যেমন URL ) এর জন্য অনেকগুলি উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্যগুলির সাথে।

নিজস্ব বৈশিষ্ট্য সাহসী এবং প্রথমে সাজানো হয়

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

সমতল বৈশিষ্ট্য

ক্রোমিয়াম সমস্যা: 1076820 , 1119900

লাইটহাউস প্যানেলে বাতিঘর 8.4

Lighthouse প্যানেল এখন Lighthouse 8.4 চালাচ্ছে। লাইটহাউস এখন শনাক্ত করবে যে সবচেয়ে বড় কনটেইনফুল পেইন্ট (LCP) উপাদানটি একটি অলস-লোড করা চিত্র ছিল এবং এটি থেকে loading বৈশিষ্ট্যটি সরানোর সুপারিশ করবে।

আপডেটের আরও বিশদ বিবরণের জন্য Lighthouse 8.4-এ নতুন কী আছে তা দেখুন।

একটি বাতিঘর রিপোর্টে অলস-লোড LCP অডিট

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

উৎস প্যানেলে স্নিপেট বাছাই করুন

সোর্স প্যানেলের অধীনে স্নিপেট প্যানেলের স্নিপেটগুলি এখন বর্ণানুক্রমিকভাবে সাজানো হয়েছে। পূর্বে, এটি সাজানো হয় না.

দ্রুত কমান্ড চালানোর জন্য স্নিপেট বৈশিষ্ট্য ব্যবহার করুন। একটি টিপ জন্য এই ভিডিও দেখুন!

উৎস প্যানেলে স্নিপেট বাছাই করুন

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

অনুবাদিত রিলিজ নোটের নতুন লিঙ্ক এবং একটি অনুবাদ বাগ রিপোর্ট করুন

আপনি এখন কি নতুন ট্যাবের মাধ্যমে 6টি অন্যান্য ভাষায় DevTools রিলিজ নোট পড়তে ক্লিক করতে পারেন - রাশিয়ান , চীনা , স্প্যানিশ , জাপানিজ , পর্তুগিজ এবং কোরিয়ান

Chrome 94 থেকে, আপনি DevTools-এ আপনার পছন্দের ভাষা সেট করতে পারেন। আপনি যদি অনুবাদগুলির সাথে কোনও সমস্যা খুঁজে পান তবে আরও বিকল্প > সহায়তা > অনুবাদের বাগ রিপোর্ট করুন এর মাধ্যমে একটি অনুবাদ সমস্যা প্রতিবেদন করে আমাদের এটিকে উন্নত করতে সহায়তা করুন৷

অনুবাদিত রিলিজ নোটের নতুন লিঙ্ক এবং একটি অনুবাদ বাগ রিপোর্ট করুন

ক্রোমিয়াম সমস্যা: 1246245 , 1245481

DevTools কমান্ড মেনুর জন্য উন্নত UI

কমান্ড মেনুতে একটি ফাইল অনুসন্ধান করা কি আপনার কাছে কঠিন ছিল? আপনার জন্য সুখবর, কমান্ড মেনু ইউজার ইন্টারফেস এখন উন্নত করা হয়েছে!

উইন্ডোজ এবং লিনাক্সে কীবোর্ড শর্টকাট Control + P বা MacOS-এ Command + P সহ একটি ফাইল অনুসন্ধান করতে কমান্ড মেনু খুলুন।

কমান্ড মেনুর UI উন্নতি এখনও চলছে, আরও আপডেটের জন্য সাথে থাকুন!

কমান্ড মেনু

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

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

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

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

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

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

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

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