জানুন কিভাবে DevTools সর্বদা চালু থাকা একটি নতুন, স্ট্রিমলাইনড ডিভাইস মোডের মাধ্যমে প্রথমে মোবাইলে যাচ্ছে। আপনার নির্বাচকদের সাথে দ্রুত রঙ যোগ করতে এবং শীঘ্রই DevTools-এ কী আসছে তা খুঁজে বের করতে রঙ বোতাম ব্যবহার করুন।
লেখকের ভবিষ্যতের একটি আভাস
আমরা এইমাত্র Chrome ডেভ সামিট থেকে ফিরে আসছি যেখানে আমি আপনাকে দেখিয়েছি যে DevTools-এর সাথে কাজ করা আজ এবং ভবিষ্যতে কেমন হবে৷ আমি সাধারণত এমন কোনো বৈশিষ্ট্য উল্লেখ করি না যা এখনও এই ডাইজেস্টে পরীক্ষা-নিরীক্ষা বা অগ্রগতির ভারী কাজ কিন্তু আমি এবার ব্যতিক্রম করছি। আপনার কাছে পুরো আলোচনা দেখার সময় না থাকলে, এখানে সারাংশটি দেওয়া হল:
ডিভাইস মোড সংস্করণ 2
আমরা এখনও ডিভাইস মোডের এই নতুন, সাহসী পুনরাবৃত্তির উপর ব্যাপকভাবে কাজ করছি কিন্তু প্রত্যেককে এটি চেষ্টা করার সুযোগ দিতে চাই, তাই আমরা আজ এটিকে আপনার ক্যানারিতে সক্ষম করেছি। পরিবর্তনগুলির সাথে, আমরা DevToolsকে একটি মোবাইল-প্রথম ভবিষ্যতের দিকে ঠেলে দিচ্ছি যেখানে মোবাইল ডেভেলপমেন্ট ডিফল্ট এবং ডেস্কটপ ডেভেলপমেন্ট হল "অ্যাড-অন"। আমরা শেষ হয়ে গেলে পরবর্তী কয়েক সপ্তাহে একটি বর্ধিত ব্লগ পোস্টের সাথে আরও পুনরাবৃত্তির প্রত্যাশা করুন৷
শক্তিশালী অ্যানিমেশন পরিদর্শন
কাজ চলাকালীন অ্যানিমেশন পরিদর্শন আপনাকে একটি পূর্ণ, বিশদ চিত্র দেয় যে কোনও চলন্ত কিছুতে কী ঘটছে। আপনাকে একবারে একটি উপাদানে একটি রূপান্তর দেখানোর পরিবর্তে, আমরা জটিল অ্যানিমেশনগুলিকে গোষ্ঠীবদ্ধ করে এমন হিউরিস্টিক যোগ করেছি যাতে আপনি যা দেখছেন তার উপর ফোকাস করতে পারেন। ভিডিওটি দেখুন। আমরা সম্পূর্ণরূপে চালু হলে আমরা একটি বড়, স্বতন্ত্র ব্লগ পোস্ট অফার করব৷
লেআউট মোড (একদম ঝলক)
প্রাইম টাইমের জন্য পুরোপুরি প্রস্তুত নয় তবে খুব আশাব্যঞ্জক হল নতুন লেআউট মোড, এমন একটি বৈশিষ্ট্য যা আমি সম্পূর্ণরূপে তৈরি দেখার জন্য অপেক্ষা করতে পারি না। লেআউট মোড পৃষ্ঠার যেকোনো উপাদানের জন্য DevTools-এ WYSIWYG সম্পাদনা ক্ষমতা যোগ করে। এখন পর্যন্ত, উচ্চতা, প্রস্থ, প্যাডিং এবং মার্জিন প্রসঙ্গে সম্পাদনা করা যেতে পারে। আমরা আপনাকে চেষ্টা করার জন্য প্রস্তুত না হওয়া পর্যন্ত এটি একটু বেশি সময় নিতে চলেছে তবে আমরা আপনাকে আপডেট রাখব৷
আপডেট করা টাইমলাইন প্যানেলের সাথে পারফরম্যান্স প্রোফাইলিং
নতুন RAIL পারফরম্যান্স মডেল প্রবর্তনের একটি বৃহত্তর ধাক্কার অংশ হিসাবে, টাইমলাইন প্যানেলে শতাধিক ছোট এবং বড় পরিবর্তন হয়েছে, এবং একসাথে তারা পারফরম্যান্স প্রোফাইলিং গল্পটিকে বেশ খানিকটা রূপান্তর ও উন্নতি করেছে। তাই বিচ্ছিন্নতার প্রতিটি স্বতন্ত্র পরিবর্তন দেখানোর পরিবর্তে, আমাদের নিজস্ব পল আইরিশ আমাদের দেখিয়েছেন কীভাবে একটি সাইটের কার্যকারিতা সঠিকভাবে ডিবাগ করতে হয়, এই ক্ষেত্রে হোটেল টুনাইটের মোবাইল সাইট, স্টেজে লাইভ। নতুন ঘোষিত বৈশিষ্ট্যগুলির মধ্যে রয়েছে লোড এবং পারফরম্যান্স ফিল্ম স্ট্রিপস , অন্তর্ভুক্ত নেটওয়ার্ক জলপ্রপাত , ট্রিভিউ সারাংশ এবং ডোমেন এবং ফাইল দ্বারা পারফ খরচ দেখার ক্ষমতা।
যেকোনো উপাদানে সহজেই অগ্রভাগ এবং পটভূমির রং যোগ করুন
যখনই আপনি আপনার উপাদানটিতে একটি পটভূমি-রঙ বা রঙের বৈশিষ্ট্য যুক্ত করতে চান, আপনি কেবল রঙ চয়নকারী খুলতে পারেন না। পরিবর্তে, আপনার বেশিরভাগই "ব্যাকগ্রাউন্ড: লাল;" এর মতো কিছু টাইপ করেন প্রতিবার যাতে রঙ চয়নকারী আইকনটি উপস্থিত হয়, তারপরে আপনি যে রঙটি চান তা চয়ন করুন।
আমরা ভেবেছিলাম আমরা এটি সহজ করতে পারি। আমরা দুটি নিফটি বোতাম যুক্ত করেছি যা একটি নির্বাচকের নীচের ডানদিকে কোণায় ঘোরার সময় প্রদর্শিত হয়, যা আপনাকে একটি রঙ যোগ করতে এবং একক ক্লিকে বাছাইকারীকে আনতে দেয়:
বাকিদের সেরা
- আমরা স্টাইল প্যানেলে জেনেরিক মিডিয়া প্রকারগুলি দেখিয়ে পূর্ববর্তী অনেক রিয়েল এস্টেট নষ্ট করেছি৷ আমরা এখন আপনার নির্বাচকদের সামনে সেই জিনিসগুলি লুকিয়ে রাখি যদি এটি অস্বাভাবিক না হয়!
- আপনি এখন স্টাইল প্যানেলে একটি CSS নির্বাচকের উপর দীর্ঘক্ষণ হোভার করে দেখতে পারেন যে পৃষ্ঠার কতগুলি উপাদান এটি প্রযোজ্য।
- এখনো মুদ্রণ ছেড়ে দেননি? প্রিন্ট মিডিয়া ইমুলেশন এখনও দেখতে আপনার পৃষ্ঠাটি প্রিন্ট করার সময় কেমন হবে তা দেখতে - আমরা এটিকে রেন্ডারিং সেটিংসে সরিয়ে নিয়েছি।
- পরিদর্শন করার জন্য একটি উপাদান নির্বাচন করার সময়, আমরা এখন প্রাসঙ্গিক DOM সাব ট্রিটি স্বয়ংক্রিয়ভাবে প্রসারিত এবং বন্ধ করি। বোঝানো কঠিন, দেখলেই বিশ্বাস হয় ।
বরাবরের মতো, টুইটার বা নীচের মন্তব্যের মাধ্যমে আপনি কী মনে করেন তা আমাদের জানান এবং crbug.com/new এ বাগ জমা দিন।
আগামী মাস পর্যন্ত!
Paul Bakaus এবং DevTools টিম