DevTools ডাইজেস্ট ডিসেম্বর 2013

বেশ কয়েকটি আপডেট করা বৈশিষ্ট্য এটিকে Chrome DevTools-এ সম্প্রতি কিছু ছোট, কিছু বড় করে তুলেছে৷ আমরা এলিমেন্ট প্যানেলের আপডেটগুলি দিয়ে শুরু করব এবং কনসোল, টাইমলাইন এবং আরও অনেক কিছু সম্পর্কে কথা বলতে এগিয়ে যাব৷

অক্ষম শৈলী নিয়ম কপি হিসাবে আউট মন্তব্য

শৈলী ফলকে সম্পূর্ণ CSS নিয়মগুলি অনুলিপি করা হলে এখন আপনি যে শৈলীগুলি টগল করেছেন তা অন্তর্ভুক্ত করবে, সেগুলি আপনার ক্লিপবোর্ডে মন্তব্য করা হিসাবে উপস্থিত থাকবে। [ crbug.com/316532 ]

CSS পাথ হিসেবে কপি করুন

'CSS পাথ হিসাবে কপি করুন' এখন এলিমেন্টস প্যানেলে DOM নোডের জন্য একটি মেনু আইটেম হিসাবে উপলব্ধ (কপি XPath মেনু আইটেমের অনুরূপ)।

CSS পাথ কপি করুন।

CSS নির্বাচকদের জেনারেশন আপনার স্টাইলশীট/জাভাস্ক্রিপ্টের মধ্যে সীমাবদ্ধ থাকতে হবে না, তারা ওয়েবড্রাইভার পরীক্ষায় লোকেটার কৌশলগুলির বিকল্পও হতে পারে। [ crbug.com/277286 ]

ছায়া DOM উপাদান শৈলী দেখুন

ছায়া গোড়ার শিশু উপাদানগুলি এখন তাদের শৈলী পরিদর্শন করতে পারে। [ crbug.com/279390 ]

কনসোলের অনুলিপি() বস্তুর জন্য কাজ করে

কমান্ড লাইন API থেকে কপি() পদ্ধতিটি এখন অবজেক্টের জন্য কাজ করে। এগিয়ে যান এবং কনসোল প্যানেলে copy({foo:'bar'}) চেষ্টা করুন এবং লক্ষ্য করুন কিভাবে আপনার ক্লিপবোর্ডে অবজেক্টের একটি স্ট্রিংফাইড এবং ফর্ম্যাট করা সংস্করণ এখন রয়েছে। [ crbug.com/289348 ]

কনসোলের জন্য Regex ফিল্টার

কনসোল প্যানেলে রেগুলার এক্সপ্রেশন ব্যবহার করে কনসোল বার্তাগুলি ফিল্টার করুন। crbug.com/318308 ]

ইভেন্ট শ্রোতাদের সহজেই সরান

getEventListeners(document).mousewheel[0]; নথিতে প্রথম মাউসহুইল ইভেন্ট লিসেনার পুনরুদ্ধার করতে কনসোল প্যানেলে। এটি থেকে চালিয়ে যেতে, $_.remove() চেষ্টা করুন; সেই ইভেন্ট শ্রোতাকে অপসারণ করতে ( $_ = অতি সম্প্রতি মূল্যায়ন করা অভিব্যক্তির মান)। crbug.com/309524 ]

CSS সতর্কতা অপসারণ

" অবৈধ CSS সম্পত্তি মান " -শৈলী সতর্কতাগুলি আপনি হয়তো দেখেছেন এখন মুছে ফেলা হয়েছে৷ ব্রাউজার হ্যাক সহ বাস্তব বিশ্বের CSS এর বিরুদ্ধে বাস্তবায়নকে আরও শক্তিশালী করার জন্য চলমান প্রচেষ্টা চলছে। crbug.com/309982 ]

টাইমলাইন অপারেশন পাই চার্টে সংক্ষিপ্ত করা হয়েছে

টাইমলাইন অপারেশন চার্ট

টাইমলাইন প্যানেলে এখন বিশদ প্যানেলে একটি পাই চার্ট রয়েছে যা দৃশ্যত আপনার রেন্ডারিং খরচের উত্স দেখায় - এটি আপনাকে এক নজরে আপনার বাধাগুলি সনাক্ত করতে সহায়তা করে৷

আপনি দেখতে পাবেন যে অনেক তথ্য যা পপোভারে প্রদর্শিত হত এখন তার নিজস্ব ফলকে উন্নীত করা হয়েছে। দেখতে, একটি টাইমলাইন রেকর্ডিং শুরু করুন এবং একটি ফ্রেম নির্বাচন করুন, নতুন বিবরণ ফলকটি নোট করুন যাতে একটি পাই চার্ট রয়েছে৷ ফ্রেম দৃশ্যে থাকাকালীন, আপনি নির্বাচিত ফ্রেমের জন্য গড় FPS ( 1000ms/frame duration ) এর মতো আকর্ষণীয় পরিসংখ্যান পাবেন। [ crbug.com/247786 ]

ইভেন্টের চিত্রের আকার পরিবর্তন করুন

টাইমলাইন প্যানেলে ইমেজ রিসাইজ এবং ডিকোড ইভেন্টগুলিতে এখন এলিমেন্টস প্যানেলে DOM নোডের একটি লিঙ্ক রয়েছে।

চিত্রের আকার পরিবর্তনের বিশদ

ছবির URL লিঙ্ক আপনাকে সম্পদ প্যানেলের সংশ্লিষ্ট সংস্থানে নিয়ে যায়। crbug.com/244159 ]

জিপিইউ ফ্রেম

GPU-তে ঘটতে থাকা ফ্রেমগুলি এখন প্রধান থ্রেডের ফ্রেমের উপরে, উপরে দেখানো হয়েছে। crbug.com/305863 ]

পপস্টেট শ্রোতাদের উপর বিরতি

'popstate' এখন উৎস প্যানেল সাইডবারে একটি ইভেন্ট লিসেনার ব্রেকপয়েন্ট হিসেবে উপলব্ধ। [ crbug.com/88112 ]

রেন্ডারিং সেটিংস ড্রয়ারে উপলব্ধ

ড্রয়ার খোলার ফলে এখন অনেকগুলি প্যানেল রয়েছে, যার মধ্যে একটি হল রেন্ডারিং প্যানেল, পেইন্ট আয়তক্ষেত্র, এফপিএস মিটার ইত্যাদি দেখানোর জন্য এটি ব্যবহার করুন৷ এটি ডিফল্টরূপে সেটিংস > "কনসোল ড্রয়ারে 'রেন্ডারিং' ভিউ দেখান" এ সক্ষম হয়৷

ডেটা URL হিসেবে ছবি কপি করুন

ডেটা ইউআরএল হিসাবে ছবি কপি করুন

রিসোর্স প্যানেলে ইমেজ অ্যাসেটগুলি এখন ডেটা URI ( data:image/png;base64,iVBO... ) হিসাবে কপি করতে পারে।

এটি চেষ্টা করার জন্য, ফ্রেম > [সম্পদ] > চিত্রগুলির মধ্যে চিত্র সংস্থানটি খুঁজুন এবং প্রসঙ্গ মেনু অ্যাক্সেস করতে চিত্রের পূর্বরূপটিতে ডান ক্লিক করুন, তারপর 'ডাটা URL হিসাবে চিত্রটি অনুলিপি করুন' নির্বাচন করুন। crbug.com/321132 ]

ডেটা URI ফিল্টারিং

আপনি যদি কখনও ভাবেন না যে সেগুলি অন্তর্গত, ডেটা URIগুলি এখন নেটওয়ার্ক ট্যাব থেকে ফিল্টার করা যেতে পারে৷ ফিল্টার আইকন নির্বাচন করুন

ফিল্টার আইকন
অন্যান্য রিসোর্স ফিল্টার প্রকার দেখতে। crbug.com/313845 ]

ডেটা URI ফিল্টারিং

নেটওয়ার্ক টাইমিং বাগ সংশোধন করা হয়েছে

আপনি যদি দেখেন যে আপনার ছবিটি দৃশ্যত ডাউনলোড হতে 300,000 বছর সময় নেয়, আমাদের ক্ষমাপ্রার্থী। ;) নেটওয়ার্ক সংস্থানগুলির জন্য এই ভুল সময়গুলি এখন ঠিক করা হয়েছে৷ crbug.com/309570 ]

নেটওয়ার্ক রেকর্ডিং আচরণ আরো নিয়ন্ত্রণ আছে

রেকর্ডিং নেটওয়ার্কের আচরণ একটু ভিন্ন। প্রথমত, রেকর্ড বোতামটি ঠিক তেমন কাজ করে যেমন আপনি টাইমলাইন বা একটি CPU প্রোফাইল থেকে আশা করেন। এবং যেহেতু আপনি এটি আশা করতে চান, আপনি যদি DevTools খোলা থাকা অবস্থায় পৃষ্ঠাটি পুনরায় লোড করেন, নেটওয়ার্ক রেকর্ডিং স্বয়ংক্রিয়ভাবে শুরু হবে। তারপরে এটি বন্ধ হয়ে যাবে, তাই আপনি যদি পৃষ্ঠা লোড হওয়ার পরে নেটওয়ার্ক কার্যকলাপ ক্যাপচার করতে চান তবে এটি চালু করুন। এটি দেরী-ব্রেকিং নেটওয়ার্ক অনুরোধ ছাড়াই আপনার জলপ্রপাতকে কল্পনা করা সহজ করে তোলে ফলাফলগুলিকে তির্যক করে। crbug.com/325878 ]

DevTools থিমগুলি এখন এক্সটেনশনের মাধ্যমে উপলব্ধ৷

ব্যবহারকারীর স্টাইলশীটগুলি এখন DevTools পরীক্ষা-নিরীক্ষার মাধ্যমে উপলব্ধ (চেকবক্স: "কাস্টম UI থিমগুলিকে অনুমতি দিন") যা একটি Chrome এক্সটেনশনকে DevTools-এ কাস্টম স্টাইলিং প্রয়োগ করার অনুমতি দেয়৷ একটি উদাহরণের জন্য নমুনা DevTools থিম এক্সটেনশন দেখুন। crbug.com/318566 ]

DevTools ডাইজেস্টের এই সংস্করণের জন্য এটিই, যদি আপনি ইতিমধ্যে না করে থাকেন তবে নভেম্বর সংস্করণটি দেখুন।