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

Kayce Basques

কুকিজের জন্য নতুন বৈশিষ্ট্য

কুকি কেন ব্লক করা হয়েছে তা ডিবাগ করুন

নেটওয়ার্ক অ্যাক্টিভিটি রেকর্ড করার পর, একটি নেটওয়ার্ক রিসোর্স নির্বাচন করুন এবং তারপরে আপডেট করা কুকিজ ট্যাবে নেভিগেট করুন কেন সেই রিসোর্সের অনুরোধ বা প্রতিক্রিয়া কুকিজ ব্লক করা হয়েছিল তা বুঝতে। কেন আপনি Chrome 76 এবং তার পরবর্তী সংস্করণে আরও ব্লক করা কুকি দেখতে পাচ্ছেন তা বুঝতে SameSite ছাড়া ডিফল্ট আচরণে পরিবর্তনগুলি দেখুন।

কুকিজ ট্যাব।

• হলুদ রিকোয়েস্ট কুকিজ তারের মাধ্যমে পাঠানো হয়নি। এগুলি ডিফল্টরূপে লুকানো থাকে। এগুলি দেখানোর জন্য ফিল্টার করা রিকোয়েস্ট কুকিজ দেখান ক্লিক করুন।
• হলুদ রেসপন্স কুকিজ তারের মাধ্যমে পাঠানো হয়েছিল কিন্তু সংরক্ষণ করা হয়নি।
• আরও তথ্যের উপর কার্সার রাখুন কেন একটি কুকি ব্লক করা হয়েছে তা জানতে।
• রিকোয়েস্ট কুকিজ এবং রেসপন্স কুকিজ টেবিলের বেশিরভাগ ডেটা রিসোর্সের HTTP হেডার থেকে আসে। ডোমেন , পাথ এবং এক্সপায়ার/ম্যাক্স-এজ ডেটা Chrome DevTools প্রোটোকল থেকে আসে।

ক্রোমিয়াম সমস্যা #856777 , #993843

কুকির মান দেখুন

কুকির মান দেখতে কুকিজ প্যানের একটি সারিতে ক্লিক করুন।

একটি কুকির মান দেখা।

ক্রোমিয়াম সমস্যা #৪৬২৩৭০

বিভিন্ন পছন্দ-রঙ-স্কিম এবং পছন্দ-হ্রাস-গতির পছন্দগুলি অনুকরণ করুন

prefers-color-scheme মিডিয়া কোয়েরি আপনাকে আপনার সাইটের স্টাইলকে আপনার ব্যবহারকারীর পছন্দের সাথে মেলাতে দেয়। উদাহরণস্বরূপ, যদি prefers-color-scheme: dark media কোয়েরিটি সত্য হয়, তাহলে এর অর্থ হল আপনার ব্যবহারকারী তাদের অপারেটিং সিস্টেমকে ডার্ক মোডে সেট করেছেন এবং ডার্ক মোড UI পছন্দ করেন।

কমান্ড মেনু খুলুন, Show Rendering কমান্ডটি চালান, এবং তারপর আপনার prefers-color-scheme: dark এবং prefers-color-scheme: light styles ডিবাগ করার জন্য Emulate CSS media feature prefers-color-scheme ড্রপডাউন সেট করুন।

যখন prefers-color-scheme: dark সেট করা থাকে (মাঝের বাক্সে) তখন Styles প্যানে (ডান বাক্সে) CSS দেখানো হয় যা মিডিয়া কোয়েরি সত্য হলে প্রয়োগ করা হয় এবং ভিউপোর্টে ডার্ক মোড স্টাইলগুলি দেখানো হয় (বাম বাক্সে)।

আপনি Emulate CSS media feature prefers-color-scheme ড্রপডাউনের পাশে থাকা Emulate CSS media feature prefers-reduced-motion ড্রপডাউন ব্যবহার করে prefers-reduced-motion: reduce সিমুলেট করতে পারেন।

ক্রোমিয়াম সমস্যা #১০০৪২৪৬

টাইমজোন এমুলেশন

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

কোড কভারেজ আপডেট

কভারেজ ট্যাব আপনাকে অব্যবহৃত জাভাস্ক্রিপ্ট এবং CSS খুঁজে পেতে সাহায্য করতে পারে।

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

নতুন কভারেজ টাইপ ফিল্টার টেক্সট বক্স আপনাকে কভারেজ তথ্যের ধরণ অনুসারে ফিল্টার করতে দেয়: শুধুমাত্র জাভাস্ক্রিপ্ট কভারেজ প্রদর্শন করুন, শুধুমাত্র CSS, অথবা সকল ধরণের কভারেজ প্রদর্শন করুন।

কভারেজ ট্যাব।

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

সোর্স প্যানেলে কভারেজ ডেটা। লাইন ৮ হল অব্যবহৃত কোডের একটি উদাহরণ। লাইন ১১ হল ব্যবহৃত কোডের একটি উদাহরণ।

ক্রোমিয়াম সমস্যা #১০০৩৬৭১ , #১০০৪১৮৫

কেন একটি নেটওয়ার্ক রিসোর্স অনুরোধ করা হয়েছিল তা ডিবাগ করুন

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

ইনিশিয়েটার ট্যাব।

ক্রোমিয়াম সমস্যা 963183 , 842488

কনসোল এবং সোর্স প্যানেলগুলি আবার ইন্ডেন্টেশন পছন্দগুলিকে সম্মান করে

অনেক দিন ধরে DevTools-এর কাছে আপনার ইন্ডেন্টেশন পছন্দকে 2টি স্পেস, 4টি স্পেস, 8টি স্পেস অথবা ট্যাবে কাস্টমাইজ করার জন্য একটি সেটিং রয়েছে। সম্প্রতি কনসোল এবং সোর্স প্যানেলগুলি সেটিংটি উপেক্ষা করার কারণে সেটিংটি মূলত অকেজো হয়ে পড়েছিল। এই বাগটি এখন ঠিক করা হয়েছে।

আপনার পছন্দ সেট করতে সেটিংস > পছন্দ > উৎস > ডিফল্ট ইন্ডেন্টেশনে যান।

ক্রোমিয়াম সমস্যা #৯৭৭৩৯৪

কার্সার নেভিগেশনের জন্য নতুন শর্টকাট

কনসোল অথবা সোর্স প্যানেলে Control+P টিপুন, আপনার কার্সারটিকে উপরের লাইনে নিয়ে যান। Control+N টিপুন, আপনার কার্সারটিকে নীচের লাইনে নিয়ে যান।

ক্রোমিয়াম সমস্যা #৯৮৩৮৭৪

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

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

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

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

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

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

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