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

জেসলিন ইয়েন

রেকর্ডার: ধাপ, ইন-পেজ রিপ্লে, ধাপের প্রসঙ্গ মেনু বিকল্প হিসেবে কপি করুন।

রেকর্ডার প্যানেলে নতুন কপি অপশন।

Recorder এ একটি বিদ্যমান ব্যবহারকারী প্রবাহ খুলুন। পূর্বে, যখন আপনি ব্যবহারকারী প্রবাহটি পুনরায় চালাতেন, DevTools সর্বদা পৃষ্ঠাটিতে নেভিগেট করে বা পুনরায় লোড করে পুনরায় চালাতে শুরু করত।

সর্বশেষ আপডেটের সাথে, রেকর্ডারটি নেভিগেশন ধাপটি আলাদাভাবে দেখায়। আপনি ইন-পেজ রিপ্লে করতে ডান-ক্লিক করে এটি সরিয়ে ফেলতে পারেন!

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

পূর্বে, আপনি কেবল 3-ডট বোতামের মাধ্যমে স্টেপ মেনুতে অ্যাক্সেস করতে পারতেন। এখন আপনি মেনুতে অ্যাক্সেস করতে স্টেপের যেকোনো জায়গায় ডান-ক্লিক করতে পারেন।

ক্রোমিয়াম সমস্যা: 1322313 , 1351649 , 1322313 , 1339767

পারফরম্যান্সের রেকর্ডিংয়ে প্রকৃত ফাংশনের নাম দেখান

যদি সোর্স ম্যাপ থাকে, তাহলে পারফরম্যান্স প্যানেল এখন ট্রেসে আসল ফাংশনের নাম এবং তাদের সোর্সগুলি দেখায়।

পারফরম্যান্স প্যানেলে ফাংশন নামের তুলনার আগে এবং পরে প্রদর্শন করুন।

এই উদাহরণে, প্রোডাকশনের সময় একটি সোর্স ফাইল মিনিমাইজ করা হয়েছে। উদাহরণস্বরূপ, sayHi ফাংশনটিকে n হিসাবে মিনিমাইজ করা হয়েছে, এবং takeABreak ফাংশনটিকে o হিসাবে মিনিমাইজ করা হয়েছে ।

মিনিফিকেশনের আগে এবং পরে ফাইলগুলি দেখান।

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

সর্বশেষ পরিবর্তনগুলির সাথে, DevTools এখন সোর্স ম্যাপ পড়ে এবং প্রকৃত ফাংশনের নাম এবং সোর্স অবস্থান দেখায়।

ক্রোমিয়াম সমস্যা: ১৩৬৪৬০১ , ১৩৬৪৬০১

কনসোল এবং সোর্স প্যানেলে নতুন কীবোর্ড শর্টকাট

আপনি সোর্স প্যানেলে ট্যাবগুলির মধ্যে স্যুইচ করতে পারেন: MacOS-এ, Function + Command + Arrow up and down Windows এবং Linux-এ, Control + Page up or down

তাছাড়া, আপনি Emacs এর মতো MacOS-এ Ctrl + N এবং Ctrl + P দিয়ে অটোকম্পলিট সাজেশন নেভিগেট করতে পারেন। উদাহরণস্বরূপ, আপনি Console window. টাইপ করতে পারেন এবং নেভিগেট করার জন্য এই শর্টকাটগুলি ব্যবহার করতে পারেন।

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

ক্রোমিয়াম সমস্যা: 1167965 , 1172535 , 1371585। 1369503

উন্নত জাভাস্ক্রিপ্ট ডিবাগিং

এই রিলিজে জাভাস্ক্রিপ্ট ডিবাগিংয়ের কিছু উন্নতি এখানে দেওয়া হল:

  • new.target হল একটি মেটা-প্রপার্টি যা আপনাকে new অপারেটর ব্যবহার করে কোনও ফাংশন বা কনস্ট্রাক্টর কল করা হয়েছে কিনা তা সনাক্ত করতে দেয়। আপনি এখন ডিবাগিংয়ের সময় কনসোলে new.target লগ করে এর মান পরীক্ষা করতে পারেন। পূর্বে, new.target প্রবেশ করার সময় এটি ত্রুটিগুলি ফেরত দিত। new.target মূল্যায়ন ডিবাগিংয়ের আগে এবং পরে তুলনা দেখান।
  • একটি WeakRef অবজেক্ট আপনাকে অন্য একটি অবজেক্টের দুর্বল রেফারেন্স ধরে রাখতে দেয়, সেই অবজেক্টটিকে আবর্জনা সংগ্রহ করা থেকে বিরত না রেখে। DevTools এখন মানের জন্য একটি ইনলাইন প্রিভিউ দেখায় এবং ডিবাগিংয়ের সময় সরাসরি কনসোলে দুর্বল রেফারেন্স মূল্যায়ন করে। পূর্বে, এটি সমাধান করার জন্য আপনাকে স্পষ্টভাবে "deref" কল করতে হত। ডিবাগিংয়ের সময় WeakRef মূল্যায়নের আগে এবং পরে তুলনা দেখান।
  • ছায়াযুক্ত ভেরিয়েবলের জন্য স্থির ইনলাইন প্রিভিউ। পূর্বে, প্রদর্শন মানটি ভুল ছিল। ছায়াযুক্ত ভেরিয়েবলের জন্য তুলনার আগে এবং পরে ইনলাইন প্রিভিউ দেখান।
  • Generator ভেরিয়েবলের নাম ডিঅবফাস্কেট করুন এবং সোর্স প্যানেলের স্কোপ প্যানে async ফাংশন ব্যবহার করুন।

ক্রোমিয়াম সমস্যা: 1267690 , 1246863 1371322 , 1311637

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

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

  • স্টাইলস প্যানে নিষ্ক্রিয় CSS বৈশিষ্ট্যের জন্য আরও ইঙ্গিত সমর্থন করুন - ইনলাইন উচ্চতা এবং প্রস্থ, ফ্লেক্স এবং গ্রিড বৈশিষ্ট্য। ( 1373597 , 1178508 , 1178508 , 1178508 )
  • সিনট্যাক্স হাইলাইটিং ঠিক করা হয়েছে। DevTools-এ সাম্প্রতিক কোড এডিটর আপগ্রেডের পর থেকে এটি সঠিকভাবে কাজ করছিল না। ( 1290182 )
  • রেকর্ডারে অন ব্লার ইভেন্টের পরে ইনপুট পরিবর্তন ইভেন্টগুলি সঠিকভাবে ক্যাপচার করুন। ( 1378488 )
  • রেকর্ডারে আরও ভালো ডিবাগিং অভিজ্ঞতার জন্য এক্সপোর্টে পাপেটিয়ার রিপ্লে স্ক্রিপ্ট আপডেট করুন। ( ১৩৫১৬৪৯ )
  • রিমোট ডিবাগিংয়ের জন্য রেকর্ডারে রেকর্ড এবং রিপ্লে সমর্থন করে। ( 1185727 )
  • var() তে বিশেষ CSS ভেরিয়েবলের নামের পার্সিং ঠিক করা হয়েছে। পূর্বে, DevTools var(--fo\ o) এর মতো এস্কেপ করা অক্ষর সহ ভেরিয়েবল পার্সিং সমর্থন করত না। , ( 1378992 )

[পরীক্ষামূলক] ব্রেকপয়েন্ট পরিচালনায় উন্নত UX

বর্তমান ব্রেকপয়েন্টস প্যানটি সমস্ত ব্রেকপয়েন্ট তদারকিতে সামান্য ভিজ্যুয়াল সহায়তা প্রদান করে। তার উপরে, প্রায়শই ব্যবহৃত ক্রিয়াগুলি প্রসঙ্গ মেনুর পিছনে লুকানো থাকে।

এই পরীক্ষামূলক UX রিডিজাইন ব্রেকপয়েন্টস প্যানে কাঠামো নিয়ে আসে এবং ডেভেলপারদের ব্রেকপয়েন্ট সম্পাদনা এবং অপসারণের মতো সাধারণভাবে ব্যবহৃত বৈশিষ্ট্যগুলিতে দ্রুত অ্যাক্সেসের সুযোগ দেয়।

এখানে কিছু হাইলাইটস দেওয়া হল:

  • উভয় বিরতি বিকল্প ব্রেকপয়েন্ট প্যানে রয়েছে। এগুলিতে স্পষ্ট টেক্সট লেবেল রয়েছে যা বিকল্পগুলিকে স্ব-ব্যাখ্যামূলক করে তোলে।
  • ব্রেকপয়েন্টগুলিকে ফাইল অনুসারে গোষ্ঠীভুক্ত করা হয়, লাইন বা কলাম নম্বর অনুসারে সাজানো হয়। আপনি এগুলিকে সংকোচন এবং প্রসারিত করতে পারেন।**
  • ব্রেকপয়েন্ট প্যানে ব্রেকপয়েন্ট বা ফাইলের নামের উপর ঘোরানোর সময় ব্রেকপয়েন্ট অপসারণ এবং সম্পাদনা করার জন্য নতুন বিকল্প।

আমাদের RFC (বন্ধ) তে সম্পূর্ণ পরিবর্তনগুলি পড়ুন এবং আপনার প্রতিক্রিয়া এখানে জানান।

পুনঃডিজাইনের আগে এবং পরে ব্রেকপয়েন্ট ফলকটি দেখান।

ক্রোমিয়াম সমস্যা: ১৩৪৬২৩১ , ১৩২৪৯০৪

[পরীক্ষামূলক] স্বয়ংক্রিয়ভাবে ইন-প্লেস প্রিটি প্রিন্ট

সোর্স প্যানেল এখন স্বয়ংক্রিয়ভাবে মিনিফাই করা সোর্স ফাইলগুলিকে প্রিটি-প্রিন্ট করে। আপনি এটি পূর্বাবস্থায় ফেরাতে প্রিটি প্রিন্ট বোতাম { } ক্লিক করতে পারেন।

পূর্বে, সোর্স প্যানেলে ডিফল্টভাবে মিনিফাই করা কন্টেন্ট দেখাত। কন্টেন্ট ফরম্যাট করার জন্য আপনাকে ম্যানুয়ালি প্রিটি প্রিন্ট বোতামে ক্লিক করতে হত। তার উপরে, প্রিটি-প্রিন্ট করা কন্টেন্ট একই ফাইলে প্রদর্শিত হত না, বরং অন্য একটি ::formatted ট্যাবে প্রদর্শিত হত।

স্বয়ংক্রিয়ভাবে ইন-প্লেস প্রিটি প্রিন্টের আগে এবং পরে একটি মিনিফাই করা ফাইল দেখান।

ক্রোমিয়াম সমস্যা: ১১৬৪১৮৪

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

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

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

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

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

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