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

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

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

স্থানীয়ভাবে আরও দ্রুত ওয়েব কন্টেন্ট ওভাররাইড করুন

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

ওয়েব সামগ্রী ওভাররাইড করতে, নেটওয়ার্ক প্যানেল খুলুন, একটি অনুরোধে ডান-ক্লিক করুন এবং ওভাররাইড সামগ্রী নির্বাচন করুন।

একটি অনুরোধের ড্রপ-ডাউন মেনুতে ওভাররাইড বিকল্পগুলি।

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

একটি ফোল্ডার নির্বাচন করুন এবং শীর্ষে অ্যাকশন বারে এটিতে অ্যাক্সেসের অনুমতি দিন।

ওভাররাইডগুলি সেট আপ হয়ে গেলে, DevTools তারপরে আপনাকে সোর্স > ওভাররাইড > এডিটরে নিয়ে যায় যাতে আপনি ওয়েব কন্টেন্ট ওভাররাইড করতে পারেন।

নোট করুন যে ওভাররাইড করা সংস্থানগুলি এর সাথে নির্দেশিত হয় সংরক্ষিত নেটওয়ার্ক প্যানেলে। কী ওভাররাইড করা হয়েছে তা দেখতে আইকনের উপর হোভার করুন।

নেটওয়ার্ক প্যানেলে একটি অনুরোধের পাশে একটি ওভাররাইড আইকন৷

ক্রোমিয়াম সমস্যা: 1465785 , 1470532 , 1469359

XHR এর বিষয়বস্তু ওভাররাইড করুন এবং অনুরোধ আনুন

আপনি এখন XHR-এর বিষয়বস্তু ওভাররাইড করতে পারেন এবং তাদের প্রতিক্রিয়া শিরোনাম ছাড়াও অনুরোধ আনতে পারেন। এই ধরনের ওভাররাইডের সাথে, আপনি আপনার ওয়েব পৃষ্ঠা ডিবাগ করার জন্য API প্রতিক্রিয়াগুলিকে উপহাস করতে পারেন এমনকি যদি আপনার ব্যাকএন্ড এবং API এখনও প্রস্তুত না হয়।

DevTools বর্তমানে নিম্নলিখিত ধরনের অনুরোধের জন্য কন্টেন্ট ওভাররাইড সমর্থন করে: ছবি (উদাহরণস্বরূপ, avif, png), ফন্ট, ফেচ এবং XHR, স্ক্রিপ্ট (css এবং js), এবং নথি (html)। DevTools এখন অসমর্থিত প্রকারের জন্য ওভাররাইড সামগ্রী বিকল্পটিকে ধূসর করে দিয়েছে।

ক্রোমিয়াম সমস্যা: 792101 , 1469776

Chrome এক্সটেনশন অনুরোধ লুকান

আপনি যে কোডটি লিখেছেন তার উপর ফোকাস করতে এবং আপনার Chrome এ ইনস্টল করা এক্সটেনশনগুলির দ্বারা প্রেরিত অপ্রাসঙ্গিক অনুরোধগুলি ফিল্টার করতে সহায়তা করার জন্য, নেটওয়ার্ক প্যানেল একটি নতুন ফিল্টার পায়৷

chrome-extension:// URL-এ পাঠানো সমস্ত অনুরোধ ফিল্টার করতে, চেক করুন চেকবক্স। এক্সটেনশন URL লুকান

অনুরোধ টেবিল থেকে লুকানো এক্সটেনশন URLs.

ক্রোমিয়াম সমস্যা: 1257885 , 1458803

মানব-পাঠযোগ্য HTTP স্ট্যাটাস কোড

অনুরোধের হেডারে স্ট্যাটাস কোডটি এখন HTTP স্ট্যাটাস কোডের পাশে মানব-পঠনযোগ্য পাঠ্য দেখায়, যাতে আপনি দ্রুত অনুরোধটির কী ঘটেছে তা বুঝতে পারেন।

মানব-পাঠযোগ্য HTTP স্ট্যাটাস কোড প্রদর্শনের আগে এবং পরে।

একই টেক্সট দেখতে আপনি অনুরোধ টেবিলের স্ট্যাটাস কোডের উপরেও ঘুরতে পারেন।

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

JSON সাবটাইপের জন্য প্রিটি-প্রিন্ট প্রতিক্রিয়া

একটি application/[subtype]+json MIME সাবটাইপ (উদাহরণস্বরূপ, ld+json , hal+json , এবং অন্যান্য) সহ একটি অনুরোধের প্রতিক্রিয়া ট্যাবটি এখন প্রতিক্রিয়াটিকে সঠিকভাবে পার্স করে এবং আপনাকে এটিকে সুন্দর করতে দেয়।

নেটওয়ার্ক প্রতিক্রিয়া পূর্বরূপ একটি অ্যাপ্লিকেশন/json সাবটাইপ পার্স করার আগে এবং পরে।

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

কর্মক্ষমতা: নেটওয়ার্ক ইভেন্টের জন্য অগ্রাধিকার আনার পরিবর্তনগুলি দেখুন৷

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

আনার অগ্রাধিকারে পরিবর্তনগুলি প্রদর্শনের আগে এবং পরে।

উপরন্তু, আপনি নেটওয়ার্ক প্যানেলের অগ্রাধিকার কলামে, এর সাথে একই তথ্য পেতে পারেন চেকবক্স। বড় অনুরোধ সারি সেটিং সক্রিয়.

নেটওয়ার্ক প্যানেলে অগ্রাধিকার কলাম।

ক্রোমিয়াম সমস্যা: 1463901 , 1380964

উৎস সেটিংস ডিফল্টরূপে সক্রিয়: কোড ভাঁজ এবং স্বয়ংক্রিয় ফাইল প্রকাশ

সেটিংস। সেটিংস > পছন্দ > চেকবক্স। কোড ভাঁজ করার বিকল্পটি এখন ডিফল্টরূপে সক্রিয় করা আছে। এই বিকল্পটি আপনাকে কোড ব্লকগুলি ভাঁজ করতে দেয়।

একটি কোড ব্লক ভাঁজ করতে, ব্লকের শুরুর পাশের লাইন নম্বরের উপর হোভার করুন এবং ক্লিক করুন সঙ্কুচিত। সঙ্কুচিত আইকন। ব্লকটি আবার প্রসারিত করতে {...} এ ক্লিক করুন।

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

এই সেটিংটি উত্স > পৃষ্ঠাতে ফাইল ট্রি করে তোলে যখন আপনি ট্যাবগুলি পরিবর্তন করেন তখন সম্পাদকে খোলা বর্তমান ফাইলটি নির্বাচন করুন৷

ক্রোমিয়াম সমস্যা: 1459193 , 1336599

তৃতীয় পক্ষের কুকি সমস্যার উন্নত ডিবাগিং

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

তৃতীয় পক্ষের কুকি ফেজআউটের পরে Chrome কীভাবে আচরণ করে তা আপনি ইতিমধ্যেই পরীক্ষা করতে পারেন৷ এটি করার জন্য, কমান্ড লাইন থেকে ক্রোম চালান --test-third-party-cookies-phaseout পতাকা। এই পতাকাটি কী করে তা জানতে, ডিবাগিং কুকিজ দেখুন।

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

  • আসন্ন ফেজআউট সম্পর্কে একটি ব্রেকিং পরিবর্তন সতর্কতা।
  • তৃতীয় পক্ষের কুকিজ সম্পর্কিত সমস্যা।

একটি বিদ্যমান Chrome ব্যবহারকারী হিসাবে আসন্ন ফেজআউট সম্পর্কে কুকি সতর্কতা দেখতে চাইলে, এই চেকবক্সটি চেক করতে ভুলবেন না।

এটি পরীক্ষা করতে, এই ডেমো পৃষ্ঠায় কুকি পরীক্ষা করুন।

থার্ড-পার্টি কুকি সংক্রান্ত সমস্যা সমস্যা ট্যাবে রিপোর্ট করা হয়েছে।

উপরন্তু, দ চেকবক্স। নেটওয়ার্ক প্যানেলে ব্লকড রেসপন্স কুকিজ ফিল্টার রিফ্রেস করা হয়েছে যাতে এটা স্পষ্ট হয় যে এটি শুধুমাত্র ব্লক করা রেসপন্স কুকিজ দেখায়।

চেকবক্স সক্রিয় করা হয়েছে এবং শুধুমাত্র অবরুদ্ধ প্রতিক্রিয়া কুকি সহ অনুরোধগুলি দেখায়৷

ক্রোমিয়াম সমস্যা: 1458839 , 1462693 , 1466310

অ্যাপ্লিকেশন প্যানেলে ডিবাগ প্রিলোডিং

Chrome টিম ভবিষ্যতের পৃষ্ঠাগুলির সম্পূর্ণ প্রিরেন্ডারিং ফিরিয়ে আনছে যা একজন ব্যবহারকারী নেভিগেট করতে পারে৷ আপনাকে এটি ডিবাগ করতে দেওয়ার জন্য, DevTools অ্যাপ্লিকেশন প্যানেলে প্রিলোডিং বিভাগ যোগ করে। নতুন প্রিফেচিং এবং প্রিরেন্ডারিং (একত্রে "নেভিগেশনাল প্রিলোডিং" নামে পরিচিত) লিঙ্ক-ভিত্তিক রিসোর্স ইঙ্গিতগুলির পরিবর্তে স্পেকুলেশন রুলস API ব্যবহার করে।

এই ডেমো পৃষ্ঠায় , অ্যাপ্লিকেশন > প্রিলোডিং বিভাগে, আপনি পরিদর্শন করতে পারেন:

  • স্পেকুলেশন নিয়ম যা বর্তমান পৃষ্ঠায় পাওয়া সমস্ত নিয়ম সেট তালিকাভুক্ত করে।
  • প্রিলোড যা নিয়ম সেট থেকে সমস্ত প্রিফেচ করা এবং প্রি-রেন্ডার করা ইউআরএল তালিকাভুক্ত করে।
  • এই পৃষ্ঠাটি যা বর্তমান পৃষ্ঠার পূর্ব-প্রস্তুত অবস্থা তালিকাভুক্ত করে।

আরও তথ্যের জন্য, ডিবাগিং স্পেকুলেশন নিয়মের উপর নিবেদিত পোস্ট পড়ুন।

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

নতুন রং

আপনি হয়তো ইতিমধ্যেই লক্ষ্য করেছেন যে DevTools-এর এখন একটি রিফ্রেশ চেহারা রয়েছে যা Chrome-এর সাথে আরও ভালভাবে সারিবদ্ধ। একটি অবদানকারী ফ্যাক্টর হল নতুন রঙের স্কিম।

নতুন রং লাগানোর আগে ও পরে।

এই সংস্করণটি (117) DevTools-এ আরও UX উন্নতি এনেছে, যা ইতিমধ্যেই উল্লেখ করা হয়েছে এবং আরও তালিকাভুক্ত করা হয়েছে, যার মধ্যে বেশ কয়েকটি উন্নত UI পাঠ্য রয়েছে।

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

বাতিঘর 10.4.0

Lighthouse প্যানেল এখন Lighthouse 10.4.0 চালায়। সবচেয়ে উল্লেখযোগ্যভাবে, এই সংস্করণটি নিম্নলিখিতগুলির জন্য নতুন অ্যাক্সেসিবিলিটি অডিট যোগ করে:

যেমন:

লিঙ্কের রঙে চেক করতে ব্যর্থ হয়েছে যা তাদের আলাদা করা যায় না।

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

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

DevTools-এর জন্য C/C++ WebAssembly ডিবাগিং এক্সটেনশন এখন ওপেন সোর্স

DevTools-এর জন্য C/C++ WebAssembly ডিবাগিং এক্সটেনশনটি এখন ওপেন সোর্স এবং DevTools ফ্রন্টএন্ড রিপোজিটরিতে থাকে। এই এক্সটেনশনটি WebAssembly-এ কম্পাইল করা C++ প্রোগ্রামগুলির জন্য DevTools-এ ডিবাগিং ক্ষমতা সক্ষম করে। আরও তথ্যের জন্য, ডিবাগ C/C++ WebAssembly দেখুন।

কীভাবে এক্সটেনশন তৈরি, চালাতে এবং পরীক্ষা করতে হয় তা শিখুন এবং নির্দ্বিধায় অবদান রাখুন

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

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

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

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

নতুন রেন্ডারিং এমুলেশন: prefers-reduced-transparency

আপনার ওয়েবসাইট ব্যবহারকারীরা স্বচ্ছ প্রভাব কমাতে তাদের পছন্দ নির্দেশ করতে তাদের ডিভাইসে নতুন পরীক্ষামূলক prefers-reduced-transparency CSS মিডিয়া বৈশিষ্ট্য সক্রিয় করা শুরু করতে পারে। আপনি আপনার ওয়েবসাইটের অ্যাক্সেসিবিলিটি বাড়ানোর জন্য এই অগ্রাধিকারটি বিবেচনা করতে পারেন। আপনাকে সাহায্য করার জন্য, রেন্ডারিং ড্রয়ার ট্যাবটি এখন prefers-reduced-transparency: reduce , যাতে আপনি একটি সমাধান প্রোটোটাইপ করতে পারেন এবং এই ক্ষেত্রে আপনার ওয়েবসাইট কীভাবে আচরণ করে তা পরীক্ষা করতে পারেন।

Chrome-এ এই বৈশিষ্ট্যটি পরীক্ষা করতে, chrome://flagsপরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করুন৷

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

উন্নত প্রোটোকল মনিটর

Chrome DevTools Chrome ব্রাউজারগুলিকে ইন্সট্রুমেন্ট, পরিদর্শন, ডিবাগ এবং প্রোফাইল করার জন্য Chrome DevTools প্রোটোকল (CDP) ব্যবহার করে। আপনি যদি একজন Chromium বা DevTools ডেভেলপার হন, তাহলে প্রোটোকল মনিটর আপনাকে DevTools দ্বারা করা সমস্ত CDP অনুরোধ এবং প্রতিক্রিয়া দেখতে এবং CDP কমান্ড পাঠানোর উপায় প্রদান করে।

প্রোটোকল মনিটর একটি নতুন ইন্টারফেস পায় যা আপনাকে সহজে CDP কমান্ড তৈরি এবং পাঠাতে দেয়। এখন আপনাকে ডকুমেন্টেশনে কমান্ড এবং তাদের প্যারামিটারগুলি সন্ধান করতে হবে না, DevTools আপনাকে সেগুলি সুপারিশ করবে৷

প্রোটোকল মনিটর ড্রয়ার ট্যাবের নীচের ডানদিকে, ক্লিক করুন বাম প্যানেল খোলা। CDP কমান্ড এডিটর দেখান , একটি লক্ষ্য নির্বাচন করুন, একটি কমান্ড টাইপ করা শুরু করুন, প্রস্তাবিত একটি নির্বাচন করুন, যদি প্রয়োজন হয়, প্যারামিটার মান নির্দিষ্ট করুন এবং ক্লিক করুন পাঠান। কমান্ড পাঠান ( Ctrl/Cmd + এন্টার )।

একটি CDP কমান্ড নির্দিষ্ট করা এবং পাঠানো।

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

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

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

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

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

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

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

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

,

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

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

স্থানীয়ভাবে আরও দ্রুত ওয়েব কন্টেন্ট ওভাররাইড করুন

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

ওয়েব সামগ্রী ওভাররাইড করতে, নেটওয়ার্ক প্যানেল খুলুন, একটি অনুরোধে ডান-ক্লিক করুন এবং ওভাররাইড সামগ্রী নির্বাচন করুন।

একটি অনুরোধের ড্রপ-ডাউন মেনুতে ওভাররাইড বিকল্পগুলি।

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

একটি ফোল্ডার নির্বাচন করুন এবং শীর্ষে অ্যাকশন বারে এটিতে অ্যাক্সেসের অনুমতি দিন।

ওভাররাইডগুলি সেট আপ হয়ে গেলে, DevTools তারপরে আপনাকে সোর্স > ওভাররাইড > এডিটরে নিয়ে যায় যাতে আপনি ওয়েব কন্টেন্ট ওভাররাইড করতে পারেন।

নোট করুন যে ওভাররাইড করা সংস্থানগুলি এর সাথে নির্দেশিত হয় সংরক্ষিত নেটওয়ার্ক প্যানেলে। কী ওভাররাইড করা হয়েছে তা দেখতে আইকনের উপর হোভার করুন।

নেটওয়ার্ক প্যানেলে একটি অনুরোধের পাশে একটি ওভাররাইড আইকন৷

ক্রোমিয়াম সমস্যা: 1465785 , 1470532 , 1469359

XHR এর বিষয়বস্তু ওভাররাইড করুন এবং অনুরোধ আনুন

আপনি এখন XHR-এর বিষয়বস্তু ওভাররাইড করতে পারেন এবং তাদের প্রতিক্রিয়া শিরোনাম ছাড়াও অনুরোধ আনতে পারেন। এই ধরনের ওভাররাইডের সাথে, আপনি আপনার ওয়েব পৃষ্ঠা ডিবাগ করার জন্য API প্রতিক্রিয়াগুলিকে উপহাস করতে পারেন এমনকি যদি আপনার ব্যাকএন্ড এবং API এখনও প্রস্তুত না হয়।

DevTools বর্তমানে নিম্নলিখিত ধরনের অনুরোধের জন্য কন্টেন্ট ওভাররাইড সমর্থন করে: ছবি (উদাহরণস্বরূপ, avif, png), ফন্ট, ফেচ এবং XHR, স্ক্রিপ্ট (css এবং js), এবং নথি (html)। DevTools এখন অসমর্থিত প্রকারের জন্য ওভাররাইড সামগ্রী বিকল্পটিকে ধূসর করে দিয়েছে।

ক্রোমিয়াম সমস্যা: 792101 , 1469776

Chrome এক্সটেনশন অনুরোধ লুকান

আপনি যে কোডটি লিখেছেন তার উপর ফোকাস করতে এবং আপনার Chrome এ ইনস্টল করা এক্সটেনশনগুলির দ্বারা প্রেরিত অপ্রাসঙ্গিক অনুরোধগুলি ফিল্টার করতে সহায়তা করার জন্য, নেটওয়ার্ক প্যানেল একটি নতুন ফিল্টার পায়৷

chrome-extension:// URL-এ পাঠানো সমস্ত অনুরোধ ফিল্টার করতে, চেক করুন চেকবক্স। এক্সটেনশন URL লুকান

অনুরোধ টেবিল থেকে লুকানো এক্সটেনশন URLs.

ক্রোমিয়াম সমস্যা: 1257885 , 1458803

মানব-পাঠযোগ্য HTTP স্ট্যাটাস কোড

অনুরোধের হেডারে স্ট্যাটাস কোডটি এখন HTTP স্ট্যাটাস কোডের পাশে মানব-পঠনযোগ্য পাঠ্য দেখায়, যাতে আপনি দ্রুত অনুরোধটির কী ঘটেছে তা বুঝতে পারেন।

মানব-পাঠযোগ্য HTTP স্ট্যাটাস কোড প্রদর্শনের আগে এবং পরে।

একই টেক্সট দেখতে আপনি অনুরোধ টেবিলের স্ট্যাটাস কোডের উপরেও ঘুরতে পারেন।

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

JSON সাবটাইপের জন্য প্রিটি-প্রিন্ট প্রতিক্রিয়া

একটি application/[subtype]+json MIME সাবটাইপ (উদাহরণস্বরূপ, ld+json , hal+json , এবং অন্যান্য) সহ একটি অনুরোধের প্রতিক্রিয়া ট্যাবটি এখন প্রতিক্রিয়াটিকে সঠিকভাবে পার্স করে এবং আপনাকে এটিকে সুন্দর করতে দেয়।

নেটওয়ার্ক প্রতিক্রিয়া পূর্বরূপ একটি অ্যাপ্লিকেশন/json সাবটাইপ পার্স করার আগে এবং পরে।

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

কর্মক্ষমতা: নেটওয়ার্ক ইভেন্টের জন্য অগ্রাধিকার আনার পরিবর্তনগুলি দেখুন৷

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

আনার অগ্রাধিকারে পরিবর্তনগুলি প্রদর্শনের আগে এবং পরে।

উপরন্তু, আপনি নেটওয়ার্ক প্যানেলের অগ্রাধিকার কলামে, এর সাথে একই তথ্য পেতে পারেন চেকবক্স। বড় অনুরোধ সারি সেটিং সক্রিয়.

নেটওয়ার্ক প্যানেলে অগ্রাধিকার কলাম।

ক্রোমিয়াম সমস্যা: 1463901 , 1380964

উৎস সেটিংস ডিফল্টরূপে সক্রিয়: কোড ভাঁজ এবং স্বয়ংক্রিয় ফাইল প্রকাশ

সেটিংস। সেটিংস > পছন্দ > চেকবক্স। কোড ভাঁজ করার বিকল্পটি এখন ডিফল্টরূপে সক্রিয় করা আছে। এই বিকল্পটি আপনাকে কোড ব্লকগুলি ভাঁজ করতে দেয়।

একটি কোড ব্লক ভাঁজ করতে, ব্লকের শুরুর পাশের লাইন নম্বরের উপর হোভার করুন এবং ক্লিক করুন সঙ্কুচিত। সঙ্কুচিত আইকন। ব্লকটি আবার প্রসারিত করতে {...} এ ক্লিক করুন।

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

এই সেটিংটি উত্স > পৃষ্ঠাতে ফাইল ট্রি করে তোলে যখন আপনি ট্যাবগুলি পরিবর্তন করেন তখন সম্পাদকে খোলা বর্তমান ফাইলটি নির্বাচন করুন৷

ক্রোমিয়াম সমস্যা: 1459193 , 1336599

তৃতীয় পক্ষের কুকি সমস্যার উন্নত ডিবাগিং

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

তৃতীয় পক্ষের কুকি ফেজআউটের পরে Chrome কীভাবে আচরণ করে তা আপনি ইতিমধ্যেই পরীক্ষা করতে পারেন৷ এটি করার জন্য, কমান্ড লাইন থেকে ক্রোম চালান --test-third-party-cookies-phaseout পতাকা। এই পতাকাটি কী করে তা জানতে, ডিবাগিং কুকিজ দেখুন।

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

  • আসন্ন ফেজআউট সম্পর্কে একটি ব্রেকিং পরিবর্তন সতর্কতা।
  • তৃতীয় পক্ষের কুকিজ সম্পর্কিত সমস্যা।

একটি বিদ্যমান Chrome ব্যবহারকারী হিসাবে আসন্ন ফেজআউট সম্পর্কে কুকি সতর্কতা দেখতে চাইলে, এই চেকবক্সটি চেক করতে ভুলবেন না।

এটি পরীক্ষা করতে, এই ডেমো পৃষ্ঠায় কুকি পরীক্ষা করুন।

থার্ড-পার্টি কুকি সংক্রান্ত সমস্যা সমস্যা ট্যাবে রিপোর্ট করা হয়েছে।

উপরন্তু, দ চেকবক্স। নেটওয়ার্ক প্যানেলে ব্লকড রেসপন্স কুকিজ ফিল্টার রিফ্রেস করা হয়েছে যাতে এটা স্পষ্ট হয় যে এটি শুধুমাত্র ব্লক করা রেসপন্স কুকিজ দেখায়।

চেকবক্স সক্রিয় করা হয়েছে এবং শুধুমাত্র অবরুদ্ধ প্রতিক্রিয়া কুকি সহ অনুরোধগুলি দেখায়৷

ক্রোমিয়াম সমস্যা: 1458839 , 1462693 , 1466310

অ্যাপ্লিকেশন প্যানেলে ডিবাগ প্রিলোডিং

Chrome টিম ভবিষ্যতের পৃষ্ঠাগুলির সম্পূর্ণ প্রিরেন্ডারিং ফিরিয়ে আনছে যা একজন ব্যবহারকারী নেভিগেট করতে পারে৷ আপনাকে এটি ডিবাগ করতে দেওয়ার জন্য, DevTools অ্যাপ্লিকেশন প্যানেলে প্রিলোডিং বিভাগ যোগ করে। নতুন প্রিফেচিং এবং প্রিরেন্ডারিং (একত্রে "নেভিগেশনাল প্রিলোডিং" নামে পরিচিত) লিঙ্ক-ভিত্তিক রিসোর্স ইঙ্গিতগুলির পরিবর্তে স্পেকুলেশন রুলস API ব্যবহার করে।

এই ডেমো পৃষ্ঠায় , অ্যাপ্লিকেশন > প্রিলোডিং বিভাগে, আপনি পরিদর্শন করতে পারেন:

  • স্পেকুলেশন নিয়ম যা বর্তমান পৃষ্ঠায় পাওয়া সমস্ত নিয়ম সেট তালিকাভুক্ত করে।
  • প্রিলোড যা নিয়ম সেট থেকে সমস্ত প্রিফেচ করা এবং প্রি-রেন্ডার করা ইউআরএল তালিকাভুক্ত করে।
  • এই পৃষ্ঠাটি যা বর্তমান পৃষ্ঠার পূর্ব-প্রস্তুত অবস্থা তালিকাভুক্ত করে।

আরও তথ্যের জন্য, ডিবাগিং স্পেকুলেশন নিয়মের উপর নিবেদিত পোস্ট পড়ুন।

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

নতুন রং

আপনি হয়তো ইতিমধ্যেই লক্ষ্য করেছেন যে DevTools-এর এখন একটি রিফ্রেশ চেহারা রয়েছে যা Chrome-এর সাথে আরও ভালভাবে সারিবদ্ধ। একটি অবদানকারী ফ্যাক্টর হল নতুন রঙের স্কিম।

নতুন রং লাগানোর আগে ও পরে।

এই সংস্করণটি (117) DevTools-এ আরও UX উন্নতি এনেছে, যা ইতিমধ্যেই উল্লেখ করা হয়েছে এবং আরও তালিকাভুক্ত করা হয়েছে, যার মধ্যে বেশ কয়েকটি উন্নত UI পাঠ্য রয়েছে।

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

বাতিঘর 10.4.0

Lighthouse প্যানেল এখন Lighthouse 10.4.0 চালায়। সবচেয়ে উল্লেখযোগ্যভাবে, এই সংস্করণটি নিম্নলিখিতগুলির জন্য নতুন অ্যাক্সেসিবিলিটি অডিট যোগ করে:

যেমন:

লিঙ্কের রঙে চেক করতে ব্যর্থ হয়েছে যা তাদের আলাদা করা যায় না।

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

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

DevTools-এর জন্য C/C++ WebAssembly ডিবাগিং এক্সটেনশন এখন ওপেন সোর্স

DevTools-এর জন্য C/C++ WebAssembly ডিবাগিং এক্সটেনশনটি এখন ওপেন সোর্স এবং DevTools ফ্রন্টএন্ড রিপোজিটরিতে থাকে। এই এক্সটেনশনটি WebAssembly-এ কম্পাইল করা C++ প্রোগ্রামগুলির জন্য DevTools-এ ডিবাগিং ক্ষমতা সক্ষম করে। আরও তথ্যের জন্য, ডিবাগ C/C++ WebAssembly দেখুন।

কীভাবে এক্সটেনশন তৈরি, চালাতে এবং পরীক্ষা করতে হয় তা শিখুন এবং নির্দ্বিধায় অবদান রাখুন

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

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

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

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

নতুন রেন্ডারিং এমুলেশন: prefers-reduced-transparency

আপনার ওয়েবসাইট ব্যবহারকারীরা স্বচ্ছ প্রভাব কমাতে তাদের পছন্দ নির্দেশ করতে তাদের ডিভাইসে নতুন পরীক্ষামূলক prefers-reduced-transparency CSS মিডিয়া বৈশিষ্ট্য সক্রিয় করা শুরু করতে পারে। আপনি আপনার ওয়েবসাইটের অ্যাক্সেসিবিলিটি বাড়ানোর জন্য এই অগ্রাধিকারটি বিবেচনা করতে পারেন। আপনাকে সাহায্য করার জন্য, রেন্ডারিং ড্রয়ার ট্যাবটি এখন prefers-reduced-transparency: reduce , যাতে আপনি একটি সমাধান প্রোটোটাইপ করতে পারেন এবং এই ক্ষেত্রে আপনার ওয়েবসাইট কীভাবে আচরণ করে তা পরীক্ষা করতে পারেন।

Chrome-এ এই বৈশিষ্ট্যটি পরীক্ষা করতে, chrome://flagsপরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করুন৷

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

উন্নত প্রোটোকল মনিটর

Chrome DevTools Chrome ব্রাউজারগুলিকে ইন্সট্রুমেন্ট, পরিদর্শন, ডিবাগ এবং প্রোফাইল করার জন্য Chrome DevTools প্রোটোকল (CDP) ব্যবহার করে। আপনি যদি একজন Chromium বা DevTools ডেভেলপার হন, তাহলে প্রোটোকল মনিটর আপনাকে DevTools দ্বারা করা সমস্ত CDP অনুরোধ এবং প্রতিক্রিয়া দেখতে এবং CDP কমান্ড পাঠানোর উপায় প্রদান করে।

প্রোটোকল মনিটর একটি নতুন ইন্টারফেস পায় যা আপনাকে সহজে CDP কমান্ড তৈরি এবং পাঠাতে দেয়। এখন আপনাকে ডকুমেন্টেশনে কমান্ড এবং তাদের প্যারামিটারগুলি সন্ধান করতে হবে না, DevTools আপনাকে সেগুলি সুপারিশ করবে৷

প্রোটোকল মনিটর ড্রয়ার ট্যাবের নীচের ডানদিকে, ক্লিক করুন বাম প্যানেল খোলা। CDP কমান্ড এডিটর দেখান , একটি লক্ষ্য নির্বাচন করুন, একটি কমান্ড টাইপ করা শুরু করুন, প্রস্তাবিত একটি নির্বাচন করুন, যদি প্রয়োজন হয়, প্যারামিটার মান নির্দিষ্ট করুন এবং ক্লিক করুন পাঠান। কমান্ড পাঠান ( Ctrl/Cmd + এন্টার )।

একটি CDP কমান্ড নির্দিষ্ট করা এবং পাঠানো।

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

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

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

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

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

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

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

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

,

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

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

স্থানীয়ভাবে আরও দ্রুত ওয়েব কন্টেন্ট ওভাররাইড করুন

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

ওয়েব সামগ্রী ওভাররাইড করতে, নেটওয়ার্ক প্যানেল খুলুন, একটি অনুরোধে ডান-ক্লিক করুন এবং ওভাররাইড সামগ্রী নির্বাচন করুন।

একটি অনুরোধের ড্রপ-ডাউন মেনুতে ওভাররাইড বিকল্পগুলি।

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

একটি ফোল্ডার নির্বাচন করুন এবং শীর্ষে অ্যাকশন বারে এটিতে অ্যাক্সেসের অনুমতি দিন।

ওভাররাইডগুলি সেট আপ হয়ে গেলে, DevTools তারপরে আপনাকে সোর্স > ওভাররাইড > এডিটরে নিয়ে যায় যাতে আপনি ওয়েব কন্টেন্ট ওভাররাইড করতে পারেন।

নোট করুন যে ওভাররাইড করা সংস্থানগুলি এর সাথে নির্দেশিত হয় সংরক্ষিত নেটওয়ার্ক প্যানেলে। কী ওভাররাইড করা হয়েছে তা দেখতে আইকনের উপর হোভার করুন।

নেটওয়ার্ক প্যানেলে একটি অনুরোধের পাশে একটি ওভাররাইড আইকন৷

ক্রোমিয়াম সমস্যা: 1465785 , 1470532 , 1469359

XHR এর বিষয়বস্তু ওভাররাইড করুন এবং অনুরোধ আনুন

আপনি এখন XHR-এর বিষয়বস্তু ওভাররাইড করতে পারেন এবং তাদের প্রতিক্রিয়া শিরোনাম ছাড়াও অনুরোধ আনতে পারেন। এই ধরনের ওভাররাইডের সাথে, আপনি আপনার ওয়েব পৃষ্ঠা ডিবাগ করার জন্য API প্রতিক্রিয়াগুলিকে উপহাস করতে পারেন এমনকি যদি আপনার ব্যাকএন্ড এবং API এখনও প্রস্তুত না হয়।

DevTools বর্তমানে নিম্নলিখিত ধরনের অনুরোধের জন্য কন্টেন্ট ওভাররাইড সমর্থন করে: ছবি (উদাহরণস্বরূপ, avif, png), ফন্ট, ফেচ এবং XHR, স্ক্রিপ্ট (css এবং js), এবং নথি (html)। DevTools এখন অসমর্থিত প্রকারের জন্য ওভাররাইড সামগ্রী বিকল্পটিকে ধূসর করে দিয়েছে।

ক্রোমিয়াম সমস্যা: 792101 , 1469776

Chrome এক্সটেনশন অনুরোধ লুকান

আপনি যে কোডটি লিখেছেন তার উপর ফোকাস করতে এবং আপনার Chrome এ ইনস্টল করা এক্সটেনশনগুলির দ্বারা প্রেরিত অপ্রাসঙ্গিক অনুরোধগুলি ফিল্টার করতে সহায়তা করার জন্য, নেটওয়ার্ক প্যানেল একটি নতুন ফিল্টার পায়৷

chrome-extension:// URL-এ পাঠানো সমস্ত অনুরোধ ফিল্টার করতে, চেক করুন চেকবক্স। এক্সটেনশন URL লুকান

অনুরোধ টেবিল থেকে লুকানো এক্সটেনশন URLs.

ক্রোমিয়াম সমস্যা: 1257885 , 1458803

মানব-পাঠযোগ্য HTTP স্ট্যাটাস কোড

অনুরোধের হেডারে স্ট্যাটাস কোডটি এখন HTTP স্ট্যাটাস কোডের পাশে মানব-পঠনযোগ্য পাঠ্য দেখায়, যাতে আপনি দ্রুত অনুরোধটির কী ঘটেছে তা বুঝতে পারেন।

মানব-পাঠযোগ্য HTTP স্ট্যাটাস কোড প্রদর্শনের আগে এবং পরে।

একই টেক্সট দেখতে আপনি অনুরোধ টেবিলের স্ট্যাটাস কোডের উপরেও ঘুরতে পারেন।

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

JSON সাবটাইপের জন্য প্রিটি-প্রিন্ট প্রতিক্রিয়া

একটি application/[subtype]+json MIME সাবটাইপ (উদাহরণস্বরূপ, ld+json , hal+json , এবং অন্যান্য) সহ একটি অনুরোধের প্রতিক্রিয়া ট্যাবটি এখন প্রতিক্রিয়াটিকে সঠিকভাবে পার্স করে এবং আপনাকে এটিকে সুন্দর করতে দেয়।

নেটওয়ার্ক প্রতিক্রিয়া পূর্বরূপ একটি অ্যাপ্লিকেশন/json সাবটাইপ পার্স করার আগে এবং পরে।

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

কর্মক্ষমতা: নেটওয়ার্ক ইভেন্টের জন্য অগ্রাধিকার আনার পরিবর্তনগুলি দেখুন৷

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

আনার অগ্রাধিকারে পরিবর্তনগুলি প্রদর্শনের আগে এবং পরে।

উপরন্তু, আপনি নেটওয়ার্ক প্যানেলের অগ্রাধিকার কলামে, এর সাথে একই তথ্য পেতে পারেন চেকবক্স। বড় অনুরোধ সারি সেটিং সক্রিয়.

নেটওয়ার্ক প্যানেলে অগ্রাধিকার কলাম।

ক্রোমিয়াম সমস্যা: 1463901 , 1380964

উৎস সেটিংস ডিফল্টরূপে সক্রিয়: কোড ভাঁজ এবং স্বয়ংক্রিয় ফাইল প্রকাশ

সেটিংস। সেটিংস > পছন্দ > চেকবক্স। কোড ভাঁজ করার বিকল্পটি এখন ডিফল্টরূপে সক্রিয় করা আছে। এই বিকল্পটি আপনাকে কোড ব্লকগুলি ভাঁজ করতে দেয়।

একটি কোড ব্লক ভাঁজ করতে, ব্লকের শুরুর পাশের লাইন নম্বরের উপর হোভার করুন এবং ক্লিক করুন সঙ্কুচিত। সঙ্কুচিত আইকন। ব্লকটি আবার প্রসারিত করতে {...} এ ক্লিক করুন।

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

এই সেটিংটি উত্স > পৃষ্ঠাতে ফাইল ট্রি করে তোলে যখন আপনি ট্যাবগুলি পরিবর্তন করেন তখন সম্পাদকে খোলা বর্তমান ফাইলটি নির্বাচন করুন৷

ক্রোমিয়াম সমস্যা: 1459193 , 1336599

তৃতীয় পক্ষের কুকি সমস্যার উন্নত ডিবাগিং

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

তৃতীয় পক্ষের কুকি ফেজআউটের পরে Chrome কীভাবে আচরণ করে তা আপনি ইতিমধ্যেই পরীক্ষা করতে পারেন৷ এটি করার জন্য, কমান্ড লাইন থেকে ক্রোম চালান --test-third-party-cookies-phaseout পতাকা। এই পতাকাটি কী করে তা জানতে, ডিবাগিং কুকিজ দেখুন।

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

  • আসন্ন ফেজআউট সম্পর্কে একটি ব্রেকিং পরিবর্তন সতর্কতা।
  • তৃতীয় পক্ষের কুকিজ সম্পর্কিত সমস্যা।

একটি বিদ্যমান Chrome ব্যবহারকারী হিসাবে আসন্ন ফেজআউট সম্পর্কে কুকি সতর্কতা দেখতে চাইলে, এই চেকবক্সটি চেক করতে ভুলবেন না।

এটি পরীক্ষা করতে, এই ডেমো পৃষ্ঠায় কুকি পরীক্ষা করুন।

থার্ড-পার্টি কুকি সংক্রান্ত সমস্যা সমস্যা ট্যাবে রিপোর্ট করা হয়েছে।

উপরন্তু, দ চেকবক্স। নেটওয়ার্ক প্যানেলে ব্লকড রেসপন্স কুকিজ ফিল্টার রিফ্রেস করা হয়েছে যাতে এটা স্পষ্ট হয় যে এটি শুধুমাত্র ব্লক করা রেসপন্স কুকিজ দেখায়।

চেকবক্স সক্রিয় করা হয়েছে এবং শুধুমাত্র অবরুদ্ধ প্রতিক্রিয়া কুকি সহ অনুরোধগুলি দেখায়৷

ক্রোমিয়াম সমস্যা: 1458839 , 1462693 , 1466310

অ্যাপ্লিকেশন প্যানেলে ডিবাগ প্রিলোডিং

Chrome টিম ভবিষ্যতের পৃষ্ঠাগুলির সম্পূর্ণ প্রিরেন্ডারিং ফিরিয়ে আনছে যা একজন ব্যবহারকারী নেভিগেট করতে পারে৷ আপনাকে এটি ডিবাগ করতে দেওয়ার জন্য, DevTools অ্যাপ্লিকেশন প্যানেলে প্রিলোডিং বিভাগ যোগ করে। নতুন প্রিফেচিং এবং প্রিরেন্ডারিং (একত্রে "নেভিগেশনাল প্রিলোডিং" নামে পরিচিত) লিঙ্ক-ভিত্তিক রিসোর্স ইঙ্গিতগুলির পরিবর্তে স্পেকুলেশন রুলস API ব্যবহার করে।

এই ডেমো পৃষ্ঠায় , অ্যাপ্লিকেশন > প্রিলোডিং বিভাগে, আপনি পরিদর্শন করতে পারেন:

  • স্পেকুলেশন নিয়ম যা বর্তমান পৃষ্ঠায় পাওয়া সমস্ত নিয়ম সেট তালিকাভুক্ত করে।
  • প্রিলোড যা নিয়ম সেট থেকে সমস্ত প্রিফেচ করা এবং প্রি-রেন্ডার করা ইউআরএল তালিকাভুক্ত করে।
  • এই পৃষ্ঠাটি যা বর্তমান পৃষ্ঠার পূর্ব-প্রস্তুত অবস্থা তালিকাভুক্ত করে।

আরও তথ্যের জন্য, ডিবাগিং স্পেকুলেশন নিয়মের উপর নিবেদিত পোস্ট পড়ুন।

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

নতুন রং

আপনি হয়তো ইতিমধ্যেই লক্ষ্য করেছেন যে DevTools-এর এখন একটি রিফ্রেশ চেহারা রয়েছে যা Chrome-এর সাথে আরও ভালভাবে সারিবদ্ধ। একটি অবদানকারী ফ্যাক্টর হল নতুন রঙের স্কিম।

নতুন রং লাগানোর আগে ও পরে।

এই সংস্করণটি (117) DevTools-এ আরও UX উন্নতি এনেছে, যা ইতিমধ্যেই উল্লেখ করা হয়েছে এবং আরও তালিকাভুক্ত করা হয়েছে, যার মধ্যে বেশ কয়েকটি উন্নত UI পাঠ্য রয়েছে।

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

বাতিঘর 10.4.0

Lighthouse প্যানেল এখন Lighthouse 10.4.0 চালায়। সবচেয়ে উল্লেখযোগ্যভাবে, এই সংস্করণটি নিম্নলিখিতগুলির জন্য নতুন অ্যাক্সেসিবিলিটি অডিট যোগ করে:

যেমন:

লিঙ্কের রঙে চেক করতে ব্যর্থ হয়েছে যা তাদের আলাদা করা যায় না।

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

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

DevTools-এর জন্য C/C++ WebAssembly ডিবাগিং এক্সটেনশন এখন ওপেন সোর্স

DevTools-এর জন্য C/C++ WebAssembly ডিবাগিং এক্সটেনশনটি এখন ওপেন সোর্স এবং DevTools ফ্রন্টএন্ড রিপোজিটরিতে থাকে। এই এক্সটেনশনটি WebAssembly-এ কম্পাইল করা C++ প্রোগ্রামগুলির জন্য DevTools-এ ডিবাগিং ক্ষমতা সক্ষম করে। আরও তথ্যের জন্য, ডিবাগ C/C++ WebAssembly দেখুন।

কীভাবে এক্সটেনশন তৈরি, চালাতে এবং পরীক্ষা করতে হয় তা শিখুন এবং নির্দ্বিধায় অবদান রাখুন

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

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

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

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

নতুন রেন্ডারিং এমুলেশন: prefers-reduced-transparency

আপনার ওয়েবসাইট ব্যবহারকারীরা স্বচ্ছ প্রভাব কমাতে তাদের পছন্দ নির্দেশ করতে তাদের ডিভাইসে নতুন পরীক্ষামূলক prefers-reduced-transparency CSS মিডিয়া বৈশিষ্ট্য সক্রিয় করা শুরু করতে পারে। আপনি আপনার ওয়েবসাইটের অ্যাক্সেসিবিলিটি বাড়ানোর জন্য এই অগ্রাধিকারটি বিবেচনা করতে পারেন। আপনাকে সাহায্য করার জন্য, রেন্ডারিং ড্রয়ার ট্যাবটি এখন prefers-reduced-transparency: reduce , যাতে আপনি একটি সমাধান প্রোটোটাইপ করতে পারেন এবং এই ক্ষেত্রে আপনার ওয়েবসাইট কীভাবে আচরণ করে তা পরীক্ষা করতে পারেন।

Chrome-এ এই বৈশিষ্ট্যটি পরীক্ষা করতে, chrome://flagsপরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করুন৷

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

উন্নত প্রোটোকল মনিটর

Chrome DevTools Chrome ব্রাউজারগুলিকে ইন্সট্রুমেন্ট, পরিদর্শন, ডিবাগ এবং প্রোফাইল করার জন্য Chrome DevTools প্রোটোকল (CDP) ব্যবহার করে। আপনি যদি একজন Chromium বা DevTools ডেভেলপার হন, তাহলে প্রোটোকল মনিটর আপনাকে DevTools দ্বারা করা সমস্ত CDP অনুরোধ এবং প্রতিক্রিয়া দেখতে এবং CDP কমান্ড পাঠানোর উপায় প্রদান করে।

প্রোটোকল মনিটর একটি নতুন ইন্টারফেস পায় যা আপনাকে সহজে CDP কমান্ড তৈরি এবং পাঠাতে দেয়। এখন আপনাকে ডকুমেন্টেশনে কমান্ড এবং তাদের প্যারামিটারগুলি সন্ধান করতে হবে না, DevTools আপনাকে সেগুলি সুপারিশ করবে৷

প্রোটোকল মনিটর ড্রয়ার ট্যাবের নীচের ডানদিকে, ক্লিক করুন বাম প্যানেল খোলা। CDP কমান্ড এডিটর দেখান , একটি লক্ষ্য নির্বাচন করুন, একটি কমান্ড টাইপ করা শুরু করুন, প্রস্তাবিত একটি নির্বাচন করুন, যদি প্রয়োজন হয়, প্যারামিটার মান নির্দিষ্ট করুন এবং ক্লিক করুন পাঠান। কমান্ড পাঠান ( Ctrl/Cmd + এন্টার )।

একটি CDP কমান্ড নির্দিষ্ট করা এবং পাঠানো।

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

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

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

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

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

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

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

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

,

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

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

স্থানীয়ভাবে আরও দ্রুত ওয়েব কন্টেন্ট ওভাররাইড করুন

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

ওয়েব সামগ্রী ওভাররাইড করতে, নেটওয়ার্ক প্যানেল খুলুন, একটি অনুরোধে ডান-ক্লিক করুন এবং ওভাররাইড সামগ্রী নির্বাচন করুন।

একটি অনুরোধের ড্রপ-ডাউন মেনুতে ওভাররাইড বিকল্পগুলি।

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

একটি ফোল্ডার নির্বাচন করুন এবং শীর্ষে অ্যাকশন বারে এটিতে অ্যাক্সেসের অনুমতি দিন।

ওভাররাইডগুলি সেট আপ হয়ে গেলে, DevTools তারপরে আপনাকে সোর্স > ওভাররাইড > এডিটরে নিয়ে যায় যাতে আপনি ওয়েব কন্টেন্ট ওভাররাইড করতে পারেন।

নোট করুন যে ওভাররাইড করা সংস্থানগুলি এর সাথে নির্দেশিত হয় সংরক্ষিত নেটওয়ার্ক প্যানেলে। কী ওভাররাইড করা হয়েছে তা দেখতে আইকনের উপর হোভার করুন।

নেটওয়ার্ক প্যানেলে একটি অনুরোধের পাশে একটি ওভাররাইড আইকন৷

ক্রোমিয়াম সমস্যা: 1465785 , 1470532 , 1469359

XHR এর বিষয়বস্তু ওভাররাইড করুন এবং অনুরোধ আনুন

আপনি এখন XHR-এর বিষয়বস্তু ওভাররাইড করতে পারেন এবং তাদের প্রতিক্রিয়া শিরোনাম ছাড়াও অনুরোধ আনতে পারেন। এই ধরনের ওভাররাইডের সাথে, আপনি আপনার ওয়েব পৃষ্ঠা ডিবাগ করার জন্য API প্রতিক্রিয়াগুলিকে উপহাস করতে পারেন এমনকি যদি আপনার ব্যাকএন্ড এবং API এখনও প্রস্তুত না হয়।

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

ক্রোমিয়াম ইস্যু: 792101 , 1469776

Chrome এক্সটেনশন অনুরোধ লুকান

আপনার লেখক কোডটিতে ফোকাস করতে এবং ক্রোমে আপনি ইনস্টল করা এক্সটেনশানগুলি দ্বারা প্রেরিত অপ্রাসঙ্গিক অনুরোধগুলি ফিল্টার করতে আপনাকে সহায়তা করতে, নেটওয়ার্ক প্যানেল একটি নতুন ফিল্টার পেয়েছে।

chrome-extension:// urls, চেক করুন চেকবক্স। এক্সটেনশন ইউআরএলগুলি লুকান

অনুরোধ টেবিল থেকে লুকানো এক্সটেনশন ইউআরএল।

ক্রোমিয়াম ইস্যু: 1257885 , 1458803

মানব-পাঠযোগ্য HTTP স্ট্যাটাস কোড

অনুরোধের শিরোনামে স্থিতি কোডটি এখন HTTP স্ট্যাটাস কোডগুলির পাশে মানব-পঠনযোগ্য পাঠ্য দেখায়, যাতে আপনি অনুরোধটির দ্রুত কী ঘটেছিল তা বুঝতে পারেন।

মানব-পঠনযোগ্য এইচটিটিপি স্থিতি কোডগুলি প্রদর্শন করার আগে এবং পরে।

একই পাঠ্যটি দেখতে আপনি অনুরোধ সারণীতে স্থিতি কোডের উপরেও ঘুরে বেড়াতে পারেন।

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

JSON সাবটাইপের জন্য প্রিটি-প্রিন্ট প্রতিক্রিয়া

একটি application/[subtype]+json মাইম সাব টাইপ (উদাহরণস্বরূপ, ld+json , hal+json এবং অন্যান্য) সহ একটি অনুরোধের জন্য প্রতিক্রিয়া ট্যাবটি এখন প্রতিক্রিয়াটিকে সঠিকভাবে পার্স করে এবং আপনাকে এটি সুন্দর করতে দেয়।

নেটওয়ার্ক প্রতিক্রিয়া পূর্বরূপে কোনও অ্যাপ্লিকেশন/জেএসএন সাব টাইপ পার্স করার আগে এবং পরে।

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

কর্মক্ষমতা: নেটওয়ার্ক ইভেন্টের জন্য অগ্রাধিকার আনার পরিবর্তনগুলি দেখুন৷

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

আনার অগ্রাধিকারে পরিবর্তনগুলি প্রদর্শন করার আগে এবং পরে।

অতিরিক্তভাবে, আপনি নেটওয়ার্ক প্যানেলের অগ্রাধিকার কলামে একই তথ্য খুঁজে পেতে পারেন চেকবক্স। বড় অনুরোধ সারি সেটিং সক্ষম।

নেটওয়ার্ক প্যানেলে অগ্রাধিকার কলাম।

ক্রোমিয়াম ইস্যু: 1463901 , 1380964

উৎস সেটিংস ডিফল্টরূপে সক্রিয়: কোড ভাঁজ এবং স্বয়ংক্রিয় ফাইল প্রকাশ

সেটিংস। সেটিংস > পছন্দসমূহ > চেকবক্স। কোড ফোল্ডিং বিকল্পটি এখন ডিফল্টরূপে সক্ষম করা হয়েছে। এই বিকল্পটি আপনাকে কোড ব্লকগুলি ভাঁজ করতে দেয়।

একটি কোড ব্লক ভাঁজ করতে, ব্লকের শুরুর পাশের লাইন নম্বরটির উপরে ঘুরুন এবং ক্লিক করুন সঙ্কুচিত। ভেঙে আইকন। আবার ব্লকটি প্রসারিত করতে {...} ক্লিক করুন।

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

এই সেটিংটি উত্সগুলিতে ফাইল ট্রি তৈরি করে> পৃষ্ঠায় আপনি ট্যাবগুলি স্যুইচ করার সময় সম্পাদকের বর্তমান ফাইলটি নির্বাচন করুন।

ক্রোমিয়াম ইস্যু: 1459193 , 1336599

তৃতীয় পক্ষের কুকি সমস্যার উন্নত ডিবাগিং

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

তৃতীয় পক্ষের কুকি ফেজআউটের পরে ক্রোম কীভাবে আচরণ করে তা আপনি ইতিমধ্যে পরীক্ষা করতে পারেন। এটি করতে, --test-third-party-cookies-phaseout পতাকা সহ কমান্ড লাইন থেকে ক্রোম চালান। এই পতাকাটি কী করে তা জানতে, ডিবাগিং কুকিজ দেখুন।

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

  • একটি ব্রেকিং পরিবর্তন আসন্ন ফেজআউট সম্পর্কে সতর্কতা।
  • তৃতীয় পক্ষের কুকিজ সম্পর্কিত বিষয়গুলি।

যদি বিদ্যমান ক্রোম ব্যবহারকারী হিসাবে আসন্ন ফেজআউট সম্পর্কে কুকি সতর্কতাগুলি দেখতে চান তবে এই চেকবক্সটি পরীক্ষা করে দেখুন।

এটি পরীক্ষা করতে, এই ডেমো পৃষ্ঠায় কুকিজগুলি পরিদর্শন করুন।

তৃতীয় পক্ষের কুকি ইস্যুগুলি ইস্যু ট্যাবে রিপোর্ট করা হয়েছে।

উপরন্তু, দ চেকবক্স। নেটওয়ার্ক প্যানেলে অবরুদ্ধ রেসপন্স কুকিজ ফিল্টারটি পরিষ্কার করার জন্য পুনরায় রিপ্রেস করা হয়েছে যে এটি কেবল অবরুদ্ধ প্রতিক্রিয়া কুকিজ দেখায়।

চেকবক্সটি সক্ষম করা হয়েছে এবং কেবল অবরুদ্ধ প্রতিক্রিয়া কুকিজ সহ অনুরোধগুলি দেখায়।

ক্রোমিয়াম ইস্যু: 1458839 , 1462693 , 1466310

অ্যাপ্লিকেশন প্যানেলে ডিবাগ প্রিলোডিং

ক্রোম টিম ভবিষ্যতের পৃষ্ঠাগুলির সম্পূর্ণ প্রেরেন্ডারিং ফিরিয়ে আনছে যা কোনও ব্যবহারকারী সম্ভবত নেভিগেট করতে পারে। আপনাকে এটি ডিবাগ করতে, ডিভটুলস অ্যাপ্লিকেশন প্যানেলে প্রিলোডিং বিভাগটি যুক্ত করে। নতুন প্রিফেচিং এবং প্রেরেন্ডারিং (সম্মিলিতভাবে "নেভিগেশনাল প্রিলোডিং" নামে পরিচিত) লিঙ্ক-ভিত্তিক সংস্থানগুলির ইঙ্গিতগুলির পরিবর্তে অনুমানের নিয়মগুলি এপিআই ব্যবহার করে।

এই ডেমো পৃষ্ঠায় , অ্যাপ্লিকেশন > প্রিলোডিং বিভাগে, আপনি পরিদর্শন করতে পারেন:

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

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

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

নতুন রং

আপনি ইতিমধ্যে খেয়াল করেছেন যে ডিভটুলসের এখন একটি সতেজ চেহারা রয়েছে যা ক্রোমের সাথে আরও ভাল প্রান্তিক করে। একটি অবদানকারী ফ্যাক্টর হ'ল নতুন রঙের স্কিম।

নতুন রঙ প্রয়োগ করার আগে এবং পরে।

এই সংস্করণটি (117) ডিভটুলগুলিতে আরও ইউএক্স উন্নতি নিয়ে আসে, উভয়ই ইতিমধ্যে উল্লিখিত এবং আরও কিছু উন্নত ইউআই পাঠ্য সহ তালিকাভুক্ত হয়েছে।

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

বাতিঘর 10.4.0

বাতিঘর প্যানেলটি এখন বাতিঘর 10.4.0 চালায়। সবচেয়ে উল্লেখযোগ্যভাবে, এই সংস্করণটি নিম্নলিখিতগুলির জন্য নতুন অ্যাক্সেসিবিলিটি অডিট যুক্ত করেছে:

যেমন:

লিঙ্কগুলির রঙে ব্যর্থ চেক যা তাদেরকে পৃথক পৃথক করে তোলে।

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

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

DevTools-এর জন্য C/C++ WebAssembly ডিবাগিং এক্সটেনশন এখন ওপেন সোর্স

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

কীভাবে তৈরি, চালানো এবং এক্সটেনশনটি পরীক্ষা করতে হয় তা শিখুন এবং অবদান নির্দ্বিধায়।

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

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

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

  • সিএসএস নেস্টিং : এলিমেন্টস প্যানেলটি এখন নেস্টেড শিশুদের জন্য পুরো নির্বাচনকারী চেইন দেখায় ( 1172985 )।
  • অ্যাপ্লিকেশন > ম্যানিফেস্টে এখন একটি উইন্ডো নিয়ন্ত্রণ ওভারলে বিভাগ রয়েছে যা কোনও display_override মান ম্যানিফেস্টে উপস্থিত রয়েছে কিনা তা পরীক্ষা করে এবং প্রাসঙ্গিক ডকুমেন্টেশনের লিঙ্ক সরবরাহ করে কিনা তা পরীক্ষা করে।
  • উত্স > পৃষ্ঠা গাছ এখন নিম্নলিখিতগুলি করে তবে ( 1442863 ) এর মধ্যে সীমাবদ্ধ নয়:
    • ফোল্ডারগুলি গ্রেড আউট করলে তাদের সমস্ত সামগ্রী-তালিকাভুক্ত করা হয়।
    • কমলা রঙের ফোল্ডারগুলি যদি তাদের সমস্ত সামগ্রী উত্স মানচিত্র থেকে থাকে।
  • পারফরম্যান্স : আপনি রেকর্ডিং ( 1455498 ) শুরু করার সময় এখন স্বয়ংক্রিয়ভাবে লুকিয়ে থাকা সেটিংস ক্যাপচার সেটিংস
  • উত্স > সম্পাদক সিটিআরএল + অ্যারো আচরণ (ডাব্লুআইএন) এবং অপ্ট + অ্যারো (ম্যাকোস) ( 1468208 ) পুনরুদ্ধার করেছেন।
  • অ্যানিমেশনস > সমস্ত টগল বিরতি দেয় এখন তার রাজ্যটিকে পৃষ্ঠা লোড জুড়ে রাখে ( 1446046 )।
  • অ্যাপ্লিকেশন > স্টোরেজ > ক্যাশে স্টোরেজ অ্যাপ্লিকেশন > স্টোরেজ > ক্যাশে বিভাগে ( 1462622 ) স্থানান্তরিত হয়েছে।
  • কিছু ইউআই পাঠ্য এবং সরঞ্জামদণ্ডগুলি উন্নত করা হয়েছে: হার্ডওয়্যার কনচারেন্সি টুলটিপ , নেটওয়ার্ক ফিল্টার পাঠ্য এবং একটি প্রধান মেনু বিকল্প , অ্যাপ্লিকেশন ট্রি ভিউতে মূলধন, নেটওয়ার্ক> শিরোনাম পাঠ্য , উত্স> ওভাররাইড এবং ফাইল সিস্টেম পাঠ্য

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

নতুন রেন্ডারিং এমুলেশন: prefers-reduced-transparency

আপনার ওয়েবসাইট ব্যবহারকারীরা স্বচ্ছ প্রভাবগুলি হ্রাস করার জন্য তাদের পছন্দকে নির্দেশ করতে নতুন পরীক্ষামূলক prefers-reduced-transparency সিএসএস মিডিয়া বৈশিষ্ট্য সক্ষম করা শুরু করতে পারেন। আপনার ওয়েবসাইটের অ্যাক্সেসযোগ্যতা বাড়াতে আপনি এই পছন্দটিকে অ্যাকাউন্টে গ্রহণ করার বিষয়টি বিবেচনা করতে পারেন। আপনাকে সহায়তা করার জন্য, রেন্ডারিং ড্রয়ার ট্যাবটি এখন prefers-reduced-transparency: reduce , যাতে আপনি একটি সমাধান প্রোটোটাইপ করতে পারেন এবং আপনার ওয়েবসাইটটি এই ক্ষেত্রে কীভাবে আচরণ করে তা পরীক্ষা করতে পারেন।

ক্রোমে এই বৈশিষ্ট্যটি পরীক্ষা করতে, chrome://flags পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করুন।

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

বর্ধিত প্রোটোকল মনিটর

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

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

প্রোটোকল মনিটর ড্রয়ার ট্যাবের নীচের ডান কোণে ক্লিক করুন বাম প্যানেল খোলা। সিডিপি কমান্ড সম্পাদক দেখান , একটি লক্ষ্য নির্বাচন করুন, একটি কমান্ড টাইপ করা শুরু করুন, প্রস্তাবিতগুলির মধ্যে একটি নির্বাচন করুন, প্রয়োজনে, প্যারামিটারের মানগুলি নির্দিষ্ট করুন এবং ক্লিক করুন পাঠান। কমান্ড প্রেরণ করুন ( সিটিআরএল/সেমিডি + এন্টার )।

একটি সিডিপি কমান্ড নির্দিষ্ট করা এবং প্রেরণ।

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

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

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

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

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

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

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

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