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

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

এলিমেন্টস > স্টাইলসে কাস্টম প্রপার্টিজের জন্য নতুন বিভাগ

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

আপনার নিবন্ধিত কাস্টম প্রপার্টিগুলি পরীক্ষা করতে, Elements > Styles -এ, প্রপার্টির নামের উপর কার্সার রাখুন এবং একটি টুলটিপে এর বর্ণনাকারীগুলি দেখুন। টুলটিপে, collapsible @property বিভাগে নিবন্ধিত প্রপার্টিটি দেখতে লিঙ্কটিতে ক্লিক করুন।

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

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

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

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

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

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

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

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

    'সকল ওভাররাইড মুছে ফেলুন'-এর পরিবর্তে 'মুছুন'-এর আগে এবং পরে।

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

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

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

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

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

তৈরির আগে এবং পরে অনুসন্ধান প্রতি লাইনে সমস্ত মিল দেখায়।

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

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

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

উন্নত উৎস প্যানেল

সোর্স প্যানেলে স্ট্রিমলাইন করা কর্মক্ষেত্র

সোর্স প্যানেলে কর্মক্ষেত্রের বৈশিষ্ট্যটি নতুনভাবে সুবিন্যস্ত করা হয়েছে:

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

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

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

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

সোর্সে প্যানগুলি পুনঃক্রম করুন

আপনি এখন সোর্স প্যানেলের বাম দিকের প্যানগুলিকে টেনে এনে ড্রপ করে পুনঃক্রম করতে পারেন, যেমনটি আপনি অন্যান্য প্যানেল, ট্যাব এবং প্যানগুলিকে পুনঃক্রম করতে পারেন।

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

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

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

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

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

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

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

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

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

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

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

বাতিঘর ১১

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

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

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

অ্যাক্সেসিবিলিটি উন্নতি

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

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

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

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

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

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

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

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

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

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

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

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

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