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

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

বিশ্বস্ত প্রকার লঙ্ঘনের জন্য ডিবাগিং সমর্থন

বিশ্বস্ত প্রকার লঙ্ঘনের উপর ব্রেকপয়েন্ট

আপনি এখন ব্রেকপয়েন্ট সেট করতে পারেন এবং উত্স প্যানেলে বিশ্বস্ত প্রকার লঙ্ঘনের ক্ষেত্রে ব্যতিক্রমগুলি ধরতে পারেন৷

বিশ্বস্ত প্রকার API আপনাকে DOM-ভিত্তিক ক্রস-সাইট স্ক্রিপ্টিং দুর্বলতা প্রতিরোধ করতে সহায়তা করে। বিশ্বস্ত প্রকারের সাথে DOM XSS দুর্বলতা মুক্ত অ্যাপ্লিকেশনগুলি কীভাবে লিখতে, পর্যালোচনা এবং বজায় রাখতে হয় তা শিখুন ।

উত্স প্যানেলে, ডিবাগার সাইডবার ফলকটি খুলুন। CSP লঙ্ঘন ব্রেকপয়েন্ট বিভাগটি প্রসারিত করুন এবং ব্যতিক্রমগুলিতে বিরতি দিতে বিশ্বস্ত প্রকার লঙ্ঘন চেকবক্স সক্ষম করুন। এই ডেমো পৃষ্ঠার সাথে এটি নিজে চেষ্টা করুন।

বিশ্বস্ত প্রকার লঙ্ঘনের উপর ব্রেকপয়েন্ট

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

উৎস প্যানেল এখন লাইনের পাশে একটি সতর্কতা আইকন দেখায় যা বিশ্বস্ত প্রকার লঙ্ঘন করে। ব্যতিক্রমের পূর্বরূপ দেখতে এটিতে হোভার করুন। ইস্যু ট্যাবটি প্রসারিত করতে এটিতে ক্লিক করুন, এটি ব্যতিক্রমগুলি সম্পর্কে আরও বিশদ এবং কীভাবে এটি ঠিক করতে হবে তার নির্দেশিকা প্রদান করে৷

সোর্স প্যানেলে সমস্যা ট্যাবে লিঙ্ক করুন

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

ভিউপোর্টের বাইরে নোড স্ক্রিনশট ক্যাপচার করুন

আপনি এখন একটি সম্পূর্ণ নোডের জন্য নোডের স্ক্রিনশট ক্যাপচার করতে পারেন, যার মধ্যে ভাঁজের নিচের বিষয়বস্তু রয়েছে। পূর্বে, ভিউপোর্টে দৃশ্যমান বিষয়বস্তুর জন্য স্ক্রিনশটটি কেটে দেওয়া হয়েছিল। পূর্ণ-পৃষ্ঠার স্ক্রিনশটগুলিও এখন সুনির্দিষ্ট।

এলিমেন্টস প্যানেলে, একটি এলিমেন্টে ডান ক্লিক করুন এবং ক্যাপচার নোড স্ক্রিনশট নির্বাচন করুন।

ভিউপোর্টের বাইরে নোড স্ক্রিনশট ক্যাপচার করুন

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

নেটওয়ার্ক অনুরোধের জন্য নতুন ট্রাস্ট টোকেন ট্যাব

নতুন ট্রাস্ট টোকেন ট্যাব দিয়ে ট্রাস্ট টোকেন নেটওয়ার্ক অনুরোধগুলি পরিদর্শন করুন৷

ট্রাস্ট টোকেন হল একটি নতুন API যা প্রতারণার বিরুদ্ধে লড়াই করতে এবং প্যাসিভ ট্র্যাকিং ছাড়াই প্রকৃত মানুষের থেকে বটগুলিকে আলাদা করতে সহায়তা করে৷ ট্রাস্ট টোকেন দিয়ে কীভাবে শুরু করবেন তা জানুন।

পরবর্তী রিলিজে আরও ডিবাগিং সমর্থন আসবে।

নেটওয়ার্ক অনুরোধের জন্য নতুন ট্রাস্ট টোকেন ট্যাব

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

বাতিঘর প্যানেলে বাতিঘর 7

Lighthouse প্যানেল এখন Lighthouse 7 চালাচ্ছে। পরিবর্তনের সম্পূর্ণ তালিকার জন্য রিলিজ নোটগুলি দেখুন।

বাতিঘর প্যানেলে বাতিঘর 7

বাতিঘর 7-এ নতুন অডিট:

  • প্রিলোড লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP) ছবি । আপনার LCP সময় উন্নত করার জন্য LCP উপাদান দ্বারা ব্যবহৃত চিত্রটি আগে থেকে লোড করা হয়েছে কিনা তা নিরীক্ষণ করে।
  • সমস্যাগুলি Issues প্যানেলে লগ করা হয়েছে ৷ Issues প্যানেলে অমীমাংসিত সমস্যার একটি তালিকা নির্দেশ করে।
  • প্রগ্রেসিভ ওয়েব অ্যাপস (PWA) । PWA বিভাগ মোটামুটি উল্লেখযোগ্যভাবে পরিবর্তিত হয়েছে।

  • ইনস্টলযোগ্য গোষ্ঠীটি এখন সম্পূর্ণরূপে সক্ষমতা পরীক্ষা দ্বারা চালিত হয় যা Chrome-এর ইনস্টলযোগ্য মানদণ্ডকে সক্ষম করে৷ এই একই সংকেত ম্যানিফেস্ট ফলকে দেখা যায়।

    • "একজন পরিষেবা কর্মীকে নিবন্ধন করে..." অডিট PWA অপ্টিমাইজ করা গ্রুপে চলে যায়, এবং "HTTPS ব্যবহার করে" অডিট এখন কী "ইনস্টলযোগ্যতা প্রয়োজনীয়তা" অডিটের অংশ হিসেবে অন্তর্ভুক্ত করা হয়েছে।
    • দ্রুত এবং নির্ভরযোগ্য গ্রুপ সরানো হয়. যেহেতু পুনর্গঠিত "ইনস্টলযোগ্যতা প্রয়োজনীয়তা" অডিটে অফলাইন-ক্ষমতা পরীক্ষা অন্তর্ভুক্ত রয়েছে, "বর্তমান পৃষ্ঠা এবং start_url 200 এর সাথে প্রতিক্রিয়া জানালে অফলাইন" অডিট সরানো হয়েছে৷ "পেজ লোড মোবাইল নেটওয়ার্কে যথেষ্ট দ্রুত" অডিটটিও সরানো হয়েছে৷

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

উপাদান প্যানেল আপডেট

CSS :target স্টেট জোর করে সমর্থন করে

CSS :target অবস্থা জোর করে পরিদর্শন করতে আপনি এখন DevTools ব্যবহার করতে পারেন।

উপাদান প্যানেলে, একটি উপাদান নির্বাচন করুন এবং উপাদানের অবস্থা টগল করুন। শৈলীগুলি জোর করতে এবং পরিদর্শন করতে :target চেকবক্স সক্রিয় করুন।

ইউআরএলে হ্যাশ এবং একটি উপাদানের আইডি একই হলে : :target সিউডো-ক্লাস স্টাইল উপাদান ব্যবহার করুন। এটি নিজে চেষ্টা করতে এই ডেমো দেখুন. এই নতুন DevTools বৈশিষ্ট্যটি আপনাকে সর্বদা ম্যানুয়ালি URL পরিবর্তন না করেই এই জাতীয় শৈলী পরীক্ষা করতে দেয়।

CSS `:target` অবস্থা জোর করে

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

সদৃশ উপাদানের জন্য নতুন শর্টকাট

অবিলম্বে একটি উপাদান ক্লোন করতে নতুন ডুপ্লিকেট উপাদান শর্টকাট ব্যবহার করুন.

এলিমেন্টস প্যানেলে একটি এলিমেন্টে রাইট ক্লিক করুন, ডুপ্লিকেট এলিমেন্ট নির্বাচন করুন। এর অধীনে একটি নতুন উপাদান তৈরি করা হবে।

বিকল্পভাবে, আপনি কীবোর্ড শর্টকাট সহ উপাদান নকল করতে পারেন:

  • ম্যাক: Shift + Option + ⬇️
  • উইন্ডো/লিনাক্স: Shift + Alt + ⬇️

সদৃশ উপাদান

ক্রোমিয়াম সমস্যা: 1150797 , 1150797৷

কাস্টম সিএসএস বৈশিষ্ট্যের জন্য রঙ চয়নকারী

শৈলী ফলক এখন কাস্টম CSS বৈশিষ্ট্যের জন্য রঙ চয়নকারী দেখায়।

এছাড়াও, আপনি Shift কী ধরে রাখতে পারেন এবং রঙের মানের RGBA, HSLA, এবং Hex উপস্থাপনাগুলির মাধ্যমে চক্র করতে রঙ চয়নকারীতে ক্লিক করতে পারেন।

কাস্টম সিএসএস বৈশিষ্ট্যের জন্য রঙ চয়নকারী

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

CSS বৈশিষ্ট্য কপি করার জন্য নতুন শর্টকাট

আপনি এখন কয়েকটি নতুন শর্টকাট দিয়ে দ্রুত CSS বৈশিষ্ট্য কপি করতে পারেন।

উপাদান প্যানেলে, একটি উপাদান নির্বাচন করুন। তারপর, মানটি অনুলিপি করতে স্টাইল প্যানেলে একটি CSS ক্লাস বা একটি CSS বৈশিষ্ট্যের উপর ডান-ক্লিক করুন।

CSS বৈশিষ্ট্য কপি করার জন্য নতুন শর্টকাট

CSS ক্লাসের জন্য কপি অপশন:

  • কপি নির্বাচক । বর্তমান নির্বাচকের নাম অনুলিপি করুন।
  • নিয়ম অনুলিপি করুন । বর্তমান নির্বাচকের নিয়ম অনুলিপি করুন।
  • সমস্ত ঘোষণা অনুলিপি করুন : অবৈধ এবং উপসর্গযুক্ত বৈশিষ্ট্য সহ বর্তমান নিয়মের অধীনে সমস্ত ঘোষণা অনুলিপি করুন।

CSS সম্পত্তির জন্য কপি বিকল্প:

  • কপি ঘোষণা . বর্তমান লাইনের ঘোষণা অনুলিপি করুন।
  • সম্পত্তি অনুলিপি করুন । বর্তমান লাইনের বৈশিষ্ট্য অনুলিপি করুন।
  • কপি মান : বর্তমান লাইনের মান কপি করুন।

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

কুকিজ আপডেট

URL-ডিকোডেড কুকিজ দেখানোর জন্য নতুন বিকল্প

আপনি এখন কুকি প্যানে URL-ডিকোডেড কুকিজ মান দেখতে বেছে নিতে পারেন।

অ্যাপ্লিকেশন প্যানেলে যান এবং কুকিজ প্যানেল নির্বাচন করুন। তালিকায় যেকোনো কুকি নির্বাচন করুন। ডিকোড করা কুকি দেখতে নতুন ইউআরএল ডিকোডেড চেকবক্স দেখান সক্ষম করুন।

URL-ডিকোডেড কুকিজ দেখানোর বিকল্প

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

শুধুমাত্র দৃশ্যমান কুকিজ সাফ করুন

কুকি প্যানে থাকা সমস্ত কুকিজ সাফ করুন বোতামটি এখন ফিল্টার করা কুকিজ সাফ বোতাম দ্বারা প্রতিস্থাপিত হয়েছে।

অ্যাপ্লিকেশন প্যানেলে > কুকিজ প্যানেলে, কুকি ফিল্টার করতে পাঠ্যবক্সে পাঠ্য লিখুন। এখানে আমাদের উদাহরণে, আমরা "PREF" দ্বারা তালিকাটি ফিল্টার করি। দৃশ্যমান কুকি মুছে ফেলতে ফিল্টার করা কুকিজ সাফ বোতামে ক্লিক করুন। ফিল্টার পাঠ্যটি সাফ করুন এবং আপনি দেখতে পাবেন অন্যান্য কুকিগুলি তালিকায় থাকবে। পূর্বে, আপনার কাছে শুধুমাত্র সমস্ত কুকিজ সাফ করার বিকল্প ছিল।

শুধুমাত্র দৃশ্যমান কুকিজ সাফ করুন

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

স্টোরেজ প্যানে তৃতীয় পক্ষের কুকিজ সাফ করার নতুন বিকল্প

স্টোরেজ ফলকে সাইট ডেটা সাফ করার সময়, DevTools এখন ডিফল্টরূপে শুধুমাত্র প্রথম পক্ষের কুকিগুলি সাফ করে। তৃতীয় পক্ষের কুকিগুলিও সাফ করতে তৃতীয় পক্ষের কুকিগুলি সহ সক্ষম করুন৷

তৃতীয় পক্ষের কুকিজ সাফ করার বিকল্প

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

কাস্টম ডিভাইসের জন্য ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিত সম্পাদনা করুন

আপনি এখন কাস্টম ডিভাইসের জন্য ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিত সম্পাদনা করতে পারেন।

সেটিংস > ডিভাইসে যান এবং কাস্টম ডিভাইস যোগ করুন... এ ক্লিক করুন। ক্লায়েন্ট ইঙ্গিত সম্পাদনা করতে ব্যবহারকারী এজেন্ট ক্লায়েন্ট ইঙ্গিত বিভাগটি প্রসারিত করুন।

ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিত সম্পাদনা করুন

ইউজার-এজেন্ট ক্লায়েন্ট ইঙ্গিত হল ইউজার-এজেন্ট স্ট্রিং-এর একটি বিকল্প যা ডেভেলপারদের একটি গোপনীয়তা-সংরক্ষণ এবং এর্গোনমিক উপায়ে ব্যবহারকারীর ব্রাউজার সম্পর্কে তথ্য অ্যাক্সেস করতে সক্ষম করে। web.dev/user-agent-client-hints/ এ ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিত সম্পর্কে আরও জানুন।

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

নেটওয়ার্ক প্যানেল আপডেট

"রেকর্ড নেটওয়ার্ক লগ" সেটিং চালিয়ে যান

DevTools এখন "রেকর্ড নেটওয়ার্ক লগ" সেটিং বজায় রাখে। পূর্বে, যখনই একটি পৃষ্ঠা পুনরায় লোড হয় তখন DevTools ব্যবহারকারীর পছন্দ রিসেট করে।

নেটওয়ার্ক লগ রেকর্ড করুন

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

নেটওয়ার্ক প্যানেলে ওয়েব ট্রান্সপোর্ট সংযোগগুলি দেখুন৷

নেটওয়ার্ক প্যানেল এখন WebTransport সংযোগ প্রদর্শন করে।

ওয়েব ট্রান্সপোর্ট সংযোগ

WebTransport হল একটি নতুন API অফার করে কম-বিলম্ব, দ্বিমুখী, ক্লায়েন্ট-সার্ভার মেসেজিং। এর ব্যবহারের ক্ষেত্রে, এবং কিভাবে web.dev/webtransport/ এ বাস্তবায়নের ভবিষ্যৎ সম্পর্কে প্রতিক্রিয়া জানাতে হয় সে সম্পর্কে আরও জানুন।

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

"অনলাইন" এর নাম পরিবর্তন করে "নো থ্রটলিং" করা হয়েছে

নেটওয়ার্ক ইমুলেশন বিকল্প "অনলাইন" এখন "নো থ্রটলিং" নামকরণ করা হয়েছে।

নেটওয়ার্ক লগ রেকর্ড করুন

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

কনসোল, উত্স প্যানেল এবং শৈলী প্যানেলে নতুন অনুলিপি বিকল্প

কনসোল এবং সোর্স প্যানেলে অবজেক্ট কপি করার জন্য নতুন শর্টকাট

আপনি এখন কনসোল এবং উত্স প্যানেলে নতুন শর্টকাটগুলির সাথে বস্তুর মানগুলি অনুলিপি করতে পারেন৷ এটি সুবিধাজনক বিশেষত যখন আপনার কাছে একটি বড় বস্তু (যেমন একটি দীর্ঘ অ্যারে) অনুলিপি করার জন্য থাকে।

কনসোলে অবজেক্ট কপি করুন

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

ক্রোমিয়াম সমস্যা: 1149859 , 1148353

উৎস প্যানেল এবং শৈলী প্যানেলে ফাইলের নাম অনুলিপি করার জন্য নতুন শর্টকাট

আপনি এখন ডান ক্লিক করে ফাইলের নাম অনুলিপি করতে পারেন:

  • উত্স প্যানেলে একটি ফাইল, বা
  • এলিমেন্টস প্যানেলে স্টাইল প্যানে ফাইলের নাম

ফাইলের নাম অনুলিপি করতে প্রসঙ্গ মেনু থেকে ফাইলের নাম অনুলিপি নির্বাচন করুন।

উৎস প্যানেলে ফাইলের নাম অনুলিপি করুন

স্টাইল প্যানে ফাইলের নাম অনুলিপি করুন

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

ফ্রেমের বিবরণ আপডেট দেখুন

ফ্রেমের বিশদ বিবরণে নতুন পরিষেবা কর্মীদের তথ্য

DevTools এখন ডেডিকেটেড পরিষেবা কর্মীদের ফ্রেমের অধীনে প্রদর্শন করে যা তাদের তৈরি করে।

অ্যাপ্লিকেশন প্যানেলে, পরিষেবা কর্মীদের সাথে একটি ফ্রেম প্রসারিত করুন, তারপর বিশদ দেখতে পরিষেবা কর্মী গাছের নীচে একজন পরিষেবা কর্মী নির্বাচন করুন৷

ফ্রেমের বিশদ বিবরণে পরিষেবা কর্মীদের তথ্য

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

ফ্রেম বিশদ দৃশ্যে মেমরির তথ্য পরিমাপ করুন

performance.measureMemory() API স্থিতি এখন API প্রাপ্যতা বিভাগের অধীনে প্রদর্শিত হয়।

নতুন performance.measureMemory() API সমগ্র ওয়েব পৃষ্ঠার মেমরি ব্যবহার অনুমান করে। এই নিবন্ধে এই নতুন API এর সাথে আপনার ওয়েব পৃষ্ঠার মোট মেমরি ব্যবহার কিভাবে নিরীক্ষণ করবেন তা শিখুন।

মেমরি পরিমাপ করুন

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

সমস্যা ট্যাব থেকে মতামত প্রদান করুন

আপনি যদি কখনও একটি সমস্যার বার্তা উন্নত করতে চান, তাহলে কনসোল থেকে সমস্যা ট্যাবে যান বা আরও সেটিংস > আরও টুল > সমস্যা > সমস্যা ট্যাব খুলুন। একটি সমস্যা বার্তা প্রসারিত করুন এবং সমস্যা বার্তাটি কি আপনার জন্য সহায়ক? , তারপর আপনি পপ আপে প্রতিক্রিয়া প্রদান করতে পারেন।

প্রতিক্রিয়া লিঙ্ক ইস্যু

পারফরম্যান্স প্যানেলে ফ্রেম বাদ দেওয়া হয়েছে

পারফরম্যান্স প্যানেলে লোড কর্মক্ষমতা বিশ্লেষণ করার সময়, ফ্রেম বিভাগটি এখন ড্রপ করা ফ্রেমগুলিকে লাল হিসাবে চিহ্নিত করে৷ ফ্রেম রেট জানতে এটিতে হোভার করুন।

ফেলে দেওয়া ফ্রেম

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

ডিভাইস মোডে ভাঁজযোগ্য এবং ডুয়াল-স্ক্রিন অনুকরণ করুন

আপনি এখন DevTools-এ ডুয়াল-স্ক্রিন এবং ফোল্ডেবল ডিভাইসগুলিকে অনুকরণ করতে পারেন৷

ডিভাইস টুলবার সক্ষম করার পরে, এই ডিভাইসগুলির মধ্যে একটি নির্বাচন করুন: সারফেস ডুও বা Samsung Galaxy Fold ।

একক-স্ক্রীন বা ভাঁজ করা এবং দ্বৈত-স্ক্রীন বা খোলা ভঙ্গিগুলির মধ্যে টগল করতে নতুন স্প্যান আইকনে ক্লিক করুন।

আপনি নতুন CSS মিডিয়া screen-spanning বৈশিষ্ট্য এবং JavaScript getWindowSegments API অ্যাক্সেস করতে পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করতে পারেন। পরীক্ষামূলক আইকন পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য পতাকার অবস্থা প্রদর্শন করে। পতাকা চালু হলে আইকনটি হাইলাইট করা হয়। chrome://flags এ নেভিগেট করুন এবং পতাকা টগল করুন।

ডুয়াল-স্ক্রিন অনুকরণ করুন

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

পরীক্ষামূলক বৈশিষ্ট্য

Puppeteer রেকর্ডার সহ ব্রাউজার পরীক্ষা স্বয়ংক্রিয় করুন

DevTools এখন ব্রাউজারের সাথে আপনার ইন্টারঅ্যাকশনের উপর ভিত্তি করে Puppeteer স্ক্রিপ্ট তৈরি করতে পারে, এটি আপনার জন্য ব্রাউজার পরীক্ষা স্বয়ংক্রিয় করা সহজ করে তোলে। Puppeteer হল একটি Node.js লাইব্রেরি যা DevTools প্রোটোকলের মাধ্যমে Chrome বা Chromium নিয়ন্ত্রণ করতে একটি উচ্চ-স্তরের API প্রদান করে।

এই ডেমো পৃষ্ঠায় যান। DevTools-এ সোর্স প্যানেল খুলুন। বাম ফলকে রেকর্ডিং ট্যাবটি নির্বাচন করুন। একটি নতুন রেকর্ডিং যোগ করুন এবং ফাইলের নাম দিন (যেমন test01.js)।

মিথস্ক্রিয়া রেকর্ডিং শুরু করতে নীচে রেকর্ড বোতামে ক্লিক করুন। অন-স্ক্রীন ফর্ম পূরণ করার চেষ্টা করুন. লক্ষ্য করুন যে Puppeteer কমান্ডগুলি সেই অনুযায়ী ফাইলে যুক্ত করা হয়েছে। রেকর্ডিং বন্ধ করতে আবার রেকর্ড বোতামে ক্লিক করুন।

স্ক্রিপ্ট চালানোর জন্য, Puppeteer অফিসিয়াল সাইটে শুরু করার নির্দেশিকা অনুসরণ করুন।

দয়া করে মনে রাখবেন এটি একটি প্রাথমিক পর্যায়ের পরীক্ষা। আমরা সময়ের সাথে সাথে রেকর্ডারের কার্যকারিতা উন্নত এবং প্রসারিত করার পরিকল্পনা করি।

পুতুল রেকর্ডার

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

শৈলী ফলকে ফন্ট সম্পাদক

নতুন ফন্ট এডিটর হল আপনার ওয়েবপৃষ্ঠার জন্য নিখুঁত টাইপোগ্রাফি খুঁজে পেতে সাহায্য করার জন্য ফন্ট সম্পর্কিত বৈশিষ্ট্যগুলির জন্য স্টাইল প্যানেলে একটি পপওভার সম্পাদক৷

পপওভার স্বজ্ঞাত ইনপুট প্রকারের একটি সিরিজ সহ গতিশীলভাবে টাইপোগ্রাফি ম্যানিপুলেট করার জন্য একটি পরিষ্কার UI প্রদান করে।

শৈলী ফলকে ফন্ট সম্পাদক

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

CSS flexbox ডিবাগিং টুল

DevTools শেষ প্রকাশের পর থেকে flexbox ডিবাগিংয়ের জন্য পরীক্ষামূলক সমর্থন যোগ করেছে।

DevTools এখন আপনাকে CSS align-items প্রপার্টি আরও ভালভাবে কল্পনা করতে সাহায্য করার জন্য একটি গাইড লাইন আঁকে। CSS gap সম্পত্তি পাশাপাশি সমর্থিত. এখানে আমাদের উদাহরণে, আমাদের CSS gap: 12px; . প্রতিটি ফাঁকের জন্য হ্যাচিং প্যাটার্ন লক্ষ্য করুন।

ফ্লেক্সবক্স

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

নতুন CSP লঙ্ঘন ট্যাব

নতুন CSP লঙ্ঘন ট্যাবে এক নজরে সমস্ত সামগ্রী নিরাপত্তা নীতি (CSP) লঙ্ঘনগুলি দেখুন৷ এই নতুন ট্যাবটি একটি পরীক্ষা যা প্রচুর পরিমাণে CSP এবং বিশ্বস্ত প্রকার লঙ্ঘন সহ ওয়েব পৃষ্ঠাগুলির সাথে কাজ করা সহজ করে তুলবে৷

CSP লঙ্ঘন ট্যাব

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

নতুন রঙের বৈসাদৃশ্য গণনা - অ্যাডভান্সড পারসেপচুয়াল কনট্রাস্ট অ্যালগরিদম (APCA)

অ্যাডভান্সড পারসেপচুয়াল কন্ট্রাস্ট অ্যালগরিদম (APCA) কালার পিকারে AA / AAA নির্দেশিকা কনট্রাস্ট রেশিও প্রতিস্থাপন করছে।

APCA হল রঙের উপলব্ধির উপর আধুনিক গবেষণার উপর ভিত্তি করে বৈসাদৃশ্য গণনা করার একটি নতুন উপায়। AA/AAA নির্দেশিকাগুলির তুলনায়, APCA আরও প্রসঙ্গ-নির্ভর৷ বৈসাদৃশ্যটি পাঠ্যের স্থানিক বৈশিষ্ট্য (ফন্টের ওজন এবং আকার), রঙ (পাঠ্য এবং পটভূমির মধ্যে অনুভূত হালকাতার পার্থক্য) এবং প্রসঙ্গ (পরিবেষ্টিত আলো, পারিপার্শ্বিকতা, পাঠ্যের উদ্দেশ্য) এর উপর ভিত্তি করে গণনা করা হয়।

কালার পিকারে APCA

উদাহরণ দেখায় APCA থ্রেশহোল্ড হল 38% । বৈসাদৃশ্য অনুপাত অবশ্যই তালিকাভুক্ত মান পূরণ বা অতিক্রম করতে হবে। এই মানটি ফন্টের ওজন এবং আকারের উপর ভিত্তি করে গণনা করা হয়, এই APCA লুকআপ টেবিলটি উল্লেখ করে।

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

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

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

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

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

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

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

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