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

সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

Jecelyn Yeen

পূর্বরূপ বৈশিষ্ট্য: নতুন কর্মক্ষমতা অন্তর্দৃষ্টি প্যানেল

আপনার ওয়েবসাইটের পারফরম্যান্সে অ্যাকশনেবল এবং ব্যবহার-কেস-চালিত অন্তর্দৃষ্টি পেতে পারফরম্যান্স ইনসাইট প্যানেল ব্যবহার করুন।

প্যানেল খুলুন এবং আপনার ব্যবহারের ক্ষেত্রের উপর ভিত্তি করে একটি নতুন রেকর্ডিং শুরু করুন। উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠার পৃষ্ঠা লোড পরিমাপ করা যাক।

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

ধাপে ধাপে টিউটোরিয়াল সহ আরও জানতে পারফরম্যান্স ইনসাইট প্যানেল ডকুমেন্টেশনে যান।

এটি একটি পূর্বরূপ বৈশিষ্ট্য যা ওয়েব ডেভেলপারদের (বিশেষ করে অ-পারফরম্যান্স বিশেষজ্ঞদের) সম্ভাব্য পারফরম্যান্স সমস্যা চিহ্নিত করতে এবং সমাধান করতে সহায়তা করে৷ আমাদের দল সক্রিয়ভাবে এই বৈশিষ্ট্যটিতে কাজ করছে এবং আমরা আরও উন্নতির জন্য আপনার প্রতিক্রিয়া খুঁজছি।

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

হালকা এবং অন্ধকার থিম অনুকরণ করার জন্য নতুন শর্টকাট

আপনি এখন স্টাইল প্যানে নতুন শর্টকাটগুলির সাথে হালকা এবং অন্ধকার থিমগুলি দ্রুত (CSS মিডিয়া বৈশিষ্ট্য পছন্দ করে-রঙ-স্কিম ) অনুকরণ করতে পারেন।

পূর্বে, রেন্ডারিং ট্যাবে থিমগুলিকে অনুকরণ করার জন্য আরও পদক্ষেপ নেওয়া হয়েছিল৷

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

নেটওয়ার্ক প্রিভিউ ট্যাবে উন্নত নিরাপত্তা

DevTools এখন নেটওয়ার্ক প্যানেলে প্রিভিউ ট্যাবে কন্টেন্ট সিকিউরিটি পলিসি (CSP) প্রয়োগ করে।

উদাহরণস্বরূপ, প্রথম স্ক্রিনশটটি একটি পৃষ্ঠা দেখায় যাতে মিশ্র সামগ্রী রয়েছে৷ পৃষ্ঠাটি একটি নিরাপদ HTTPS সংযোগের মাধ্যমে লোড হয়, কিন্তু স্টাইলশীটটি একটি অনিরাপদ HTTP সংযোগের মাধ্যমে লোড হয়৷

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

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

ব্রেকপয়েন্টে উন্নত রিলোডিং

ব্রেকপয়েন্টে রিলোড করার সময় ডিবাগার এখন স্ক্রিপ্ট এক্সিকিউশন বন্ধ করে দেয়।

উদাহরণ স্বরূপ, এই React ডেমোতে ReactDOM ব্রেকপয়েন্টে সেট করার এবং পুনরায় লোড করার সময় স্ক্রিপ্টটি একটি অন্তহীন লুপের মধ্যে পড়েছিল। অন্তহীন লুপের কারণে উত্স প্যানেলটি ভেঙে গেছে।

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

ক্রোমিয়াম সমস্যা: 1014415 , 1004038 , 1112863 , 1134899

কনসোল আপডেট

কনসোলে স্ক্রিপ্ট এক্সিকিউশন ত্রুটিগুলি পরিচালনা করুন

কনসোলে স্ক্রিপ্ট মূল্যায়নের সময় ত্রুটিগুলি এখন সঠিক ত্রুটি ইভেন্ট তৈরি করে যা window.onerror হ্যান্ডলারকে ট্রিগার করে এবং উইন্ডো অবজেক্টে "error" ইভেন্ট হিসাবে প্রেরণ করা হয়।

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

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

একবার আপনি একটি লাইভ এক্সপ্রেশন টাইপ করা শেষ করলে, আপনি এটি কমিট করতে Enter ক্লিক করতে পারেন। পূর্বে, এন্টার চাপার ফলে নতুন লাইন যোগ করা হতো। এটি DevTools-এর অন্যান্য অংশের সাথে অসঙ্গতিপূর্ণ।

লাইভ এক্সপ্রেশন এডিটরে একটি নতুন লাইন যোগ করতে, পরিবর্তে Shift + Enter ব্যবহার করুন।

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

শুরুতে ব্যবহারকারীর প্রবাহ রেকর্ডিং বাতিল করুন

ব্যবহারকারী প্রবাহ রেকর্ডিং শুরু করার সময় আপনি রেকর্ডিং বাতিল করতে পারেন। পূর্বে, রেকর্ডিং বাতিল করার কোন বিকল্প ছিল না।

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

স্টাইল ফলকে উত্তরাধিকার সূত্রে প্রাপ্ত হাইলাইট ছদ্ম-উপাদানগুলি প্রদর্শন করুন

স্টাইল প্যানে উত্তরাধিকারসূত্রে প্রাপ্ত হাইলাইট ছদ্ম-উপাদানগুলি দেখুন (যেমন ::selection , ::spelling-error , ::grammar-error , এবং ::highlight )। পূর্বে, এই নিয়মগুলি প্রদর্শিত হয়নি।

স্পেসিফিকেশনে উল্লিখিত হিসাবে, যখন একাধিক শৈলী বিরোধিতা করে, ক্যাসকেড বিজয়ী শৈলী নির্ধারণ করে। এই নতুন বৈশিষ্ট্যটি আপনাকে নিয়মের উত্তরাধিকার এবং অগ্রাধিকার বুঝতে সাহায্য করে।

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

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

এই রিলিজে কিছু উল্লেখযোগ্য সমাধান হল:

• বৈশিষ্ট্য ফলক এখন ডিফল্টভাবে মান সহ অ্যাক্সেসর বৈশিষ্ট্যগুলি প্রদর্শন করে। এটি আগে ভুলভাবে লুকানো ছিল। ( 1309087 )
• শৈলী ফলক এখন সঠিকভাবে ওভাররাইড করা @support নিয়মগুলিকে স্ট্রাইকথ্রু হিসাবে দেখায়। আগে, নিয়মগুলি স্ট্রাইকথ্রু ছিল না। ( 1298025 )
• সোর্স প্যানেলে CSS ফরম্যাটিং লজিক ঠিক করা হয়েছে যা CSS সম্পাদনা করার সময় একাধিক ফাঁকা লাইন সৃষ্টি করেছে। ( 1309588 )
• কনসোলে একটি অবজেক্টের রিকারসিভলি প্রসারিত বিকল্পটিকে সর্বোচ্চ 100-এ ক্যাপ করুন যাতে এটি সার্কুলার অবজেক্টের জন্য চিরতরে চালু না হয়। ( 1272450 )

[পরীক্ষামূলক] CSS পরিবর্তনগুলি অনুলিপি করুন

এই পরীক্ষার মাধ্যমে, শৈলী ফলক আপনার CSS পরিবর্তনগুলিকে সবুজ রঙে হাইলাইট করে। আপনি পরিবর্তিত নিয়মের উপর হভার করতে পারেন এবং এটি অনুলিপি করতে এটির পাশের নতুন অনুলিপি বোতামে ক্লিক করতে পারেন।

তা ছাড়া, আপনি যেকোনো নিয়মে ডান-ক্লিক করে এবং সমস্ত CSS পরিবর্তন অনুলিপি নির্বাচন করে ঘোষণা জুড়ে সমস্ত CSS পরিবর্তন কপি করতে পারেন।

পরিবর্তন ট্যাবে একটি নতুন অনুলিপি বোতাম যোগ করা হয়েছে যাতে আপনি ট্র্যাক রাখতে এবং সহজেই আপনার CSS পরিবর্তনগুলি অনুলিপি করতে সহায়তা করেন!

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

[পরীক্ষামূলক] ব্রাউজারের বাইরে রঙ বাছাই করা

রঙ চয়নকারীর সাথে ব্রাউজারের বাইরে একটি রঙ বাছাই করতে এই পরীক্ষাটি সক্ষম করুন৷ পূর্বে, আপনি শুধুমাত্র ব্রাউজারের মধ্যে একটি রঙ বাছাই করতে পারেন।

স্টাইল প্যানে, রঙ পিকার খুলতে যেকোনো রঙের পূর্বরূপ ক্লিক করুন। যে কোন জায়গা থেকে রং বাছাই করতে আইড্রপার ব্যবহার করুন।

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

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

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

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

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

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

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

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

Jecelyn Yeen

পূর্বরূপ বৈশিষ্ট্য: নতুন পারফরম্যান্স অন্তর্দৃষ্টি প্যানেল

আপনার ওয়েবসাইটের পারফরম্যান্সে কার্যক্ষম এবং ব্যবহার-কেস-চালিত অন্তর্দৃষ্টি পেতে পারফরম্যান্স অন্তর্দৃষ্টি প্যানেলটি ব্যবহার করুন।

প্যানেলটি খুলুন এবং আপনার ব্যবহারের ক্ষেত্রে ভিত্তিতে একটি নতুন রেকর্ডিং শুরু করুন। উদাহরণস্বরূপ, আসুন এই ডেমো পৃষ্ঠার পৃষ্ঠা লোড পরিমাপ করা যাক।

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

ধাপে ধাপে টিউটোরিয়াল দিয়ে আরও জানতে পারফরম্যান্স অন্তর্দৃষ্টি প্যানেল ডকুমেন্টেশনে যান।

এটি সম্ভাব্য পারফরম্যান্সের সমস্যাগুলি সনাক্ত এবং ঠিক করতে ওয়েব বিকাশকারীদের (বিশেষত অ-পারফরম্যান্স বিশেষজ্ঞদের) সহায়তা করার জন্য একটি পূর্বরূপ বৈশিষ্ট্য। আমাদের দলটি সক্রিয়ভাবে এই বৈশিষ্ট্যটিতে কাজ করছে এবং আমরা আরও বর্ধনের জন্য আপনার প্রতিক্রিয়া খুঁজছি।

ক্রোমিয়াম ইস্যু: 1270700

হালকা এবং গা dark ় থিম অনুকরণ করতে নতুন শর্টকাট

আপনি এখন স্টাইলস ফলকে নতুন শর্টকাটগুলির সাথে হালকা এবং গা dark ় থিমগুলি দ্রুত অনুকরণ করতে পারেন (সিএসএস মিডিয়া বৈশিষ্ট্যটি রঙিন-স্কিম পছন্দ করে )।

পূর্বে, এটি রেন্ডারিং ট্যাবে থিমগুলি অনুকরণ করতে আরও পদক্ষেপ নিয়েছিল।

ক্রোমিয়াম ইস্যু: 1314299

নেটওয়ার্ক পূর্বরূপ ট্যাবে উন্নত সুরক্ষা

ডিভটুলগুলি এখন নেটওয়ার্ক প্যানেলে পূর্বরূপ ট্যাবে সামগ্রী সুরক্ষা নীতি (সিএসপি) প্রয়োগ করে।

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

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

ক্রোমিয়াম ইস্যু: 833147

ব্রেকপয়েন্টে উন্নত পুনরায় লোডিং

ব্রেকপয়েন্টে পুনরায় লোড করার সময় ডিবাগার এখন স্ক্রিপ্ট সম্পাদন শেষ করে।

উদাহরণস্বরূপ, এই প্রতিক্রিয়া ডেমোতে ReactDOM ব্রেকপয়েন্টে সেট এবং পুনরায় লোড করার সময় স্ক্রিপ্টটি একটি অন্তহীন লুপে পরিণত হয়েছিল। অন্তহীন লুপের কারণে উত্স প্যানেলটি ভেঙে গেছে।

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

ক্রোমিয়াম ইস্যু: 1014415 , 1004038 , 1112863 , 1134899

কনসোল আপডেট

কনসোলে স্ক্রিপ্ট এক্সিকিউশন ত্রুটিগুলি হ্যান্ডেল করুন

কনসোলে স্ক্রিপ্ট মূল্যায়নের সময় ত্রুটিগুলি এখন সঠিক ত্রুটি ইভেন্টগুলি উত্পন্ন করে যা window.onerror ট্রিগার করে "error"

ক্রোমিয়াম ইস্যু: 1295750

এন্টার সহ লাইভ এক্সপ্রেশন প্রতিশ্রুতিবদ্ধ

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

লাইভ এক্সপ্রেশন সম্পাদকটিতে একটি নতুন লাইন যুক্ত করতে, পরিবর্তে Shift + Enter ব্যবহার করুন।

ক্রোমিয়াম ইস্যু: 1260744

শুরুতে ব্যবহারকারী প্রবাহ রেকর্ডিং বাতিল করুন

ব্যবহারকারী প্রবাহ রেকর্ডিং শুরু করার সময় আপনি রেকর্ডিং বাতিল করতে পারেন। পূর্বে, রেকর্ডিং বাতিল করার কোনও বিকল্প ছিল না।

ক্রোমিয়াম ইস্যু: 1257499

স্টাইলস ফলকে উত্তরাধিকার সূত্রে প্রাপ্ত হাইলাইট সিউডো-উপাদানগুলি প্রদর্শন করুন

স্টাইলস ফলকে উত্তরাধিকার সূত্রে প্রাপ্ত হাইলাইট সিউডো-এলিমেন্টগুলি দেখুন (যেমন ::selection ::spelling-error , ::grammar-error , এবং ::highlight )। পূর্বে, এই নিয়মগুলি প্রদর্শিত হয়নি।

স্পেসিফিকেশন হিসাবে উল্লিখিত হিসাবে, যখন একাধিক শৈলীর বিরোধ হয়, ক্যাসকেড বিজয়ী শৈলী নির্ধারণ করে। এই নতুন বৈশিষ্ট্যটি আপনাকে নিয়মগুলির উত্তরাধিকার এবং অগ্রাধিকার বুঝতে সহায়তা করে।

ক্রোমিয়াম ইস্যু: 1024156

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

এই প্রকাশে এগুলি কিছু লক্ষণীয় সমাধান:

• বৈশিষ্ট্য ফলকটি এখন ডিফল্টরূপে মান সহ অ্যাকসেসর বৈশিষ্ট্যগুলি প্রদর্শন করে। এটি ভুলভাবে আগে লুকানো ছিল। ( 1309087 )
• স্টাইলস ফলকটি এখন সঠিকভাবে ওভাররাইড @support বিধিগুলি স্ট্রাইকথ্রু হিসাবে দেখায়। পূর্বে, নিয়মগুলি স্ট্রাইকথ্রু ছিল না। ( 1298025 )
• সিএসএস সম্পাদনা করার সময় একাধিক ফাঁকা রেখা তৈরি করে উত্স প্যানেলে সিএসএস ফর্ম্যাটিং লজিক স্থির করে। ( 1309588 )
• কনসোলে কোনও অবজেক্টের পুনরাবৃত্তিযোগ্য বিকল্পটি সর্বাধিক 100 এ প্রসারিত করুন যাতে এটি বৃত্তাকার অবজেক্টগুলির জন্য চিরতরে চলে না। ( 1272450 )

[পরীক্ষামূলক] সিএসএস পরিবর্তনগুলি অনুলিপি করুন

এই পরীক্ষার সাথে, স্টাইলস ফলকটি সবুজ রঙের আপনার সিএসএসের পরিবর্তনগুলি হাইলাইট করে। আপনি পরিবর্তিত নিয়মগুলি ঘুরে দেখতে পারেন এবং এটি অনুলিপি করতে তার পাশের নতুন অনুলিপি বোতামে ক্লিক করতে পারেন।

এগুলি ছাড়াও, আপনি যে কোনও নিয়মের ডান-ক্লিক করে সমস্ত সিএসএস পরিবর্তনগুলি অনুলিপি করতে পারেন এবং সমস্ত সিএসএস পরিবর্তনগুলি অনুলিপি করে নির্বাচন করতে পারেন।

আপনার সিএসএস পরিবর্তনগুলি সহজেই ট্র্যাক রাখতে এবং অনুলিপি করতে সহায়তা করার জন্য পরিবর্তনগুলি ট্যাবে একটি নতুন অনুলিপি বোতাম যুক্ত করা হয়েছে!

ক্রোমিয়াম ইস্যু: 1268754

[পরীক্ষামূলক] ব্রাউজারের বাইরে রঙ বাছাই করা

রঙিন বাছাইকারী সহ ব্রাউজারের বাইরে কোনও রঙ বাছাই করতে এই পরীক্ষাটি সক্ষম করুন। পূর্বে, আপনি কেবল ব্রাউজারের মধ্যে একটি রঙ বেছে নিতে পারেন।

স্টাইলস ফলকে, রঙ বাছাইকারীটি খুলতে যে কোনও রঙের পূর্বরূপ ক্লিক করুন। যে কোনও জায়গা থেকে রঙ বাছাই করতে আইড্রোপার ব্যবহার করুন।

ক্রোমিয়াম ইস্যু: 1245191

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

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

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করুন

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

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

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

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।

Jecelyn Yeen

Preview feature: New Performance insights panel

Use the Performance insights panel to get actionable and use-case-driven insights on your website's performance.

Open the panel and start a new recording based on your use case. For example, let's measure the page load of this demo page .

Once the recording is complete, you get the performance insights on the Insights pane. Click on each insight item (for example, Render blocking request, layout shift) to understand the issue and potential fixes.

Go to the Performance insights panel documentation to learn more with the step-by-step tutorial.

This is a preview feature to help web developers (especially non-performance experts) to identify and fix potential performance issues. Our team is actively working on this feature and we are looking for your feedback for further enhancements.

Chromium issue: 1270700

New shortcuts to emulate light and dark themes

You can now emulate the light and dark themes quicker (CSS media feature prefers-color-scheme ) with the new shortcuts in the Styles pane.

Previously, it took more steps to emulate themes in the Rendering tab.

Chromium issue: 1314299

Improved security on the Network Preview tab

DevTools now apply the Content Security Policy (CSP) in the Preview tab in the Network panel.

For example, the first screenshot shows a page that contains mixed content . The page loads over a secure HTTPS connection, but the stylesheet loads over an insecure HTTP connection.

The browser blocked the stylesheet request by default. However, when you opened the page via the Preview tab in the Network panel, the stylesheet was not blocked previously (hence the background turned into red). It is now blocked as you would expect (second screenshot).

Chromium issue: 833147

Improved reloading at breakpoint

The debugger now terminates script execution when reloading at breakpoint.

For example, the script got into an endless loop previously when setting and reloading at the ReactDOM breakpoint in this React demo . The Sources panel broke due to the endless loop.

Continuing to execute JavaScript is causing a lot of trouble for developers and might leave the renderer in a broken state. This change aligns the debugging behavior with other browsers like Firefox.

Chromium issues: 1014415 , 1004038 , 1112863 , 1134899

Console updates

Handle script execution errors in the Console

Errors during script evaluation in the Console now generate proper error events that trigger the window.onerror handler and are dispatched as "error" events on the window object.

Chromium issue: 1295750

Commit live expression with Enter

Once you finish typing a live expression , you can click Enter to commit it. Previously, hitting Enter resulted in adding new lines. This is inconsistent with other parts of the DevTools.

To add a new line in the live expression editor, use Shift + Enter instead.

Chromium issue: 1260744

Cancel user flow recording at the start

You can cancel the recording during the start of user flow recording. Previously, there was no option to cancel the recording.

Chromium issue: 1257499

Display inherited highlight pseudo-elements in the Styles pane

View the inherited highlight pseudo-elements (eg ::selection , ::spelling-error , ::grammar-error , and ::highlight ) in the Styles pane. Previously, these rules were not displayed.

As mentioned in the specification , when multiple styles conflict, cascade determines the winning style. This new feature helps you understand the inheritance and priority of the rules.

Chromium issue: 1024156

Miscellaneous highlights

These are some noteworthy fixes in this release:

• The Properties pane now displays accessor properties with value by default. It was hidden mistakenly previously. ( 1309087 )
• The Styles pane now properly shows the overridden @support rules as strikethrough. Previously, the rules weren't strikethrough. ( 1298025 )
• Fixed the CSS formatting logic in the Sources panel that caused multiple blank lines when editing CSS. ( 1309588 )
• Cap the Expand recursively option of an object in the Console to maximum 100 so it does not go on forever for circular objects. ( 1272450 )

[Experimental] Copy CSS changes

With this experiment, the Styles pane highlights your CSS changes in green. You can hover over the changed rules and click on the new copy button next to it to copy it.

Apart from that, you can copy all CSS changes across declarations by right-clicking on any rule, and selecting Copy all CSS changes .

A new Copy button is added to the Changes tab as well to help you keep track and copy your CSS changes with ease!

Chromium issue: 1268754

[Experimental] Picking color outside of browser

Enable this experiment to pick a color outside of the browser with the color picker. Previously, you could only pick a color within the browser.

In the Styles pane, click on any color preview to open the color picker. Use the eyedropper to pick color from anywhere.

Chromium issue: 1245191

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

• Submit feedback and feature requests to us at crbug.com .
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

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

A list of everything that has been covered in the What's new in DevTools series.

Jecelyn Yeen

Preview feature: New Performance insights panel

Use the Performance insights panel to get actionable and use-case-driven insights on your website's performance.

Open the panel and start a new recording based on your use case. For example, let's measure the page load of this demo page .

Once the recording is complete, you get the performance insights on the Insights pane. Click on each insight item (for example, Render blocking request, layout shift) to understand the issue and potential fixes.

Go to the Performance insights panel documentation to learn more with the step-by-step tutorial.

This is a preview feature to help web developers (especially non-performance experts) to identify and fix potential performance issues. Our team is actively working on this feature and we are looking for your feedback for further enhancements.

Chromium issue: 1270700

New shortcuts to emulate light and dark themes

You can now emulate the light and dark themes quicker (CSS media feature prefers-color-scheme ) with the new shortcuts in the Styles pane.

Previously, it took more steps to emulate themes in the Rendering tab.

Chromium issue: 1314299

Improved security on the Network Preview tab

DevTools now apply the Content Security Policy (CSP) in the Preview tab in the Network panel.

For example, the first screenshot shows a page that contains mixed content . The page loads over a secure HTTPS connection, but the stylesheet loads over an insecure HTTP connection.

The browser blocked the stylesheet request by default. However, when you opened the page via the Preview tab in the Network panel, the stylesheet was not blocked previously (hence the background turned into red). It is now blocked as you would expect (second screenshot).

Chromium issue: 833147

Improved reloading at breakpoint

The debugger now terminates script execution when reloading at breakpoint.

For example, the script got into an endless loop previously when setting and reloading at the ReactDOM breakpoint in this React demo . The Sources panel broke due to the endless loop.

Continuing to execute JavaScript is causing a lot of trouble for developers and might leave the renderer in a broken state. This change aligns the debugging behavior with other browsers like Firefox.

Chromium issues: 1014415 , 1004038 , 1112863 , 1134899

Console updates

Handle script execution errors in the Console

Errors during script evaluation in the Console now generate proper error events that trigger the window.onerror handler and are dispatched as "error" events on the window object.

Chromium issue: 1295750

Commit live expression with Enter

Once you finish typing a live expression , you can click Enter to commit it. Previously, hitting Enter resulted in adding new lines. This is inconsistent with other parts of the DevTools.

To add a new line in the live expression editor, use Shift + Enter instead.

Chromium issue: 1260744

Cancel user flow recording at the start

You can cancel the recording during the start of user flow recording. Previously, there was no option to cancel the recording.

Chromium issue: 1257499

Display inherited highlight pseudo-elements in the Styles pane

View the inherited highlight pseudo-elements (eg ::selection , ::spelling-error , ::grammar-error , and ::highlight ) in the Styles pane. Previously, these rules were not displayed.

As mentioned in the specification , when multiple styles conflict, cascade determines the winning style. This new feature helps you understand the inheritance and priority of the rules.

Chromium issue: 1024156

Miscellaneous highlights

These are some noteworthy fixes in this release:

• The Properties pane now displays accessor properties with value by default. It was hidden mistakenly previously. ( 1309087 )
• The Styles pane now properly shows the overridden @support rules as strikethrough. Previously, the rules weren't strikethrough. ( 1298025 )
• Fixed the CSS formatting logic in the Sources panel that caused multiple blank lines when editing CSS. ( 1309588 )
• Cap the Expand recursively option of an object in the Console to maximum 100 so it does not go on forever for circular objects. ( 1272450 )

[Experimental] Copy CSS changes

With this experiment, the Styles pane highlights your CSS changes in green. You can hover over the changed rules and click on the new copy button next to it to copy it.

Apart from that, you can copy all CSS changes across declarations by right-clicking on any rule, and selecting Copy all CSS changes .

A new Copy button is added to the Changes tab as well to help you keep track and copy your CSS changes with ease!

Chromium issue: 1268754

[Experimental] Picking color outside of browser

Enable this experiment to pick a color outside of the browser with the color picker. Previously, you could only pick a color within the browser.

In the Styles pane, click on any color preview to open the color picker. Use the eyedropper to pick color from anywhere.

Chromium issue: 1245191

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

• Submit feedback and feature requests to us at crbug.com .
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

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

A list of everything that has been covered in the What's new in DevTools series.