Google I/O 2016 একটি মোড়ানো। DevTools-এর I/O-তে একটি শক্তিশালী উপস্থিতি ছিল, যার মধ্যে পল বাকাউস, পল আইরিশ এবং সেথ থম্পসন ডেভটুলস-এর ভবিষ্যৎ রূপরেখা তুলে ধরেছেন। 2016 এবং তার পরেও DevTools কোথায় যাচ্ছে সে সম্পর্কে আরও জানতে নীচের ভিডিওটি দেখুন বা পড়ুন৷
রচনা
DevTools-এর লক্ষ্য ওয়েব ডেভেলপমেন্ট লাইফসাইকেলের প্রতিটি ধাপকে সহজ করে তোলা। আপনি সম্ভবত জানেন যে DevTools আপনাকে একটি ওয়েবসাইট ডিবাগ বা প্রোফাইলে সাহায্য করতে পারে, কিন্তু আপনি হয়তো জানেন না যে কীভাবে এটি ব্যবহার করে আপনাকে একটি সাইট লিখতে সাহায্য করতে হয়। "লেখক" বলতে আমরা একটি সাইট তৈরির কাজকে বুঝি। অদূর ভবিষ্যতের লক্ষ্যগুলির মধ্যে একটি হল একাধিক ডিভাইস জুড়ে আপনার সাইটকে পুনরাবৃত্তি করা, পরীক্ষা করা এবং অনুকরণ করা সহজ করা।
ডিভাইস মোড
DevTools টিম ডিভাইস মোড অভিজ্ঞতার পুনরাবৃত্তি করে চলেছে, যা Chrome 49-এ তার প্রথম বড় আপগ্রেড পেয়েছে৷ আপডেটগুলির একটি ওভারভিউয়ের জন্য মার্চ থেকে পোস্টটি দেখুন ( একটি মোবাইল-প্রথম বিশ্বের জন্য একটি নতুন ডিভাইস মোড )৷ অত্যধিক লক্ষ্য হল সমস্ত ফর্ম ফ্যাক্টর জুড়ে আপনার সাইট দেখার এবং অনুকরণ করার জন্য একটি বিরামহীন কর্মপ্রবাহ প্রদান করা।
মার্চ মাসে আমরা নিবন্ধটি পোস্ট করার পর থেকে এখানে কিছু ডিভাইস মোড আপডেটের একটি দ্রুত সারাংশ রয়েছে যা ক্যানারিতে অবতরণ করেছে।
একটি নির্দিষ্ট ডিভাইস হিসাবে একটি পৃষ্ঠা দেখার সময়, আপনি আপনার পৃষ্ঠার চারপাশে ডিভাইস হার্ডওয়্যার দেখিয়ে অভিজ্ঞতায় নিজেকে আরও নিমজ্জিত করতে পারেন।
যখন বিভিন্ন সিস্টেম UI উপাদান, যেমন নেভিগেশন বার এবং কীবোর্ড সক্রিয় থাকে তখন ডিভাইস ওরিয়েন্টেশন মেনু আপনাকে আপনার পৃষ্ঠা দেখতে দেয়।
ডেস্কটপ গল্পটিও উন্নত হয়েছে। ডিভাইস মোডের জুম বৈশিষ্ট্যের জন্য ধন্যবাদ, আপনি যে পর্দায় কাজ করছেন তার চেয়ে বড় ডেস্কটপ স্ক্রীনগুলিকে অনুকরণ করতে পারেন, যেমন একটি 4K (3840px x 2160px) স্ক্রীন৷
আপনি নেটওয়ার্ক প্যানেলে স্যুইচ করার পরিবর্তে ডিভাইস মোড UI থেকে সরাসরি নেটওয়ার্ক থ্রোটল করতে পারেন।
উৎস পার্থক্য
আপনি যখন একটি সাইটের স্টাইলিং এর উপর পুনরাবৃত্তি করেন, তখন আপনার পরিবর্তনগুলির ট্র্যাক হারানো সহজ। এটি ঠিক করার জন্য, DevTools সোর্স প্যানেলের লাইন নম্বর গটারে ভিজ্যুয়াল কিউ ব্যবহার করতে চলেছে যাতে আপনাকে আপনার পরিবর্তনগুলি ট্র্যাক করতে সহায়তা করে৷ মুছে ফেলা লাইনগুলি একটি লাল রেখা দিয়ে নির্দেশিত হয়, পরিবর্তিত লাইনগুলি বেগুনি হাইলাইট করা হয় এবং নতুন লাইনগুলি সবুজ রঙে হাইলাইট করা হয়৷
এছাড়াও আপনি নতুন কুইক সোর্স ড্রয়ার ট্যাবে আপনার পরিবর্তনগুলি ট্র্যাক করতে সক্ষম হবেন:
প্রথমবারের মতো, কুইক সোর্স ট্যাব আপনাকে আপনার সিএসএস নিয়মের মতো একই সময়ে আপনার HTML বা জাভাস্ক্রিপ্ট সোর্স কোডে ফোকাস করতে দেয়৷ এছাড়াও, যখন আপনি স্টাইল প্যানে একটি CSS প্রপার্টি ক্লিক করেন, Quick Source ট্যাবটি স্বয়ংক্রিয়ভাবে লাফিয়ে যায় এবং উৎসের সংজ্ঞা হাইলাইট করে।
ক্রোম ক্যানারিতে সোর্স ডিফ এক্সপেরিমেন্ট চালু করুন আজই এটি ব্যবহার করে দেখুন।
লাইভ Sass সম্পাদনা
Sass এডিটিং ওয়ার্কফ্লোতে কিছু আসন্ন বড় উন্নতির এক ঝলক দেখুন। এই বৈশিষ্ট্যগুলি পরীক্ষামূলক পর্যায়ে খুব প্রাথমিক। তারা আপনার চেষ্টা করার জন্য প্রস্তুত হলে আমরা পরবর্তী পোস্টে অনুসরণ করব।
মূলত, DevTools আপনাকে Sass ভেরিয়েবলগুলি দেখতে এবং সম্পাদনা করতে দেবে যেমন আপনি সর্বদা আশা করেছিলেন। একটি Sass ভেরিয়েবল থেকে কম্পাইল করা একটি মানের উপর ক্লিক করুন, এবং নতুন দ্রুত উৎস ট্যাবটি পরিবর্তনশীলের সংজ্ঞায় চলে যায়।
একটি Sass ভেরিয়েবল থেকে সংকলিত একটি মান সম্পাদনা করার সময়, আপনার সম্পাদনা Sass ভেরিয়েবলকে আপডেট করে, শুধুমাত্র আপনার নির্বাচিত পৃথক সম্পত্তি নয়।
প্রগতিশীল ওয়েব অ্যাপস
Google I/O 2016-এ ওয়েব এবং ক্রোম আলোচনার তালিকাটি দেখুন এবং আপনি ওয়েব ডেভেলপমেন্টের জগতে একটি বিশাল থিম উদ্ভূত দেখতে পাবেন: প্রগতিশীল ওয়েব অ্যাপস ।
প্রোগ্রেসিভ ওয়েব অ্যাপ মডেলের আবির্ভাব হওয়ার সাথে সাথে, ডেভেলপারদের দুর্দান্ত প্রগতিশীল ওয়েব অ্যাপ তৈরি করার জন্য প্রয়োজনীয় সরঞ্জামগুলি সরবরাহ করতে DevTools দ্রুত পুনরাবৃত্তি করছে। আমরা বুঝতে পেরেছি যে এই আধুনিক অ্যাপ্লিকেশনগুলি তৈরি এবং ডিবাগ করা প্রায়শই অনন্য প্রয়োজনীয়তার সাথে আসে, তাই DevTools একটি সম্পূর্ণ প্যানেল প্রগতিশীল ওয়েব অ্যাপ্লিকেশন বিকাশের জন্য উত্সর্গ করেছে৷ Chrome Canary খুলুন এবং আপনি দেখতে পাবেন যে সংস্থান প্যানেলটি অ্যাপ্লিকেশন প্যানেলের সাথে প্রতিস্থাপিত হয়েছে। রিসোর্স প্যানেলের আগের সমস্ত কার্যকারিতা এখনও আছে। প্রগতিশীল ওয়েব অ্যাপ বিকাশের জন্য বিশেষভাবে ডিজাইন করা মাত্র কয়েকটি নতুন প্যান রয়েছে:
ম্যানিফেস্ট ফলক আপনাকে অ্যাপ ম্যানিফেস্ট ফাইলের একটি ভিজ্যুয়াল উপস্থাপনা দেয়। এখান থেকে আপনি ম্যানুয়ালি "অ্যাড টু হোম স্ক্রিনে" ওয়ার্কফ্লো ট্রিগার করতে পারেন।
পরিষেবা কর্মী ফলক আপনাকে বর্তমান পৃষ্ঠার জন্য নিবন্ধিত পরিষেবা কর্মীর সাথে পরিদর্শন এবং যোগাযোগ করতে দেয়৷
এবং ক্লিয়ার স্টোরেজ ফলক আপনাকে সমস্ত ধরণের ডেটা মুছে দিতে দেয় যাতে আপনি একটি পরিষ্কার স্লেট সহ একটি পৃষ্ঠা দেখতে পারেন।
জাভাস্ক্রিপ্ট
ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে সীমানা অতিক্রম করা ফুলস্ট্যাক ওয়েব ডেভেলপমেন্টের একটি কঠিন অংশ। আপনি যদি আবিষ্কার করেন যে একটি ওয়েব অ্যাপ ডিবাগ করার সময় আপনার ব্যাকএন্ড একটি 500 স্ট্যাটাস কোড ফেরত দিচ্ছে, তাহলে আপনি কার্যকরভাবে DevTools-এর উপযোগিতার সীমাতে পৌঁছেছেন, যার জন্য আপনাকে প্রসঙ্গ পরিবর্তন করতে হবে এবং সমস্যাটি ডিবাগ করতে আপনার ব্যাকএন্ড ডেভেলপমেন্ট এনভায়রনমেন্ট চালু করতে হবে।
Node.js এ লেখা ব্যাকএন্ডের সাথে, তবে, ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে সীমানা ঝাপসা হতে শুরু করেছে। যেহেতু Node.js V8 JavaScript ইঞ্জিনে চলে (একই ইঞ্জিন যা Google Chrome কে শক্তি দেয়) আমরা DevTools থেকে Node.js ডিবাগ করা সম্ভব করতে চেয়েছিলাম। Node.js টিমের জন্য V8, DevTools, এবং Google ক্লাউড প্ল্যাটফর্মের জন্য ধন্যবাদ, আপনি এখন একটি Node.js অ্যাপকে আত্মদর্শনের জন্য DevTools-এর শক্তিশালী ডিবাগিং বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন৷ কার্যকারিতা ইতিমধ্যেই Node.js রাত্রিকালীন বিল্ডগুলিতে পৌঁছেছে, যদিও DevTools ইন্টিগ্রেশন একটি বড় রিলিজে অন্তর্ভুক্ত হওয়ার আগে এখনও পালিশ করা হচ্ছে৷ DevTools থেকে আপনার Node.js অ্যাপটিকে ডিবাগ করা কোনো দিন node --inspect app.js পাস করা এবং যেকোনো Chrome উইন্ডোতে DevTools থেকে সংযোগ করার মতোই সহজ হবে৷
যদিও বিদ্যমান টুল যেমন নোড ইন্সপেক্টর GUI-ভিত্তিক ডিবাগিং অভিজ্ঞতা প্রদান করে, নতুন Node.js DevTools ইন্টিগ্রেশন DevTools-এর সাম্প্রতিক ডিবাগিং বৈশিষ্ট্যগুলির সাথে আপ-টু-ডেট থাকবে, যেমন async স্ট্যাক ডিবাগিং, ব্ল্যাকবক্সিং এবং ES6 সমর্থন।