Chrome DevTools দ্রুত চলে এবং আমরা কিছু উপাদানের সাথে পরিচয় করিয়ে দিয়েছি এমন কিছু নতুন কার্যকারিতা এবং উন্নতির দিকে আপনার দৃষ্টি আকর্ষণ করতে চাই। যথা, আমরা কিছু UI পরিবর্তন, উচ্চ-রেজোলিউশন JS প্রোফাইলিং এবং নতুন ওয়ার্কস্পেস বৈশিষ্ট্য সম্পর্কে কথা বলতে যাচ্ছি।
- উচ্চ-রেজোলিউশন প্রোফাইলিং এখন .1 মিলিসেকেন্ড নির্ভুলতায় যায়৷
- টুলবারগুলি Devtools এর শীর্ষে উঠেছে এবং ওভাররাইডগুলি কনসোল ড্রয়ারে সরানো হয়েছে৷
- ওয়ার্কস্পেস ফাইল যোগ/সরানো/অনুসন্ধান সমর্থন করার জন্য বেশ কিছু বৈশিষ্ট্য যোগ করেছে
উচ্চ-রেজোলিউশন প্রোফাইলিং
আপনার জাভাস্ক্রিপ্ট কতটা দক্ষ তা দেখার জন্য সিপিইউ প্রোফাইলিং একটি খুব দরকারী বৈশিষ্ট্য। প্রথাগত প্রোফাইল ভিউ ছাড়াও, আমরা এই গ্রীষ্মে একটি ফ্লেম চার্ট প্রবর্তন করেছি, যা সময়ের সাথে সাথে একটি পৃষ্ঠার জাভাস্ক্রিপ্ট প্রক্রিয়াকরণকে দৃশ্যমানভাবে উপস্থাপন করে। এটি সহজেই দেখতে ব্যবহার করা যেতে পারে যে আপনার কল স্ট্যাক কত গভীরে যাচ্ছে সেইসাথে পৃথক ফাংশনগুলি প্রক্রিয়া করতে কতক্ষণ সময় নেয়।
সম্প্রতি পর্যন্ত, উভয় ঐতিহ্যবাহী ভারী (নিচে উপরে) এবং ট্রি (উপরের নিচে) উপস্থাপনা, সেইসাথে শিখা চার্ট, শুধুমাত্র 1 মিলিসেকেন্ড নির্ভুলতা নিচে প্রসেস দেখাবে। বেশিরভাগ অ্যাপ্লিকেশনের জন্য, এটি ঠিক আছে। যাইহোক, আপনি যদি এমন কিছু নিয়ে কাজ করেন যেখানে গতি সত্যিই UI-তে গুরুত্বপূর্ণ, যেমন একটি গেম -- 1 মিলিসেকেন্ড রেজোলিউশন আপনার সাইটকে ধীরগতির কারণ বা আপনার UI কে পিছিয়ে দেওয়ার জন্য অর্থপূর্ণ ফলাফল পেতে খুব কম হতে পারে। উচ্চ রেজোলিউশন প্রোফাইলিং সক্ষম করতে (বর্তমানে শুধুমাত্র ক্যানারি):
- DevTools সেটিংস খুলুন।
- সাধারণ ট্যাবে, প্রোফাইলারের অধীনে, উচ্চ রেজোলিউশনের CPU প্রোফাইলিং চালু করুন।
এখানে সাধারণ প্রোফাইলিং এবং উচ্চ রেজোলিউশনের সাথে দেখা একটি ফ্লেম চার্টের একটি উদাহরণ রয়েছে, যেখানে আমরা HTML5Rocks.com হোম পেজ লোড করার প্রোফাইল করি:
স্বাভাবিক প্রোফাইলিং রেজোলিউশনের সাথে, প্রক্রিয়ার সময় সর্বদা পরবর্তী মিলিসেকেন্ড পর্যন্ত বৃত্তাকার হয়, তাই একটি প্রক্রিয়া যা শুধুমাত্র 0.1 মিলিসেকেন্ড বা তার কম সময় নেয় তা এখনও 1.0 মিলিসেকেন্ড নেওয়ার হিসাবে রিপোর্ট করা হয় এবং অন্যান্য প্রক্রিয়াগুলি কল স্ট্যাকে মোটেও দেখানো নাও হতে পারে।
জাভাস্ক্রিপ্ট ভিএম-এ উচ্চ-রেজোলিউশন প্রোফাইলিংয়ের একটি বড় ওভারহেড রয়েছে, যে কারণে এটি ডিফল্টরূপে বন্ধ থাকে। যদিও এটি অবশ্যই স্বাভাবিক প্রোফাইলিং রেজোলিউশনের চেয়ে শীতল দেখায়, আমরা শুধুমাত্র এটি ব্যবহার করার পরামর্শ দিই যদি আপনার সত্যিই নির্ভুলতার প্রয়োজন হয়।
Devtools UI উন্নতি
যদিও ক্যানারিতে সবসময় নতুন জিনিস আনা হচ্ছে, আমরা কিছু বড় UI পরিবর্তনের দিকে আপনার দৃষ্টি আকর্ষণ করতে চাই: সাধারণভাবে UI-এর শীর্ষে থাকা বোতামগুলি, টাইমলাইন নেভিগেশন এবং তথ্য প্যানেল, এবং ওভাররাইডের স্থানান্তর কনসোল ড্রয়ার।
প্রথমে, আসুন আমরা কোথা থেকে আসছি তা একবার দেখে নেওয়া যাক। কারণ আমরা যাইহোক টাইমলাইন সম্পর্কে কথা বলছি, আমি এক জোড়া স্ক্রিনশট দিয়ে প্রথম দুটি পাখি মারার চেষ্টা করব। এই মুহূর্তে ক্রোমে (স্থিতিশীল) টাইমলাইন কেমন দেখাচ্ছে:
এবং টাইমলাইন এখন কেমন দেখাচ্ছে তা এখানে।
নিম্নলিখিত বিষয়গুলি লক্ষ্য করুন:
- টুলবার এবং বোতামগুলি এখন স্ক্রিনের শীর্ষে রয়েছে, বাম দিকের নির্দিষ্ট টাইমলাইনগুলির জন্য এবং ডানদিকে সাধারণ DevToolsগুলির জন্য৷
- টাইমলাইন রেকর্ডগুলির এখন বাম দিকের প্যানেলে তাদের নেস্টিং কাঠামো রয়েছে এবং আপনি তাদের মাধ্যমে স্ক্রোল করতে কীবোর্ড ব্যবহার করতে পারেন। উপরে এবং নীচে স্ক্রোল করার জন্য আপ এবং ডাউন কীগুলি ব্যবহার করার পাশাপাশি, আপনি নেস্টেড রেকর্ডগুলি খুলতে এবং বন্ধ করতে বাম এবং ডান কীগুলিও ব্যবহার করতে পারেন।
- আপনি যে এন্ট্রি নির্বাচন করেছেন তার জন্য ডানদিকের একটি প্যানেলে সময়ের বিবরণ এখন প্রদর্শিত হয়৷ (আপনি তাদের তথ্য পেতে অন্যান্য এন্ট্রিতেও ঘুরতে পারেন।)
এখন কনসোল ড্রয়ারটি দেখে নেওয়া যাক। কনসোল ড্রয়ার খুলতে, DevTools এর মধ্যে থেকে Escape টিপুন বা কনসোল ড্রয়ার বোতাম টিপুন 
এবং ড্রয়ারটি নিচ থেকে উপরে উঠছে।
ডিফল্টরূপে, আপনার সেখানে কনসোল এবং অনুসন্ধান ট্যাব থাকবে। পূর্বে ওভাররাইড নামে পরিচিত কার্যকারিতা পেতে, DevTools সেটিংস খুলুন এবং "কনসোল ড্রয়ারে 'ইমুলেশন' ভিউ দেখান" এর পাশের বাক্সটি চেক করুন। সেটিংস বক্সটি বন্ধ করুন এবং আপনার কাছে এখানে স্ক্রিনশটের মতো কনসোল ড্রয়ারে একটি এমুলেশন ট্যাব থাকবে:
এবং আপনি সেখানে আপনার অনুকরণ সব করতে পারেন.
এই পরিবর্তনের কারণ হল আগে, আপনার ইমুলেশন ওভাররাইড পরিবর্তন করতে আপনাকে সেটিংসের ভিতরে এবং বাইরে যেতে হবে এবং তারপরে ফিরে গিয়ে আপনার পৃষ্ঠাটি দেখতে হবে। এখন আপনি শৈলী ম্যানিপুলেট করার সময় আপনার এমুলেশন ওভাররাইডের চারপাশে পরিবর্তন করতে পারেন।
উন্নত কর্মক্ষেত্র
বিশেষ করে ওয়ার্কস্পেস এমন একটি বৈশিষ্ট্য যা আপনার লেখার কার্যপ্রবাহকে কিছুটা সরল করতে পারে এবং তবুও এটি প্রাপ্য যতটা ভালবাসা পায় না। DevTools-এ পরীক্ষা-নিরীক্ষা ও পরিবর্তন করার পরিবর্তে এবং আপনার সোর্স ফাইলগুলিতে আপনার পরিবর্তনগুলি কপি করে পেস্ট করার পরিবর্তে Workspace-এর সাহায্যে আপনি DevTools-এ পরিবর্তন করতে পারেন, সেগুলিকে ব্রাউজারে রেন্ডার করা দেখতে পারেন এবং আপনার ফাইলগুলির একটি স্থায়ী স্থানীয় সংস্করণে সংরক্ষণ করতে পারেন৷ -- ক্রোম ছাড়াই সব।
আপনি যদি এখনও ক্রোম ডেভেলপার টুলস রেভোলিউশনস 2013 নিবন্ধটি না পড়ে থাকেন, তাহলে এগিয়ে যান এবং এটি একবার দেখে নিন এবং তারপরে আমরা গত কয়েক মাসে সেই বৈশিষ্ট্যগুলিতে কীভাবে উন্নতি করেছি তা জানতে এখানে ফিরে আসুন৷
ফাইল যোগ করা সহজ
Revolutions 2013 নিবন্ধের সময়, একটি নতুন ওয়ার্কস্পেস তৈরি করার জন্য আপনার ওয়ার্কস্পেসগুলিতে ফোল্ডারটি যুক্ত করা এবং তারপর ফোল্ডারটিকে একটি নেটওয়ার্ক সংস্থানে ম্যাপ করা প্রয়োজন৷ আমরা এই প্রক্রিয়াটিকে একটি একক ধাপে সরলীকৃত করেছি: উৎসের বাম প্যানেলে শুধু ডান-ক্লিক করুন এবং ওয়ার্কস্পেসে ফোল্ডার যুক্ত করুন নির্বাচন করুন। এটি আপনাকে একটি ফাইল ডায়ালগে লঞ্চ করে যেখানে আপনি আপনার ওয়ার্কস্পেসগুলিতে যোগ করার জন্য একটি নতুন ফোল্ডার চয়ন করতে পারেন। (এটি আপনার ওয়ার্কস্পেসগুলিতে বর্তমানে হাইলাইট করা ফোল্ডার যোগ করে না ।)
ফাইল তৈরি এবং অপসারণ
আপনি এখন ওয়ার্কস্পেসের মধ্যেই ওয়ার্কস্পেসের জন্য যে স্থানীয় ডিরেক্টরি ব্যবহার করছেন তাতে নতুন ফাইল যোগ করতে পারেন। বাম সোর্স প্যানেলে একটি ফোল্ডারে কেবল ডান-ক্লিক করুন এবং নতুন ফাইল নির্বাচন করুন।
আপনি ওয়ার্কস্পেসের মধ্যে থেকে ফাইলগুলিও সরাতে পারেন। বাম সোর্স প্যানেলে একটি ফাইলে ডান-ক্লিক করুন এবং ফাইল মুছুন নির্বাচন করুন।
আপনি ডুপ্লিকেট ফাইল নির্বাচন করে একটি ফাইল সদৃশ করতে পারেন।
রিফ্রেশ
এখন যেহেতু আপনি ওয়ার্কস্পেসগুলিতে সরাসরি নতুন ফাইল তৈরি করতে পারেন (বা ফাইলগুলি মুছতে পারেন), উত্স ডিরেক্টরিটি স্বয়ংক্রিয়ভাবে রিফ্রেশ করবে এবং এই নতুন ফাইলগুলি দেখাবে৷ যদি না হয়, আপনি সর্বদা একটি ফোল্ডারে ডান-ক্লিক করতে পারেন এবং জোর করে রিফ্রেশ করতে পপ-আপ মেনু থেকে রিফ্রেশ নির্বাচন করতে পারেন।
আপনি যদি অন্য সম্পাদকে খোলা ফাইলগুলি পরিবর্তন করতে চান এবং DevTools-এ পরিবর্তনগুলি দেখাতে চান তবে এটিও কার্যকর।
ফাইল জুড়ে অনুসন্ধান করুন
আমরা ফাইলগুলি জুড়ে অনুসন্ধানের জন্য ইন্টারফেসটিকে কিছুটা পরিমার্জিত করেছি এবং এখন আপনি আপনার ওয়ার্কস্পেসের সমস্ত ফাইলের পাশাপাশি DevTools-এ লোড করা সমস্ত ফাইল জুড়ে স্ট্রিংগুলিও অনুসন্ধান করতে পারেন৷ আপনি হয় একটি স্ট্রিং বা রেগুলার এক্সপ্রেশনের জন্য অনুসন্ধান করতে পারেন, এবং আমরা প্রতিটি ফাইল বা পৃষ্ঠার প্রতিটি ঘটনার সাথে মেলে। ওয়ার্কস্পেসগুলিতে একাধিক ফাইল অনুসন্ধান করতে (বর্তমানে ক্যানারিতে):
- Escape কী টিপে কনসোল ড্রয়ারটি খুলুন এবং অনুসন্ধান উইন্ডোটি খুলতে কনসোলের পাশে অনুসন্ধান ট্যাবে ক্লিক করুন
বা
অনুসন্ধান উইন্ডো খুলতে Ctrl + Shift + F ( Cmd + Opt + F Mac এ) টিপুন।
- অনুসন্ধান উত্স বক্সে আপনার ক্যোয়ারী টাইপ করুন এবং এন্টার টিপুন। আপনার ক্যোয়ারী যদি একটি রেগুলার এক্সপ্রেশন হয় বা কেস-অসংবেদনশীল হওয়া প্রয়োজন, উপযুক্ত বাক্সে ক্লিক করুন।
তালিকা উপেক্ষা করুন
ফাইলের পাঠ্যের মাধ্যমে অনুসন্ধান করা বা ফাইলের নামগুলির মাধ্যমে ফিল্টার করা খুব ক্লান্তিকর হতে পারে যদি আপনার কাছে প্রচুর .git ফাইল বা README.md ফাইলগুলি আপনার ফলাফলগুলিকে বিশৃঙ্খলা করে থাকে।
এইভাবে, আমরা ওয়ার্কস্পেসগুলিতে একটি উপেক্ষা তালিকা বৈশিষ্ট্য যুক্ত করেছি যাতে আপনি আপনার ওয়ার্কস্পেস দেখার এবং অনুসন্ধান করার সময় নির্দিষ্ট ফাইল প্রকার বা ফোল্ডারগুলি বাদ দিতে পারেন৷
ওয়ার্কস্পেসগুলিতে আপনি কীভাবে বর্তমান শেয়ার করা উপেক্ষাকারী দেখতে এবং পরিবর্তন করতে পারেন তা এখানে রয়েছে:
- DevTools সেটিংস খুলুন।
- ওয়ার্কস্পেস ক্লিক করুন।
- সাধারণের অধীনে, ফোল্ডার বাদ প্যাটার্ন বাক্সের মধ্যে, আপনি প্যাটার্নগুলি দেখতে এবং/বা সম্পাদনা করতে পারেন।
আমরা এই ডিফল্ট গ্লোবাল এক্সক্লুড প্যাটার্নগুলির সাথে শিপ করি:
এই রেজেক্স Git, SVN, Mercurial থেকে মেটাডেটা, Eclipse এবং IntelliJ থেকে প্রজেক্ট ফাইল, OS X DS_Store এবং ট্র্যাশ ফাইল এবং Sass থেকে ক্যাশে উপেক্ষা করার মতো আরও কিছু জিনিস বাদ দেয়। যেকোন শিশু সহ তাদের সম্পূর্ণ ফোল্ডার UI থেকে বাদ দেওয়া হয়েছে যাতে UI তে না দেখা যায় এবং ফাইল অনুসন্ধান করার সময় দেখা না যায়।
ওয়ার্কস্পেস-নির্দিষ্ট উপেক্ষা তালিকা
আরও নির্দিষ্ট করার জন্য, আপনি অনুসন্ধানে বিশৃঙ্খলা কমাতে আপনার নির্দিষ্ট ওয়ার্কস্পেসের মধ্যে ফাইল এবং ফোল্ডারগুলি বাদ দেওয়াও বেছে নিতে পারেন। বাদ দেওয়া ফোল্ডারগুলি উত্স ডিরেক্টরিতেও প্রদর্শিত হবে না৷
আপনার ওয়ার্কস্পেস থেকে একটি সম্পূর্ণ ফোল্ডার বাদ দিতে, বাম সোর্স প্যানেলে ফোল্ডারে ডান-ক্লিক করুন এবং ফোল্ডার বাদ দিন নির্বাচন করুন। একটি প্রদত্ত ওয়ার্কস্পেস ফোল্ডারের জন্য ম্যাপিং এবং বাদ দেওয়া ফোল্ডারগুলি দেখতে:
- DevTools সেটিংস খুলুন।
- ওয়ার্কস্পেস ক্লিক করুন।
- আপনি যে ফোল্ডারে আগ্রহী তা হাইলাইট করুন।
- সম্পাদনা ক্লিক করুন এবং "ফাইল সিস্টেম সম্পাদনা করুন" উইন্ডো প্রদর্শিত হবে; আপনি এই উইন্ডো থেকে ম্যাপিং এবং/অথবা বাদ দেওয়া ফোল্ডার যোগ করতে বা সরাতে পারেন।
