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

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

তৃতীয় পক্ষের কুকি ফেজআউট

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

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

সমস্যা ট্যাবে আসন্ন তৃতীয় পক্ষের কুকি অবচয় সম্পর্কে একটি সতর্কতা।

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

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

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

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

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

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

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

  • 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 নোডের পাশে documentURL প্রদর্শন করে।

আগে এবং পরে # ডকুমেন্ট নোডের পাশে ডকুমেন্ট ইউআরএল দেখায়।

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

অ্যাপ্লিকেশন প্যানেলে কার্যকরী বিষয়বস্তুর নিরাপত্তা নীতি

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

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

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

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

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

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

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

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

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

আপনি যদি একজন নতুন DevTools ব্যবহারকারী হন এবং আপনি কোড পেস্ট করার চেষ্টা করেন, উত্স প্যানেল এখন আপনাকে দেখায় যে আপনি কি এই কোডটি বিশ্বাস করেন? ডায়ালগ এবং কনসোল এখন অনুরূপ সতর্কতা প্রদর্শন করে। শুধুমাত্র সেই কোড পেস্ট করুন যা আপনি বোঝেন এবং নিজে পর্যালোচনা করেছেন। পেস্ট করতে, প্রম্পট করার সময় allow pasting টাইপ করুন। একবার পেস্ট করার অনুমতি দেওয়া হলে, সতর্কতাটি আর কখনও দেখানো হবে না।

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

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

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

আপনি যখন উত্স > ইভেন্ট লিসেনার ব্রেকপয়েন্টে একটি ইভেন্ট ব্রেকপয়েন্ট সেট করেন, আপনার ওয়েবসাইটে এই ইভেন্টে বিরতি দেওয়ার পাশাপাশি, শেয়ার্ড স্টোরেজ ওয়ার্কলেট সহ কোনও ওয়েব কর্মী বা ওয়ার্কলেটে সংশ্লিষ্ট ইভেন্টটি ঘটলে ডিবাগার এখন বিরতি দেয়৷

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

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

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

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

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

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

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

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

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

আগে এবং পরে প্রিলোডিংকে অনুমানমূলক লোডিংয়ে নামকরণ করা হয়েছে।

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

বাতিঘর 11.2.0

Lighthouse প্যানেল এখন Lighthouse 11.2.0 চালায়। পরিবর্তনের সম্পূর্ণ তালিকা দেখুন।

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

কর্মক্ষমতা ওভারহল আগে এবং পরে.

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

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

অ্যাক্সেসযোগ্যতার উন্নতি

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

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

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

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

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

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

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

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

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

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

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

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

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