DevTools ডাইজেস্ট - সমষ্টিগত টাইমলাইন বিবরণ, রঙ প্যালেট এবং আরও অনেক কিছু

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


ভাল ব্লেম পারফ সমস্যা: টাইমলাইনে একত্রিত বিবরণ

টাইমলাইনে একত্রিত বিবরণ

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

সমষ্টিগত বিবরণ ট্যাবে, আপনি শুধুমাত্র ব্যয়বহুল ফাংশন বা সম্পূর্ণ কল ট্রিতে ফোকাস করতে পারেন, তারপর ডোমেন, সাব-ডোমেন বা স্বতন্ত্র URL দ্বারা নির্বাচিত ডেটা ভেঙে ফেলতে পারেন। উদাহরণস্বরূপ, একটি পৃষ্ঠা লোডের উপরের টাইমলাইনে, আপনি এখন facebook.net বা twitter.com-এর মতো ডোমেনগুলি থেকে আসা তৃতীয় পক্ষের স্ক্রিপ্টগুলিকে সহজেই স্লো-ডাউনগুলিকে দায়ী করতে পারেন৷

নতুন, উত্সর্গীকৃত প্রধান মেনু

নতুন প্রধান মেনু।

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

বিশেষ করে ডকিং অনেক সহজ হয়ে গেছে। আগের আইকনে দীর্ঘক্ষণ প্রেস করার পরিবর্তে, প্রতিটি ডকিং পজিশনের নিজস্ব আইকন রয়েছে।

ডকিং ছাড়াও, আমরা দ্রুত অ্যাক্সেস ফাইল অনুসন্ধান, শর্টকাট এবং সহায়তা যোগ করেছি (যা আমাদের নতুন হোমপেজে নিয়ে যায়)।

উন্নত টুলটিপের মাধ্যমে DevTools আবিষ্কার করুন

নতুন টুলটিপস।

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

নতুন টুলটিপগুলি আরও দ্রুত প্রদর্শিত হয় এবং কীবোর্ড শর্টকাটগুলি অন্তর্ভুক্ত করে (যদি থাকে)।

কাস্টম নেটওয়ার্ক থ্রটলিং প্রোফাইল তৈরি করুন

কাস্টম নেটওয়ার্ক প্রোফাইল।

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

স্বয়ংক্রিয়, উপাদান এবং কাস্টম রঙ প্যালেট

আপনি জাদুর রঙগুলি পুনরায় তৈরি করতে চান বা বিদ্যমান রঙের প্যালেটের সাথে কাজ করতে চান না কেন, উন্নত কালারপিকার আপনাকে আপনার সাইটের জন্য একটি সামঞ্জস্যপূর্ণ রঙ প্যালেট বাছাই করতে সহায়তা করে৷

প্যালেটের পাশের ছোট্ট সুইচার আইকনে ক্লিক করে, আপনি নিম্নলিখিতগুলি থেকে চয়ন করতে পারেন:

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

আপনি কি মনে করেন আমাদের বলুন , এবং আমরা কীভাবে রঙের গল্পটি আরও প্রসারিত করতে পারি।

বাকিদের সেরা

  • fetch() API ব্যবহার করে করা অনুরোধগুলি এখন নেটওয়ার্ক প্যানেলে দেখানো হয়েছে
  • স্বয়ংক্রিয় প্যানেল লেআউটিং নিশ্চিত করে যে আপনি যখন আপনার DevTools এর আকার পরিবর্তন করবেন
    প্যানেলগুলি নতুন স্থানের সীমাবদ্ধতার সাথে খাপ খাইয়ে নেয়।
  • পরিদর্শন উপাদান এবং ডিভাইস মোড নতুন আইকন একটি সেট আছে.
  • নোড হাইলাইট করার পরেও DOM প্যানেলের বৈশিষ্ট্যগুলি এখন ভিন্ন রঙের হয়। (তারা আগে যেখানে সব সাদা।)
  • লুকানো উপাদানগুলি (একটি নির্বাচিত DOM নোডে "h" টিপে সক্রিয়) এখন বাম দিকে একটি ধূসর বৃত্ত নির্দেশক দেখায় এবং DOM ব্রেকপয়েন্টগুলি একটি নীল বৃত্তের সাথে একই কাজ করে৷ (এটি কমলা সূচকগুলির সাথে সাদৃশ্যপূর্ণ যা আমরা ইতিমধ্যেই : hover এর মত একটি উপাদান অবস্থা জোর করার জন্য আছে)।

বরাবরের মতো, টুইটার বা নীচের মন্তব্যের মাধ্যমে আপনি কী মনে করেন তা আমাদের জানান এবং crbug.com/new এ বাগ জমা দিন।

আগামী মাস পর্যন্ত!
Paul Bakaus এবং DevTools টিম