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

জেসেলিন ইয়েন

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

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

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

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

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

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

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

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

পারফরম্যান্স প্যানেল এখন প্রকৃত ফাংশনের নাম এবং তাদের উত্সগুলি ট্রেসে দেখায় যদি কোনও উত্স মানচিত্র থাকে৷

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

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

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

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

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

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

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

আপনি সোর্স প্যানেলে ট্যাবগুলির মধ্যে স্যুইচ করতে পারেন: MacOS-এ, ফাংশন + কমান্ড + অ্যারো আপ এবং ডাউন উইন্ডোজ এবং লিনাক্সে, কন্ট্রোল + পৃষ্ঠা উপরে বা নীচে

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

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

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

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

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

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

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

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

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

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

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

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

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

এই কয়েকটি হাইলাইট:

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

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

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

ক্রোমিয়াম সমস্যা: 1346231 , 1324904

[পরীক্ষামূলক] স্বয়ংক্রিয় জায়গায় সুন্দর প্রিন্ট

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

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

স্বয়ংক্রিয় জায়গায় সুন্দর মুদ্রণের আগে এবং পরে একটি ছোট ফাইল দেখান।

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

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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