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

ডিবাগিংয়ের সময় ফ্রেম পুনরায় চালু করুন

রিস্টার্ট ফ্রেম বৈশিষ্ট্য ফিরে এসেছে! কোনো ফাংশনে কোথাও বিরতি দিলে আপনি পূর্বের কোডটি পুনরায় চালাতে পারেন। পূর্বে, স্থিতিশীলতার সমস্যার কারণে Chrome 92-এ এই বৈশিষ্ট্যটি অবমূল্যায়িত এবং সরানো হয়েছিল।

এই উদাহরণে , ডিবাগার প্রাথমিকভাবে toggleColorScheme ফাংশনের শেষের কাছাকাছি ব্রেকপয়েন্টে (লাইন 343) বিরতি দেয়। toggleColorScheme ফাংশনের শুরু থেকে ডিবাগিং পুনরায় আরম্ভ করতে, ডিবাগার প্যানে কল স্ট্যাক বিভাগটি প্রসারিত করুন, toggleColorScheme এ ডান-ক্লিক করুন এবং Restart frame নির্বাচন করুন।

ডিবাগিংয়ের সময় ফ্রেম পুনরায় চালু করুন

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

রেকর্ডার প্যানেলে ধীর রিপ্লে বিকল্প

আপনি এখন একটি ধীর গতিতে ব্যবহারকারীর প্রবাহ পুনরায় চালাতে পারেন — ধীর, খুব ধীর, এবং অত্যন্ত ধীর। এই বিকল্পগুলি আপনাকে স্ক্রিনে প্রতিটি ধাপের রিপ্লে আরও ভালভাবে পর্যবেক্ষণ করতে দেয়।

রেকর্ডার প্যানেল খুলুন এবং একটি নতুন রেকর্ডিং শুরু করুন । রেকর্ডিং হয়ে গেলে রিপ্লে ড্রপ-ডাউন বোতামে ক্লিক করুন। একটি রিপ্লে শুরু করতে একটি গতি নির্বাচন করুন৷

রেকর্ডার প্যানেলে ধীর রিপ্লে বিকল্প

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

রেকর্ডার প্যানেলের জন্য একটি এক্সটেনশন তৈরি করুন

আপনি এখন আপনার প্রিয় বিন্যাসে রিপ্লে স্ক্রিপ্ট রপ্তানি করতে একটি Chrome এক্সটেনশন তৈরি বা ইনস্টল করতে পারেন৷ রেকর্ডার এক্সটেনশন API ডকুমেন্টেশন দেখুন কিভাবে একটি তৈরি করতে হয়।

একটি ডেমো এক্সটেনশন ইনস্টল করতে, ডকুমেন্টেশনে বর্ণিত এই পদক্ষেপগুলি অনুসরণ করুন৷

রেকর্ডার প্যানেলের জন্য কাস্টম এক্সটেনশন

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

উত্স প্যানেলে লেখক/নিয়োজিত দ্বারা ফাইলগুলিকে গোষ্ঠীভুক্ত করুন৷

উত্স প্যানেলে আপনার ফাইলগুলিকে সংগঠিত করতে Authored / Deployed দ্বারা নতুন গ্রুপ ফাইলগুলি সক্রিয় করুন৷ যখন ফ্রেমওয়ার্ক (উদাহরণস্বরূপ, প্রতিক্রিয়া, কৌণিক) দিয়ে ওয়েব অ্যাপ্লিকেশনগুলি তৈরি করা হয়, তখন বিল্ড টুলগুলির দ্বারা উত্পন্ন ছোট ফাইলগুলির কারণে (উদাহরণস্বরূপ, ওয়েবপ্যাক, ভিটে) সোর্স ফাইলগুলি নেভিগেট করা কঠিন হতে পারে।

এই চেকবক্সের সাহায্যে, দ্রুত ফাইল অনুসন্ধানের জন্য আপনি ফাইলগুলিকে 2টি বিভাগে গোষ্ঠীবদ্ধ করতে পারেন:

  • লেখক । আপনি আপনার IDE তে যে সোর্স ফাইলগুলি দেখেন তার অনুরূপ৷ DevTools এই ফাইলগুলি সোর্স ম্যাপের উপর ভিত্তি করে তৈরি করে (আপনার বিল্ড টুল দ্বারা প্রদত্ত)।
  • মোতায়েন করা হয়েছে । প্রকৃত ফাইল যা ব্রাউজার পড়ে। সাধারণত এই ফাইলগুলি ছোট করা হয়।

এই প্রতিক্রিয়া ডেমো দিয়ে এটি নিজেই চেষ্টা করুন!

উত্স প্যানেলে লেখক/নিয়োজিত দ্বারা ফাইলগুলিকে গোষ্ঠীভুক্ত করুন৷

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

পারফরম্যান্স ইনসাইট প্যানেলে নতুন ব্যবহারকারীর সময় ট্র্যাক

পারফরম্যান্স ইনসাইট প্যানেলে নতুন ইউজার টাইমিং ট্র্যাক দিয়ে আপনার রেকর্ডিংয়ে performance.measure() চিহ্নগুলিকে কল্পনা করুন৷

উদাহরণস্বরূপ, এই ওয়েব পৃষ্ঠাটি টেক্সট লোড হওয়ার অতিবাহিত সময় গণনা করতে performance.measure() পদ্ধতি ব্যবহার করে।

আপনি যখন পৃষ্ঠা লোড পরিমাপ করা শুরু করেন, তখন ব্যবহারকারীর সময় ট্র্যাক রেকর্ডিংয়ে দেখায়৷ পাশের ফলকে এর বিশদ বিবরণ দেখতে সময় আইটেমটিতে ক্লিক করুন।

পারফরম্যান্স ইনসাইট প্যানেলে ব্যবহারকারীর সময় ট্র্যাক করে

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

একটি উপাদানের নির্ধারিত স্লট প্রকাশ করুন

এলিমেন্টস প্যানেলে স্লট করা উপাদানগুলির একটি নতুন slot ব্যাজ রয়েছে৷ লেআউট সমস্যাগুলি ডিবাগ করার সময়, নোডের লেআউটকে দ্রুত প্রভাবিত করে এমন উপাদান সনাক্ত করতে এই বৈশিষ্ট্যটি ব্যবহার করুন।

এই উদাহরণে কয়েকটি নামযুক্ত স্লট সহ কার্ড রয়েছে। একটি কার্ডের person-occupation স্লট পরিদর্শন করুন, এর নির্ধারিত স্লট প্রকাশ করতে এটির পাশের slot ব্যাজটিতে ক্লিক করুন৷

একটি নমনীয় টেমপ্লেট তৈরি করতে কীভাবে <template> এবং <slot> উপাদানগুলি ব্যবহার করবেন তা শিখুন যা তারপরে একটি ওয়েব উপাদানের ছায়া DOM তৈরি করতে ব্যবহার করা যেতে পারে।

একটি উপাদানের নির্ধারিত স্লট প্রকাশ করুন

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

পারফরম্যান্স রেকর্ডিংয়ের জন্য হার্ডওয়্যার কনকারেন্সি অনুকরণ করুন

পারফরম্যান্স প্যানেলে নতুন হার্ডওয়্যার কনকারেন্সি সেটিং ডেভেলপারদের navigator.hardwareConcurrency দ্বারা রিপোর্ট করা মান কনফিগার করতে দেয়।

কিছু অ্যাপ্লিকেশন তাদের অ্যাপ্লিকেশনের সমান্তরালতার মাত্রা নিয়ন্ত্রণ করতে navigator.hardwareConcurrency ব্যবহার করে, উদাহরণস্বরূপ, Emscripten pthread পুলের আকার নিয়ন্ত্রণ করতে। এই বৈশিষ্ট্যটির সাহায্যে, বিকাশকারীরা তাদের অ্যাপ্লিকেশন কার্যকারিতা বিভিন্ন মূল সংখ্যার সাথে পরীক্ষা করতে পারে।

পারফরম্যান্স রেকর্ডিংয়ের জন্য হার্ডওয়্যার কনকারেন্সি অনুকরণ করুন

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

সিএসএস ভেরিয়েবল স্বয়ংসম্পূর্ণ করার সময় অ-রঙ মান পূর্বরূপ দেখুন

CSS ভেরিয়েবলগুলি স্বয়ংসম্পূর্ণ করার সময়, DevTools এখন একটি অর্থপূর্ণ মান দিয়ে নন-কালার ভেরিয়েবলকে পপুলেট করে যাতে আপনি নোডে মানটির কী ধরনের পরিবর্তন হবে তার পূর্বরূপ দেখতে পারেন।

সিএসএস ভেরিয়েবল স্বয়ংসম্পূর্ণ করার সময় অ-রঙ মান পূর্বরূপ দেখুন

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

ব্যাক/ফরওয়ার্ড ক্যাশে প্যানে ব্লকিং ফ্রেমগুলি সনাক্ত করুন

অ্যাপ্লিকেশান প্যানেলের পিছনে/ফরোয়ার্ড ক্যাশে প্যানেলে নতুন ফ্রেম বিভাগ রয়েছে যা আপনাকে ব্লক করা ফ্রেমগুলি সনাক্ত করতে সহায়তা করে যা পৃষ্ঠাটিকে bfcache এর জন্য যোগ্য হতে বাধা দিতে পারে।

ব্যাক/ফরওয়ার্ড ক্যাশে প্যানে ব্লকিং ফ্রেমগুলি সনাক্ত করুন

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

জাভাস্ক্রিপ্ট অবজেক্টের জন্য উন্নত স্বয়ংসম্পূর্ণ পরামর্শ

জাভাস্ক্রিপ্ট অবজেক্ট বৈশিষ্ট্যগুলির জন্য স্বয়ংসম্পূর্ণতা এখন এই আদেশের উপর ভিত্তি করে প্রদর্শিত হয়:

  1. অগণিত সম্পত্তির মালিক
  2. অগণিত সম্পত্তির মালিক
  3. উত্তরাধিকার সূত্রে প্রাপ্ত গণনাযোগ্য বৈশিষ্ট্য
  4. উত্তরাধিকার সূত্রে প্রাপ্ত অ-গণনাযোগ্য সম্পত্তি

পূর্বে, ডেভেলপারদের প্রাসঙ্গিক বৈশিষ্ট্যগুলি খুঁজে পাওয়া কঠিন ছিল কারণ পরামর্শটি উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্যগুলির চেয়ে শুধুমাত্র নিজস্ব বৈশিষ্ট্যগুলিকে সমর্থন করেছিল এবং সমস্ত উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্যগুলিকে সমান অগ্রাধিকার দেওয়া হয়েছিল৷

জাভাস্ক্রিপ্ট অবজেক্টের জন্য উন্নত স্বয়ংসম্পূর্ণ পরামর্শ

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

উৎস মানচিত্র উন্নতি

সামগ্রিক ডিবাগিং অভিজ্ঞতা উন্নত করতে উত্স মানচিত্রে এখানে কয়েকটি সংশোধন করা হয়েছে:

  • ব্রেকপয়েন্ট এখন সোর্সইউআরএল টীকা সহ ইনলাইন <script> এ কাজ করে।
  • ডিবাগার এখন সোর্স ম্যাপ সহ স্কোপ ভিউতে ব্লক স্কোপড ভেরিয়েবলের সমাধান করে। ব্লক স্কোপড ভেরিয়েবলের সমাধান করে
  • ডিবাগার এখন সোর্স ম্যাপ সহ স্কোপ ভিউতে তীর ফাংশনে ভেরিয়েবলের সমাধান করে। তীর ফাংশনে ভেরিয়েবলের সমাধান করে

ক্রোমিয়াম সমস্যা: 1329113 , 1322115

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

এই রিলিজে কিছু উল্লেখযোগ্য সমাধান হল:

  • উত্স প্যানেলের জন্য স্বয়ংক্রিয়-সম্পূর্ণতা সেটিং স্থির করা হয়েছে৷ পূর্বে, সর্বদা স্বতঃ-সম্পূর্ণ এমনকি সেটিং অক্ষম করা হয়। ( 1323286 )
  • সর্বশেষ রঙের স্কিম বিন্যাস পার্স করতে অ্যাপ্লিকেশন প্যানেলে ম্যানিফেস্ট ট্যাব আপডেট করা হয়েছে। ( 1318305 )
  • পারফরম্যান্স ইনসাইট প্যানেলে <script async> রেন্ডারিং ব্লকিং সমস্যাগুলির জন্য পরামর্শগুলি উন্নত করা হয়েছে। পূর্বে, DevTools add async attribute to the script tag পরামর্শ দিয়েছিল যদিও স্ক্রিপ্টটি ইতিমধ্যেই অ্যাসিঙ্ক হিসাবে চিহ্নিত করা হয়েছে। ( 1334096 )
  • পারফরম্যান্স ইনসাইট প্যানেল এখন লেআউট পরিবর্তনের সম্ভাব্য কারণ হিসেবে iframes সনাক্ত করে। আপনি বিস্তারিত ফলকে iframe বিবরণ দেখতে পারেন। ( 1328873 )
  • কমান্ড মেনুতে ফাইল খোলার সময়, লেখক ফাইলগুলি (উৎস মানচিত্র দ্বারা উত্পন্ন ফাইলগুলি) এখন উচ্চতর র‌্যাঙ্ক করা হয় যাতে তারা একইভাবে নামযুক্ত স্থাপন করা স্ক্রিপ্টের উপরে প্রদর্শিত হয়। ( 1312929 )

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

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

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

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

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

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

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

,

ডিবাগিংয়ের সময় ফ্রেম পুনরায় চালু করুন

পুনঃসূচনা ফ্রেম বৈশিষ্ট্যটি ফিরে এসেছে! কোনও ফাংশনে কোথাও বিরতি দেওয়ার সময় আপনি পূর্ববর্তী কোডটি পুনরায় চালাতে পারেন। পূর্বে, স্থিতিশীলতার সমস্যার কারণে এই বৈশিষ্ট্যটি ক্রোম 92 এ অবমূল্যায়িত এবং সরানো হয়েছিল।

এই উদাহরণে , ডিবাগারটি প্রাথমিকভাবে toggleColorScheme ফাংশনের শেষের নিকটে ব্রেকপয়েন্টে (লাইন 343) বিরতি দেয়। toggleColorScheme ফাংশনের শুরু থেকে ডিবাগিংটি পুনরায় চালু করতে, ডিবাগার ফলকের কল স্ট্যাক বিভাগটি প্রসারিত করুন, toggleColorScheme ডান ক্লিক করুন এবং পুনরায় চালু ফ্রেম নির্বাচন করুন।

ডিবাগিংয়ের সময় ফ্রেম পুনরায় চালু করুন

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

রেকর্ডার প্যানেলে ধীরে ধীরে পুনরায় খেলুন বিকল্পগুলি

আপনি এখন ধীর গতিতে ব্যবহারকারী প্রবাহকে পুনরায় খেলতে পারেন - ধীর, খুব ধীর এবং অত্যন্ত ধীর। এই বিকল্পগুলি আপনাকে পর্দায় প্রতিটি পদক্ষেপের রিপ্লে আরও ভালভাবে পর্যবেক্ষণ করতে দেয়।

রেকর্ডার প্যানেলটি খুলুন এবং একটি নতুন রেকর্ডিং শুরু করুন । রেকর্ডিং হয়ে গেলে, রিপ্লে ড্রপ-ডাউন বোতামটি ক্লিক করুন। রিপ্লে শুরু করতে একটি গতি নির্বাচন করুন।

রেকর্ডার প্যানেলে ধীরে ধীরে পুনরায় খেলুন বিকল্পগুলি

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

রেকর্ডার প্যানেলের জন্য একটি এক্সটেনশন তৈরি করুন

আপনি এখন আপনার প্রিয় ফর্ম্যাটে রিপ্লে স্ক্রিপ্টগুলি রফতানি করতে ক্রোম এক্সটেনশন তৈরি বা ইনস্টল করতে পারেন। কীভাবে তৈরি করতে হয় তা শিখতে রেকর্ডার এক্সটেনশন এপিআই ডকুমেন্টেশন দেখুন।

একটি ডেমো এক্সটেনশন ইনস্টল করতে, ডকুমেন্টেশনে বর্ণিত এই পদক্ষেপগুলি অনুসরণ করুন।

রেকর্ডার প্যানেলের জন্য কাস্টম এক্সটেনশন

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

উত্স প্যানেলে লেখক / মোতায়েন দ্বারা গ্রুপ ফাইল

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

এই চেকবক্সের সাহায্যে আপনি দ্রুত ফাইল অনুসন্ধানের জন্য ফাইলগুলি 2 টি বিভাগে গ্রুপ করতে পারেন:

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

এই প্রতিক্রিয়া ডেমো দিয়ে নিজেকে চেষ্টা করুন!

উত্স প্যানেলে লেখক / মোতায়েন দ্বারা গ্রুপ ফাইল

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

পারফরম্যান্স অন্তর্দৃষ্টি প্যানেলে নতুন ব্যবহারকারীর সময় ট্র্যাক

performance.measure() পারফরম্যান্স অন্তর্দৃষ্টি প্যানেলে নতুন ব্যবহারকারী টাইমিংস ট্র্যাকের সাথে আপনার রেকর্ডিংয়ে চিহ্নগুলি ভিজ্যুয়ালাইজ করুন।

উদাহরণস্বরূপ, এই ওয়েব পৃষ্ঠাটি পাঠ্য লোডিংয়ের অতিবাহিত সময় গণনা করতে performance.measure() পদ্ধতি ব্যবহার করে।

আপনি যখন পৃষ্ঠার লোডটি পরিমাপ করা শুরু করেন, তখন ব্যবহারকারীর টাইমিংস ট্র্যাকটি রেকর্ডিংয়ে দেখায়। পাশের ফলকে এর বিশদটি দেখতে টাইমিং আইটেমটি ক্লিক করুন।

পারফরম্যান্স অন্তর্দৃষ্টি প্যানেলে ব্যবহারকারীর সময় ট্র্যাক

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

একটি উপাদান নির্ধারিত স্লট প্রকাশ

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

এই উদাহরণে কয়েকটি নামযুক্ত স্লট সহ কার্ড রয়েছে। কোনও কার্ডের person-occupation স্লটটি পরীক্ষা করুন, এর নির্ধারিত স্লটটি প্রকাশ করতে এর পাশের slot ব্যাজটি ক্লিক করুন।

একটি নমনীয় টেম্পলেট তৈরি করতে কীভাবে <template> এবং <slot> উপাদানগুলি ব্যবহার করতে হয় তা শিখুন যা পরে কোনও ওয়েব উপাদানটির ছায়া ডোমটি পপুলেট করতে ব্যবহার করা যেতে পারে।

একটি উপাদান নির্ধারিত স্লট প্রকাশ

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

পারফরম্যান্স রেকর্ডিংয়ের জন্য হার্ডওয়্যার সম্মতি সিমুলেট করুন

পারফরম্যান্স প্যানেলে নতুন হার্ডওয়্যার সম্মতি সেটিং বিকাশকারীদের navigator.hardwareConcurrency দ্বারা প্রতিবেদন করা মানটি কনফিগার করতে দেয় Hard হার্ডওয়ারকনকারেন্সি।

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

পারফরম্যান্স রেকর্ডিংয়ের জন্য হার্ডওয়্যার সম্মতি সিমুলেট করুন

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

সিএসএস ভেরিয়েবলগুলি স্বতঃ

যখন সিএসএস ভেরিয়েবলগুলি স্বয়ংক্রিয়ভাবে কমপ্লিটিং করা হয়, তখন ডেভটুলগুলি এখন নন-রঙের ভেরিয়েবলটিকে অর্থবহ মানের দিয়ে পপুলেট করে যাতে আপনি নোডে মানটি কী ধরণের পরিবর্তন করতে পারে তা প্রাকদর্শন করতে পারেন।

সিএসএস ভেরিয়েবলগুলি স্বতঃ

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

পিছনে/ফরোয়ার্ড ক্যাশে ফলকে ব্লকিং ফ্রেমগুলি সনাক্ত করুন

অ্যাপ্লিকেশন প্যানেলে ব্যাক/ফরোয়ার্ড ক্যাশে ফলকের মধ্যে আপনাকে ব্লকিং ফ্রেমগুলি সনাক্ত করতে সহায়তা করার জন্য নতুন ফ্রেম বিভাগ রয়েছে যা পৃষ্ঠাটি বিএফসিচের জন্য যোগ্য হতে বাধা দিতে পারে।

পিছনে/ফরোয়ার্ড ক্যাশে ফলকে ব্লকিং ফ্রেমগুলি সনাক্ত করুন

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

জাভাস্ক্রিপ্ট অবজেক্টগুলির জন্য উন্নত স্বত

জাভাস্ক্রিপ্ট অবজেক্টের বৈশিষ্ট্যগুলির জন্য অটো কমপ্লিটেশন এখন এই ক্রমের উপর ভিত্তি করে প্রদর্শন করে:

  1. নিজস্ব গণনীয় বৈশিষ্ট্য
  2. মালিকানা অ-প্রাণীবাহী বৈশিষ্ট্য
  3. উত্তরাধিকার সূত্রে প্রাপ্ত গণনীয় বৈশিষ্ট্য
  4. উত্তরাধিকার সূত্রে প্রাপ্ত অ-প্রাণীবাহী বৈশিষ্ট্য

পূর্বে, বিকাশকারীরা প্রাসঙ্গিক বৈশিষ্ট্যগুলি খুঁজে পাওয়া আরও কঠিন বলে মনে করেছিলেন কারণ পরামর্শটি কেবল উত্তরাধিকার সূত্রে প্রাপ্ত বৈশিষ্ট্যগুলির চেয়ে নিজস্ব বৈশিষ্ট্যগুলির পক্ষে ছিল এবং সমস্ত উত্তরাধিকার সূত্রে প্রাপ্ত বৈশিষ্ট্যগুলিকে সমান অগ্রাধিকার দেওয়া হয়েছিল।

জাভাস্ক্রিপ্ট অবজেক্টগুলির জন্য উন্নত স্বত

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

উত্স মানচিত্রের উন্নতি

সামগ্রিক ডিবাগিং অভিজ্ঞতা উন্নত করতে উত্স মানচিত্রে কয়েকটি সংশোধন এখানে রয়েছে:

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

ক্রোমিয়াম ইস্যু: 1329113 , 1322115

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

এই প্রকাশে এগুলি কিছু লক্ষণীয় সমাধান:

  • উত্স প্যানেলের জন্য অটো-সমাপ্তি সেটিংস স্থির করে। পূর্বে, অটো-সম্পূর্ণ সর্বদা এমনকি সেটিংটি অক্ষম থাকে। ( 1323286 )
  • সর্বশেষতম রঙ স্কিম ফর্ম্যাটটি পার্স করতে অ্যাপ্লিকেশন প্যানেলে ম্যানিফেস্ট ট্যাবটি আপডেট করেছে। ( 1318305 )
  • পারফরম্যান্স অন্তর্দৃষ্টি প্যানেলে <script async> রেন্ডারিং ব্লকিং ইস্যুগুলির জন্য পরামর্শগুলি উন্নত করেছে। পূর্বে, ডিভটুলস add async attribute to the script tag পরামর্শ দিয়েছিল যদিও স্ক্রিপ্টটি ইতিমধ্যে অ্যাসিঙ্ক হিসাবে চিহ্নিত রয়েছে। ( 1334096 )
  • পারফরম্যান্স অন্তর্দৃষ্টি প্যানেল এখন লেআউট শিফ্টের সম্ভাব্য কারণ হিসাবে আইএফআরএএমগুলি সনাক্ত করে। আপনি বিশদ বিবরণে আইফ্রেমের বিশদটি দেখতে পারেন। ( 1328873 )
  • কমান্ড মেনুতে যখন ফাইল ওপেন ফাইল , লেখক ফাইলগুলি (উত্স মানচিত্র দ্বারা উত্পাদিত ফাইলগুলি) এখন উচ্চতর স্থান দেওয়া হয় যাতে তারা একইভাবে নামযুক্ত মোতায়েন স্ক্রিপ্টগুলির উপরে উপস্থিত হয়। ( 1312929 )

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

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

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

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

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

ডিভটুলসে নতুন কি

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।