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

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

উপাদান > শৈলীতে কাস্টম বৈশিষ্ট্যের জন্য নতুন বিভাগ

Elements প্যানেল এখন @property CSS at-rule সমর্থন করে। এটি আপনাকে CSS কাস্টম বৈশিষ্ট্যগুলি স্পষ্টভাবে সংজ্ঞায়িত করতে দেয় এবং কোনো জাভাস্ক্রিপ্ট চালানো ছাড়াই একটি স্টাইলশীটে তাদের নিবন্ধন করতে দেয়।

আপনার নিবন্ধিত কাস্টম বৈশিষ্ট্যগুলি পরিদর্শন করতে, উপাদান > শৈলীতে , সম্পত্তির নামের উপর হোভার করুন এবং একটি টুলটিপে এর বর্ণনাকারীগুলি দেখুন। টুলটিপে, কলাপসিবল @property বিভাগে নিবন্ধিত সম্পত্তি দেখতে লিঙ্কটিতে ক্লিক করুন।

ক্রোমিয়াম সমস্যা: 1471102 , 1471103 , 1471105 ।

আরও স্থানীয় ওভাররাইড উন্নতি

পূর্ববর্তী সংস্করণে উন্নতির ধারা অব্যাহত রেখে, স্থানীয় ওভাররাইডগুলি এখন নিম্নলিখিতগুলি করে:

  • উত্স > পৃষ্ঠাতে , আপনি যখন একটি উত্স-ম্যাপ করা ফাইলে ডান-ক্লিক করেন এবং ওভাররাইড সামগ্রী নির্বাচন করেন, তখন DevTools একটি ডায়ালগ দেখাবে যা আপনাকে পরিবর্তে মূল উত্সে নিয়ে যায়৷ উৎস-ম্যাপ করা ফাইলের বিষয়বস্তু ওভাররাইড করা যাবে না।

    ডায়ালগ যা আপনাকে উৎস-ম্যাপ করা ফাইলের পরিবর্তে মূল কোডে নিয়ে যায়।

  • নেটওয়ার্ক প্যানেল একটি নতুন হ্যাস ওভাররাইড কলাম পায় এবং একটি সংশ্লিষ্ট has-overrides:[content|headers|yes|no] ফিল্টার পায়। হ্যাস ওভাররাইড কলাম দেখতে, টেবিল হেডারে ডান-ক্লিক করুন এবং এটি নির্বাচন করুন।

    'হ্যাস-ওভাররাইডস:হ্যাঁ' মানের জন্য ফিল্টারিং 'হ্যাস ওভাররাইড' কলামে।

  • Sources > Overrides- এ, Delete all overrides মেনু অপশনটি সুনির্দিষ্ট আচরণ সহ Delete অপশন দিয়ে প্রতিস্থাপিত হয়েছে।

    আগে এবং পরে 'ডিলিট অল ওভাররাইডস'কে 'ডিলিট' দিয়ে প্রতিস্থাপন করুন।

পূর্ববর্তী সমস্ত ওভাররাইডগুলি মুছুন বিভ্রান্তিকর ছিল কারণ এটি বর্তমান অধিবেশনে সক্রিয় ওভাররাইডগুলিকে মুছে দিয়েছে, দ্বারা চিহ্নিত সংরক্ষিত বেগুনি ডট আইকন।

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

পূর্ববর্তী বিকল্পটি ফিরিয়ে আনতে, চেক করুন চেকবক্স। "অস্থায়ীভাবে সমস্ত ওভাররাইড মুছুন" সক্ষম করুন ৷ সেটিংস। সেটিংস > পরীক্ষা-নিরীক্ষা ।

ক্রোমিয়াম সমস্যা: 1472952 , 1416338 , 1472580 , 1473681 1475668 ।

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

সার্চ করার আগে এবং পরে প্রতি লাইনে সমস্ত মিল দেখায়।

উপরন্তু, অনুসন্ধান একটি গতি বুস্ট পেয়েছে. পরবর্তী ভিডিওতে আগে (বাম) এবং পরে (ডান) তুলনা দেখুন।

অবশেষে, অনুসন্ধান এখন উপেক্ষা তালিকা সমর্থন করে এবং উপেক্ষা করা ফাইল থেকে আপনাকে ফলাফল দেখাবে না।

ক্রোমিয়াম সমস্যা: 1468875 , 1472019 ।

উন্নত সোর্স প্যানেল

সোর্স প্যানেলে স্ট্রীমলাইনড ওয়ার্কস্পেস

উত্স প্যানেলে ওয়ার্কস্পেস বৈশিষ্ট্যটি নতুন সুবিন্যস্ত:

  • ধারাবাহিক নামকরণ । সবচেয়ে উল্লেখযোগ্যভাবে, Sources > Filesystem pane-এর নাম পরিবর্তন করা হয়েছে Workspace- এ। এই ফলকের বিভিন্ন UI পাঠ্যগুলি এখন পরিষ্কার এবং অপ্রয়োজনীয়তা মুক্ত৷
  • উন্নত সেটআপ । ফোল্ডারগুলি টেনে আনা এবং ফেলে দেওয়ার জন্য আরও ভাল সংকেত দেখুন বা একটি ফোল্ডার নির্বাচন করতে একটি লিঙ্কে ক্লিক করুন৷

সোর্স > ওয়ার্কস্পেস আপনাকে DevTools-এ করা পরিবর্তনগুলিকে সরাসরি আপনার সোর্স ফাইলে সিঙ্ক করতে দেয়।

কর্মে নতুন সেটআপ এবং কর্মপ্রবাহ দেখুন:

ক্রোমিয়াম সমস্যা: 1473771 , 1473880 , 1473963 , 1474686 , 1474687 ।

উত্সগুলিতে প্যানগুলি পুনরায় সাজান৷

আপনি এখন সোর্স প্যানেলের বাম দিকে প্যানগুলিকে টেনে আনতে এবং ফেলে দিয়ে পুনরায় সাজাতে পারেন, যেভাবে আপনি অন্যান্য প্যানেল, ট্যাব এবং প্যানে পুনরায় সাজাতে পারেন৷

ক্রোমিয়াম সমস্যা: 1473758 ।

আরো স্ক্রিপ্ট ধরনের জন্য সিনট্যাক্স হাইলাইটিং এবং প্রিটি-প্রিন্টিং

উত্স প্যানেল এখন করতে পারে:

  • নিম্নোক্ত স্ক্রিপ্ট প্রকারের মধ্যে প্রিটি-প্রিন্ট ইনলাইন জাভাস্ক্রিপ্ট: module , importmap , speculationrules ।
  • importmap এবং speculationrules স্ক্রিপ্ট প্রকারের সিনট্যাক্স হাইলাইট করুন, উভয়ই JSON ধারণ করে।

আগে এবং পরে প্রিটি-প্রিন্টিং এবং সিনট্যাক্স হাইলাইট করার স্পেকুলেশন নিয়ম স্ক্রিপ্ট টাইপ।

অনুমানের নিয়ম সম্পর্কে আরও তথ্যের জন্য, তাত্ক্ষণিক পৃষ্ঠা নেভিগেশনের জন্য Chrome-এ প্রিরেন্ডার পৃষ্ঠাগুলি দেখুন৷

ক্রোমিয়াম সমস্যা: 1473875 ।

পছন্দ-কমানো-স্বচ্ছতা মিডিয়া বৈশিষ্ট্য অনুকরণ করুন

Chrome 118 এখন prefers-reduced-transparency মিডিয়া বৈশিষ্ট্য সমর্থন করে৷ এই বৈশিষ্ট্যটি ডেভেলপারদের OS-এ স্বচ্ছতা হ্রাসের জন্য ব্যবহারকারী-নির্বাচিত পছন্দগুলির সাথে ওয়েব সামগ্রীকে মানিয়ে নিতে দেয়, যেমন ম্যাকওএস-এ স্বচ্ছতা হ্রাস করুন ৷

এই মিডিয়া বৈশিষ্ট্যটি অনুকরণ করতে, রেন্ডারিং ট্যাবটি খুলুন এবং এটিতে নীচে স্ক্রোল করুন৷

ক্রোমিয়াম সমস্যা: 1424879 ।

বাতিঘর 11

Lighthouse প্যানেল এখন Lighthouse 11 চালায়। সবচেয়ে উল্লেখযোগ্যভাবে, এই সংস্করণটি লিগ্যাসি নেভিগেশন সরিয়ে দেয় এবং নতুন অ্যাক্সেসিবিলিটি অডিট যোগ করে এবং কীভাবে অ্যাক্সেসিবিলিটি ক্যাটাগরি স্কোর করা হয় তা পরিবর্তন করে।

পরিবর্তনের সম্পূর্ণ তালিকাও দেখুন। DevTools-এ Lighthouse প্যানেল ব্যবহার করার প্রাথমিক বিষয়গুলি জানতে, Lighthouse দেখুন: ওয়েবসাইটের গতি অপ্টিমাইজ করুন ।

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

অ্যাক্সেসযোগ্যতার উন্নতি

DevTools এখন আরও নেভিগেশন কীস্ট্রোক সমর্থন করে:

  • CSS ওভারভিউ : বাম সাইডবারে বিভাগগুলি নেভিগেট করতে উপরে এবং নীচের তীরগুলি ব্যবহার করুন।
  • মেমরি : বাম সাইডবারে, ট্যাবের সাথে স্ন্যাপশটগুলির পাশে সংরক্ষণ বোতামে ফোকাস করুন এবং ফোল্ডার নির্বাচন করতে এন্টার টিপুন।

উপরন্তু, বেশ কিছু স্ক্রিন রিডার ঘোষণা সংক্রান্ত সমস্যা ঠিক করা হয়েছে।

ক্রোমিয়াম সমস্যা: 1470401 , 1471301 , 1474108 , 1468631 ।

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

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

  • নেটওয়ার্ক : জনপ্রিয় রিসোর্স প্রকারের জন্য নতুন আইকন: media , wasm , websocket , manifest , fetch/xhr , json ( 1466298 )।
  • অনেক UI উপাদানে উপাদান 3 রঙের রঙের আপডেট, বিশেষত এলিমেন্টস এবং পারফরম্যান্স প্যানেলে ( 1456690 , 1472243 )।
  • ইস্যুগুলি এখন নেভিগেশন ( 1466601 ) জুড়ে কুকি সমস্যাগুলি সংরক্ষণ করে।
  • বিভিন্ন অ্যাপ্লিকেশন > প্রিলোডিং উন্নতি, সবচেয়ে উল্লেখযোগ্যভাবে সাজানো যায় এমন গ্রিড এবং সংশোধিত নিয়ম সেটের বিবরণ ( 1410709 )।
  • প্রোটোকল মনিটরে কমান্ড এডিটরের বিভিন্ন উন্নতি, বিশেষ করে ভুল ইনপুট সম্পর্কে সতর্কতা, প্রেরিত কমান্ড সম্পাদনা করা, পূর্বনির্ধারিত কী ছাড়া অবজেক্ট প্যারামিটারের জন্য সম্পাদক, রেফারেন্স দ্বারা অনির্ধারিত enums-এর জন্য সমর্থন, টাইপ রেফারেন্স ছাড়া বস্তু, সাবস্ট্রিং ম্যাচ দ্বারা ফিল্টার কমান্ড এবং আরও অনেক কিছু। ( 1448050 )।
  • পারফরম্যান্স ফ্লেম চার্ট পাই চার্টের মোট বাক্সের চারপাশে একটি সীমানা পায় ( 1470147 )।
  • উৎসগুলি এখন CSS ( 1471354 ) এ ড্যাশকে শব্দের অক্ষর হিসাবে বিবেচনা করে না।
  • স্বয়ংসম্পূর্ণ এখন সবসময় শেষে CSS-ভিত্তিক কীওয়ার্ড সাজায়।
  • RegEx ফিল্টার এখন স্পেস সমর্থন করে ( 1346936 )।
  • উপাদান স্থির মিডিয়া ক্যোয়ারী বৈশিষ্ট্য সনাক্তকরণ ( 1472693 )।

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

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

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

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

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

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

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