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

Kayce Basques

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

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

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

কুকিজ ট্যাব।

কুকিজ ট্যাব।

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

Chromium সমস্যা #856777 , #993843

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

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

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

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

Chromium সমস্যা #462370

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

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

কমান্ড মেনু খুলুন, শো রেন্ডারিং কমান্ড চালান, এবং তারপরে আপনার prefers-color-scheme: dark এবং prefers-color-scheme: light শৈলীগুলি ডিবাগ করতে এমুলেট CSS মিডিয়া বৈশিষ্ট্য prefers-color-scheme ড্রপডাউন সেট করুন।

prefers-color-scheme: অন্ধকার

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

এছাড়াও আপনি prefers-reduced-motion: reduce এমুলেট সিএসএস মিডিয়া ফিচার prefers-reduced-motion ড্রপডাউন ব্যবহার করে কম করুন সিএসএস মিডিয়া ফিচার prefers-color-scheme ড্রপডাউনের পাশে।

ক্রোমিয়াম সমস্যা #1004246

টাইমজোন অনুকরণ

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

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

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

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

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

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

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

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

উৎস প্যানেলে কভারেজ ডেটা।

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

Chromium সমস্যা #1003671 , #1004185

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

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

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

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

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

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

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

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

ক্রোমিয়াম সমস্যা #977394

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

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

ক্রোমিয়াম সমস্যা #983874

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

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

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

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

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

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

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

,

Kayce Basques

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

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

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

কুকিজ ট্যাব।

কুকিজ ট্যাব।

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

Chromium সমস্যা #856777 , #993843

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

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

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

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

Chromium সমস্যা #462370

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

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

কমান্ড মেনু খুলুন, শো রেন্ডারিং কমান্ড চালান, এবং তারপরে আপনার prefers-color-scheme: dark এবং prefers-color-scheme: light শৈলীগুলি ডিবাগ করতে এমুলেট CSS মিডিয়া বৈশিষ্ট্য prefers-color-scheme ড্রপডাউন সেট করুন।

prefers-color-scheme: অন্ধকার

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

এছাড়াও আপনি prefers-reduced-motion: reduce এমুলেট সিএসএস মিডিয়া ফিচার prefers-reduced-motion ড্রপডাউন ব্যবহার করে কম করুন সিএসএস মিডিয়া ফিচার prefers-color-scheme ড্রপডাউনের পাশে।

ক্রোমিয়াম সমস্যা #1004246

টাইমজোন অনুকরণ

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

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

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

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

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

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

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

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

উৎস প্যানেলে কভারেজ ডেটা।

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

Chromium সমস্যা #1003671 , #1004185

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

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

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

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

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

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

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

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

ক্রোমিয়াম সমস্যা #977394

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

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

ক্রোমিয়াম সমস্যা #983874

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

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

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

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

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

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

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