DevTools ডাইজেস্ট - দক্ষ উপাদান সম্পাদনা, পরিষেবা কর্মী ডিবাগিং, এবং উপাদান নকশা শেড

দক্ষতার সাথে নোড সম্পাদনা করতে DOM প্যানেলের নতুন প্রসঙ্গ মেনু ব্যবহার করুন। রিসোর্স প্যানেলের মাধ্যমে সরাসরি পরিষেবা কর্মীদের ডিবাগ করুন। কালারপিকারে ম্যাটেরিয়াল ডিজাইনের সমস্ত শেড থেকে বেছে নিন। ব্ল্যাকবক্স জেএস লাইব্রেরি আরও সহজে।

DOM প্যানেলের নতুন, উন্নত প্রসঙ্গ মেনু

তিনি নতুন DOM প্রসঙ্গ মেনু।

আমরা DOM প্যানেলে সর্বাধিক ব্যবহৃত ক্রিয়াগুলি বিশ্লেষণ করেছি এবং এই সিদ্ধান্তে পৌঁছেছি যে ডান-ক্লিক প্রসঙ্গ মেনুটি অগোছালো এবং পুনরায় সংগঠিত হওয়া উচিত।

একটি উপাদানকে দ্রুত লুকানো বা মুছে ফেলা, একটি নির্দিষ্ট অবস্থা যেমন :active বা :হোভার করা বা এর HTML সম্পাদনা করা এখন অনেক সহজ। এবং যদি আপনি একটি ট্র্যাকপ্যাডে থাকেন এবং ডান-ক্লিক করতে বিরক্ত না করতে চান, তবে পরিবর্তে নির্বাচিত উপাদানটির পাশে তিনটি ছোট বিন্দুতে ক্লিক করুন।

রিসোর্স প্যানেলের মাধ্যমে পরিষেবা কর্মীদের ডিবাগ করুন

পরিষেবা কর্মীরা একবার তাদের সেট আপ করার পরে দুর্দান্ত তবে তারা প্রথম দিকে আপনার মাথা মোড়ানো কঠিন হতে পারে। এটিকে আরও খারাপ করা হয়েছিল যে তাদের ডিবাগ করার জন্য DevTools ছেড়ে যাওয়া এবং একটি নতুন ব্রাউজার উইন্ডোতে chrome://serviceworker-internals/ খুলতে হবে৷

সম্পদে পরিষেবা কর্মী

আর না! এখন আপনি রিসোর্স প্যানেল থেকে সরাসরি বর্তমান ডোমেনের জন্য পরিষেবা কর্মীদের ডিবাগ করতে পারেন৷ এটি এখনও একটি কাজ-প্রগতিশীল, কিন্তু ইতিমধ্যেই আগের স্থিতাবস্থা থেকে একটি ভারী উন্নতি।

সব রং: রঙ পিকার মধ্যে উপাদান নকশা ছায়া গো

কয়েক সপ্তাহ আগে , আমরা আপনাকে কালারপিকারে ম্যাটেরিয়াল ডিজাইন প্যালেট যুক্ত করেছি, যাতে আপনাকে প্রাথমিক, গাঢ় রঙগুলি বাক্সের বাইরে থাকে৷ প্রকৃতপক্ষে একটি সম্পূর্ণ পৃষ্ঠা ডিজাইন করার জন্য, আপনার অনিবার্যভাবে সমস্ত উপাদান ডিজাইনের শেডগুলিতে সম্পূর্ণ অ্যাক্সেসের প্রয়োজন, তাই আমরা সেগুলিকে বেক করেছি৷

শেডগুলি আনতে, প্রাথমিক রঙগুলির একটিতে দীর্ঘক্ষণ টিপুন এবং পরিবর্তে একটি ছায়ায় ক্লিক করুন৷

ব্ল্যাকবক্স জাভাস্ক্রিপ্ট লাইব্রেরি সেটিংসে আরও সহজে

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

আমরা এখন সেটিংসে সরিয়ে নিয়েছি। একবার চেষ্টা করে দেখো:

ব্ল্যাকবক্সিং

বাকিদের সেরা

  • রেন্ডারিং টগলগুলিতে অ্যাক্সেস অনুপস্থিত? রেন্ডারিং সেটিংস DevTools প্রধান মেনুতে সরানো হয়েছে (“আরো টুলস”-এর অধীনে)। সাধারন সন্দেহভাজনদের (যেমন FPS মিটার) ছাড়াও, আমরা সেখানেও “ইমুলেট প্রিন্ট মিডিয়া” সরিয়ে নিয়েছি।
  • অম্নিবক্সে chrome://inspect টাইপ করে ক্লান্ত? ডিভাইস পরিদর্শন এখন "আরো সরঞ্জাম" এর অধীনে নতুন প্রধান মেনুতে পাওয়া যাবে।
  • রেন্ডারিং বা অনুসন্ধানের মতো এই বন্ধযোগ্য ড্রয়ার ট্যাবগুলির একটি দুর্ঘটনাক্রমে বন্ধ হয়ে গেছে? আপনি এখন বাম দিকের নতুন মেনু দিয়ে সেগুলি আবার খুলতে পারেন৷

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

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