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

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

থার্ড-পার্টি কুকি ফেজআউট

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

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

"সমস্যা" ট্যাবে আসন্ন থার্ড-পার্টি কুকি বন্ধ করে দেওয়ার বিষয়ে একটি সতর্কতা।

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

প্রাইভেসি স্যান্ডবক্স বিশ্লেষণ টুল দিয়ে আপনার ওয়েবসাইটের কুকিজ বিশ্লেষণ করুন

DevTools-এর জন্য প্রাইভেসি স্যান্ডবক্স অ্যানালাইসিস টুল এক্সটেনশনটি 0.3.2 এর সর্বশেষ প্রাক-প্রকাশিত সংস্করণের সাথে সক্রিয়ভাবে বিকাশাধীন। এই টুলটি আপনাকে বুঝতে সাহায্য করে যে আপনার ওয়েবসাইট কীভাবে কুকি ব্যবহার করে এবং নতুন গোপনীয়তা-সংরক্ষণকারী Chrome API-এর উপর নির্দেশিকা প্রদান করে।

আপনার কুকিজ বিশ্লেষণ করতে:

  1. Chrome এ এক্সটেনশনটি ইনস্টল করুন ।
  2. সেরা বিশ্লেষণের জন্য আপনার ওয়েবসাইটটি একটি একক ট্যাবে খুলুন।
  3. DevTools খুলুন এবং প্রাইভেসি স্যান্ডবক্স প্যানেলে নেভিগেট করুন। এই প্যানেলটি এর পিছনে লুকানো থাকতে পারে আরও ট্যাব। উপরে ড্রপ-ডাউন বোতাম।
  4. কুকিজ বিভাগটি খুলুন এবং এই ট্যাবটি বিশ্লেষণ করুন এ ক্লিক করুন। যদি টুলটি কোনও কুকিজ খুঁজে না পায়, তাহলে পৃষ্ঠাটি পুনরায় লোড করার চেষ্টা করুন।

গোপনীয়তা স্যান্ডবক্স বিশ্লেষণ টুল।

প্রাইভেসি স্যান্ডবক্স অ্যানালাইসিস টুল (PSAT) কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও তথ্যের জন্য, নিম্নলিখিতগুলি দেখুন:

তাছাড়া, সমস্যা রিপোর্ট করার নির্দেশিকা দেখুন।

উন্নত উপেক্ষা তালিকা

node_modules এর জন্য ডিফল্ট বর্জন প্যাটার্ন

এই সংস্করণটি ডিফল্ট রেগুলার এক্সপ্রেশনকে একটি কাস্টম বর্জন নিয়ম হিসেবে সক্ষম করে সেটিংস. সেটিংস > তালিকা উপেক্ষা করুন । শুধুমাত্র আপনার কোডের উপর ফোকাস করতে সাহায্য করার জন্য, ডিবাগার এখন ডিফল্টরূপে /node_modules/ এবং /bower_components/ থেকে স্ক্রিপ্টগুলি এড়িয়ে যাবে। আপনি যেকোনো সময় সেটিংসে এই নিয়মটি অক্ষম করতে পারেন।

একটি নিয়মিত অভিব্যক্তি যোগ করার আগে এবং পরে।

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

এখন ব্যতিক্রমগুলি ধরা পড়লে বা উপেক্ষা না করা কোডের মধ্য দিয়ে গেলে কার্যকর করা বন্ধ করে দেয়।

যখন আপনি কোড ডিবাগ করবেন চেকবক্স। ধরা ব্যতিক্রমগুলিতে বিরতি পরীক্ষা করা হলে , ডিবাগার এখন নিম্নলিখিত ধরা ব্যতিক্রমগুলিতে, সিঙ্ক্রোনাস এবং অ্যাসিঙ্ক্রোনাস উভয় ক্ষেত্রেই কার্যকর করা বন্ধ করে দেয়:

  • কল স্ট্যাকের অ-উপেক্ষা করা ফ্রেমে ধরা ব্যতিক্রমগুলি।
  • কল স্ট্যাকের মধ্যে এমন ব্যতিক্রম ধরা পড়েছে যা উপেক্ষা করা হয়নি এমন ফ্রেমের মধ্য দিয়ে যায়। উদাহরণস্বরূপ, স্ক্রিনশটটি দেখুন।

অ-উপেক্ষা করা কোডের মধ্য দিয়ে যাওয়া একটি ধরা ব্যতিক্রমের উপর বিরতি দিন।

এই আচরণ পরীক্ষা করতে, এই ডেমো পৃষ্ঠাটি খুলুন:

  1. DevTools > Sources খুলুন, hidden ফোল্ডারটি উপেক্ষা তালিকায় যোগ করুন এবং চেক করুন চেকবক্স। ধরা পড়া ব্যতিক্রমগুলিতে বিরতি দিন ।
  2. পৃষ্ঠায়, "ধরা" দৃশ্যকল্পের তালিকার অধীনে, বিভিন্ন বোতামে ক্লিক করুন এবং উল্লেখিত ক্ষেত্রে মৃত্যুদন্ড স্থগিত করা হয়েছে তা দেখুন।

অ্যাসিঙ্ক্রোনাস কলে ধরা এবং/অথবা ধরা না পড়া ব্যতিক্রম (যখন চেক করা হয়) এর ক্ষেত্রে কার্যকরকরণ থামাতে, ডিবাগার প্রতিশ্রুতি জুড়ে প্রত্যাখ্যান হ্যান্ডলারগুলি অনুসন্ধান করে। এই সংস্করণ থেকে শুরু করে, ডিবাগার আর ভবিষ্যদ্বাণী করে না যে Promise.finally() কোনও ব্যতিক্রম ধরবে, যেমন try...finally ব্লক কোনও ব্যতিক্রম ধরতে পারে না।

ক্রোমিয়াম সমস্যা: 1489312 , 1291064 ।

সোর্স ম্যাপে x_google_ignoreList নাম পরিবর্তন করে ignoreList রাখা হয়েছে

সোর্স ম্যাপ স্পেসিফিকেশনে x_google_ignoreList এর পরিবর্তে ignoreList ফিল্ডটি গ্রহণ করা হয়েছে এবং DevTools এখন পুরানোটির পরিবর্তে নতুন নামটি সমর্থন করে। ফ্রেমওয়ার্ক এবং বান্ডলাররা এখন নতুন ফিল্ডের নাম ব্যবহার করতে পারে।

সোর্স ম্যাপ আপনাকে আপনার ওয়েবসাইটে পরিবেশিত মিনিফাই করা কোডের পরিবর্তে আপনার লেখা কোডটি ডিবাগ করতে দেয়।

উৎস মানচিত্র সম্পর্কে আরও তথ্যের জন্য, দেখুন:

রিমোট ডিবাগিংয়ের সময় নতুন ইনপুট মোড টগল

এখন আপনি দূরবর্তীভাবে Chrome ট্যাব ডিবাগ করার সময় স্পর্শ এবং মাউস ইনপুটের মধ্যে টগল করতে পারেন। উদাহরণস্বরূপ, যখন আপনি --remote-debugging-port=<port> দিয়ে একটি Chrome ইনস্ট্যান্স চালান এবং chrome://inspect/#devices এর মাধ্যমে এই নেটওয়ার্ক টার্গেটের সাথে সংযোগ করেন।

ইনপুট মোড টগলিং কীভাবে কার্যকর হচ্ছে তা দেখতে ভিডিওটি দেখুন।

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

এলিমেন্টস প্যানেল এখন #document নোডের URL গুলি দেখায়।

আইফ্রেমগুলি সহজে ডিবাগ করার জন্য, এলিমেন্টস প্যানেল এখন #document nodes এর পাশে documentURL প্রদর্শন করে।

#document নোডের পাশে আগে এবং পরে documentURL দেখায়।

ক্রোমিয়াম সমস্যা: ১৩৭৬৯৭৬ ।

অ্যাপ্লিকেশন প্যানেলে কার্যকর কন্টেন্ট নিরাপত্তা নীতি

আপনি এখন একটি পরিদর্শন করা ফ্রেমের কন্টেন্ট সিকিউরিটি পলিসি (CSP) বিশদ দেখতে পারবেন। বিশদটি দেখতে, অ্যাপ্লিকেশন > ফ্রেমে নেভিগেট করুন, একটি ফ্রেম নির্বাচন করুন এবং কন্টেন্ট সিকিউরিটি পলিসি (CSP) বিভাগে স্ক্রোল করুন।

অ্যাপ্লিকেশন ট্যাবে অবস্থিত কন্টেন্ট নিরাপত্তা নীতি বিভাগ।

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

উন্নত অ্যানিমেশন ডিবাগিং

অ্যানিমেশন ট্যাবে, আপনি এখন করতে পারেন:

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

ক্রোমিয়াম সমস্যা: 1492460 , 1489721 ।

সোর্সে 'আপনি কি এই কোডটি বিশ্বাস করেন?' ডায়ালগ এবং কনসোলে স্ব-XSS সতর্কতা

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

আপনি যদি একজন নতুন DevTools ব্যবহারকারী হন এবং কোড পেস্ট করার চেষ্টা করেন, তাহলে Sources প্যানেলটি এখন আপনাকে " Do you trust this code?" ডায়ালগ দেখাবে এবং Console এখন একই ধরণের সতর্কতা প্রদর্শন করবে। শুধুমাত্র সেই কোডটি পেস্ট করুন যা আপনি বোঝেন এবং নিজে পর্যালোচনা করেছেন। পেস্ট করার জন্য, অনুরোধ করা হলে allow pasting টাইপ করুন। একবার পেস্ট করার অনুমতি দেওয়া হয়ে গেলে, সতর্কতাটি আর কখনও দেখানো হবে না।

সোর্সে কোড পেস্ট করার সময় 'আপনি কি এই কোডটি বিশ্বাস করেন?' ডায়ালগটি দেখাবে।

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

ওয়েব ওয়ার্কার এবং ওয়ার্কলেটে ইভেন্ট লিসেনার ব্রেকপয়েন্ট

যখন আপনি Sources > Event Listener Breakpoints এ একটি ইভেন্ট ব্রেকপয়েন্ট সেট করেন, তখন আপনার ওয়েবসাইটে এই ইভেন্টটি থামানোর পাশাপাশি, ডিবাগার এখন কোনও ওয়েব ওয়ার্কার বা যেকোনো ধরণের ওয়ার্কলেটে , যার মধ্যে Shared Storage Worklet অন্তর্ভুক্ত, তখনও থামে।

যখন কোনও পরিষেবা কর্মী সেট টাইমআউট ফাংশনটি কল করেন তখন ডিবাগারটি বিরতি দেওয়া হয়।

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

<audio> এবং <video> এর জন্য নতুন মিডিয়া ব্যাজ

আপনি এখন এলিমেন্টস প্যানেলে <audio> এবং <video> এলিমেন্টের জন্য নতুন মিডিয়া ব্যাজ সক্ষম করতে পারেন। যখন আপনি ব্যাজটিতে ক্লিক করেন, তখন এটি আপনাকে Media panel এ নিয়ে যায়, যাতে আপনি এই এলিমেন্টগুলি ডিবাগ করতে পারেন।

অডিও এবং ভিডিও ট্যাগের জন্য নতুন মিডিয়া ব্যাজ সক্ষম করা হয়েছে।

এই বৈশিষ্ট্যটি উন্নয়নাধীন এবং আরও উন্নত করা হবে। এই উন্নতির জন্য DevTools টিম জুনসিও (জেরেমি) ইউ- এর প্রতি কৃতজ্ঞতা প্রকাশ করতে চায়।

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

প্রিলোডিং এর নাম পরিবর্তন করে স্পেকুলেটিভ লোডিং করা হয়েছে

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

প্রিলোডিংয়ের আগে এবং পরে নাম পরিবর্তন করে স্পেকুলেটিভ লোডিং করা হচ্ছে।

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

বাতিঘর ১১.২.০

লাইটহাউস প্যানেল এখন লাইটহাউস ১১.২.০ চালায়। পরিবর্তনগুলির সম্পূর্ণ তালিকা দেখুন।

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

কর্মক্ষমতার আগে এবং পরে পর্যালোচনা।

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

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

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

এই সংস্করণে নিম্নলিখিত অ্যাক্সেসিবিলিটি উন্নতি রয়েছে:

  • স্ক্রিন রিডাররা এখন Sources > Breakpoints এর অধীনে চেকবক্সের অবস্থা (টিক করা বা আনচেক করা) ঘোষণা করবে।
  • আপনি এখন কীবোর্ড ব্যবহার করে "এই ড্রপ-ডাউন মেনুটির মতো সমস্যাগুলি লুকান" অ্যাক্সেস করতে পারেন।

ক্রোমিয়াম সমস্যা: 1488645 , 1484918 ।

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

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

  • কর্মক্ষমতা : রেকর্ডিংয়ে মাঝে মাঝে অনুপস্থিত LCP সূচকটি ঠিক করা হয়েছে ( 1487136 )।
  • অনুমানমূলক লোড: নেটওয়ার্ক প্যানেলের ড্রপ-ডাউন মেনুতে ( 1471020 ) লক্ষ্যগুলির জন্য সম্পূর্ণ URL গুলি ঠিক করা হয়েছে।
  • কভারেজ :
    • প্রিটি-প্রিন্টেড কোডের জন্য স্থির লাইন-বাই-লাইন কভারেজ ( 1464974 )।
    • কভারেজ তথ্য এখন পৃষ্ঠা পুনরায় লোড ( 1494457 ) এ আপডেট করা হয়েছে।
  • কনসোল :
    • বার্তাগুলিতে আংশিক পাঠ্য নির্বাচন স্থির করা হয়েছে ( 1487449 )।
    • অটোকম্পলিট ড্রপ-ডাউন ( 1487453 ) এর ঝিকিমিকি ঠিক করা হয়েছে।
    • স্ট্যাক পাথে সমর্থিত বন্ধনী এবং স্ট্যাক ট্রেসে URL গুলি ( 1473926 )।
  • সূত্র : কীওয়ার্ড ( 1490515 ) using টাইপস্ক্রিপ্টের সিনট্যাক্স হাইলাইটিং সমর্থিত।
  • দ্রুত খোলা মেনু এখন ব্যক্তিগত পদ্ধতিগুলি দেখায় ( 1492957 )।
  • অ্যাপ্লিকেশন > ব্যাকগ্রাউন্ড সার্ভিসেস : উপরের অ্যাকশন বারটি এখন আকার পরিবর্তন করার সময় টেক্সট মোড়ানো হয় ( 1487276 )।
  • উপাদান > শৈলী :
    • স্লটেড এলিমেন্টের জন্য উত্তরাধিকারসূত্রে প্রাপ্ত CSS ভেরিয়েবলের রেজোলিউশন ঠিক করা হয়েছে ( 1492162 )।
    • একটি CSS প্রোপার্টি নিষ্ক্রিয় করার সময়, সিনট্যাক্স ব্রেক ( 1101224 ) ঠিক করার জন্য এর মন্তব্যগুলি এখন বাদ দেওয়া হয়।
  • নেটওয়ার্ক : অগ্রাধিকার কলামটি এখন প্রাথমিক অগ্রাধিকারের তথ্য সহ একটি টুলটিপ দেখায় ( বড় অনুরোধ সারি চেক করার সময় একই জিনিস দেখানো হয়) ( 1495735 )।
  • অবচয়:
    • পূর্ববর্তী সংস্করণগুলিতে রঙের বিন্যাস সেটিংটি অক্ষম করা হয়েছিল এবং এখন সরানো হয়েছে।
    • ওভাররাইড ( 1473681 ) স্ট্রিমলাইন করার পরে কম ব্যবহারের কারণে Sources- এ Delete all overrides বিকল্পটি এখন সরানো হয়েছে।

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

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

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

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

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

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