ভূমিকা
গুগল ক্রোম হল একটি সমৃদ্ধ এবং শক্তিশালী ওয়েব ব্রাউজার, যা ওয়েবে অ্যাপ্লিকেশনের জন্য সম্ভব। Google শেষ ব্যবহারকারীদের জন্য খুব দ্রুত, খুব স্থিতিশীল, বৈশিষ্ট্য সমৃদ্ধ ব্রাউজিং অভিজ্ঞতা প্রদানের জন্য কঠোর পরিশ্রম করেছে। Google আরও নিশ্চিত করেছে যে আপনার মতো বিকাশকারীদের ক্রোমের সাথে একটি দুর্দান্ত অভিজ্ঞতা রয়েছে৷ বিকাশকারী সরঞ্জামগুলি, ক্রোম এবং সাফারিতে একত্রিত এবং উপলব্ধ, ওয়েব বিকাশকারী এবং প্রোগ্রামারদের ব্রাউজার এবং তাদের ওয়েব অ্যাপ্লিকেশনের অভ্যন্তরীণগুলিতে গভীর অ্যাক্সেসের অনুমতি দেয়৷
বিকাশকারী সরঞ্জামগুলি ওপেন সোর্স ওয়েবকিট প্রকল্পের অংশ। এই নিবন্ধের বেশিরভাগ আলোচনা Google Chrome এবং Safari উভয় ক্ষেত্রেই প্রযোজ্য। যাইহোক, স্ক্রিনশটগুলি Google Chrome 6 ব্যবহার করে নেওয়া হয়েছে, তাই আপনার ব্রাউজারে সামান্য পার্থক্য থাকতে পারে।
এই নিবন্ধে, আমরা বিকাশকারী সরঞ্জামগুলির একটি ওভারভিউ সফর করব এবং এর সবচেয়ে জনপ্রিয়, এবং দরকারী বৈশিষ্ট্যগুলি নির্দেশ করব৷ আমাদের টার্গেট অডিয়েন্স হল ওয়েব ডেভেলপার যারা ডেভেলপার টুলস সম্পর্কে জানেন না বা এখনও তদন্ত করেননি। যাইহোক, আমরা নিশ্চিত যে আপনি একজন অভিজ্ঞ ওয়েব ডেভেলপার হলেও, আপনি একটি বা দুটি টিপ নেবেন।
যদি আপনার বিকাশকারী সরঞ্জামগুলির উদাহরণ এই নিবন্ধে পাওয়া স্ক্রিনশটগুলির সাথে পুরোপুরি মেলে না, তাহলে আমরা আপনাকে 5-এ আপগ্রেড করার পরামর্শ দিই যাতে আপনি এখানে বর্ণিত সমস্ত বৈশিষ্ট্যগুলি অনুসরণ করতে এবং অ্যাক্সেস পেতে পারেন৷
ওভারভিউ
সামগ্রিকভাবে, এখানে আটটি প্রধান গোষ্ঠীর টুল উপলব্ধ রয়েছে বিকাশকারী সরঞ্জামগুলি দেখুন, এবং ক্ষমতাগুলি প্রতি প্রকাশের সাথে প্রসারিত হচ্ছে। Chrome 5 এখন এলিমেন্ট, রিসোর্স, স্ক্রিপ্ট, টাইমলাইন, প্রোফাইল, স্টোরেজ, অডিট এবং কনসোল অফার করে।
উপাদান
এলিমেন্টস টুল আপনাকে ওয়েব পেজ দেখতে দেয় যেভাবে ব্রাউজার এটি দেখে। অর্থাৎ, এলিমেন্টস টুল ব্যবহার করে, আপনি কাঁচা এইচটিএমএল, কাঁচা CSS শৈলী, ডকুমেন্ট অবজেক্ট মডেল দেখতে পারেন এবং রিয়েল টাইমে ম্যানিপুলেট করতে পারেন।
সম্পদ
আপনার ওয়েব পৃষ্ঠা বা অ্যাপ্লিকেশনটি ওয়েব সার্ভার থেকে কোন উপাদানগুলির জন্য অনুরোধ করছে, এই অনুরোধগুলি কতক্ষণ সময় নেয় এবং কত ব্যান্ডউইথ প্রয়োজন তা জানতে সম্পদ টুল ব্যবহার করুন৷ আপনি আপনার প্রতিটি সংস্থানের জন্য HTTP অনুরোধ এবং প্রতিক্রিয়া শিরোনামও দেখতে পারেন। রিসোর্স টুলটি আপনাকে পেজ লোডের সময় ত্বরান্বিত করতে সাহায্য করার জন্য নিখুঁত।
স্ক্রিপ্ট
একটি পৃষ্ঠার জন্য জাভাস্ক্রিপ্টের ভিতরে পিয়ার করতে, আপনি স্ক্রিপ্ট টুল ব্যবহার করবেন। এখানে আপনি পৃষ্ঠার জন্য প্রয়োজনীয় স্ক্রিপ্টগুলির একটি তালিকা এবং একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত স্ক্রিপ্ট ডিবাগার খুঁজে পেতে পারেন। এমনকি আপনি ফ্লাইতে জাভাস্ক্রিপ্ট পরিবর্তন করতে পারেন!
টাইমলাইন
উন্নত সময় এবং গতি বিশ্লেষণের জন্য, টাইমলাইন টুলটি পর্দার পিছনের বিভিন্ন ক্রোমের ক্রিয়াকলাপের মধ্যে গভীরভাবে দৃশ্যমানতা প্রদান করে৷ আপনি শিখতে পারেন যে ব্রাউজারটি DOM ইভেন্টগুলি পরিচালনা করতে, পৃষ্ঠার লেআউটগুলি রেন্ডার করতে এবং উইন্ডোটি রঙ করতে কত সময় নেয়৷
প্রোফাইল
প্রোফাইল টুল আপনাকে জাভাস্ক্রিপ্ট স্ক্রিপ্টের কর্মক্ষমতা ক্যাপচার এবং বিশ্লেষণ করতে সাহায্য করে। উদাহরণস্বরূপ, আপনি শিখতে পারেন কোন ফাংশনগুলি কার্যকর করতে সবচেয়ে বেশি সময় নেয় এবং ঠিক কোথায় অপ্টিমাইজ করতে হয় তা শূন্য।
স্টোরেজ
আধুনিক ওয়েব অ্যাপ্লিকেশনগুলির জন্য কেবল কুকিজের চেয়ে বেশি অধ্যবসায়ের প্রয়োজন, এবং স্টোরেজ টুল আপনাকে স্থানীয় ব্রাউজার স্টোরেজ ট্র্যাক, অনুসন্ধান এবং ডিবাগ করতে সহায়তা করে। এই টুলটি স্থানীয় ডাটাবেস, স্থানীয় স্টোরেজ, সেশন স্টোরেজ এবং কুকিতে সংরক্ষিত ডেটা প্রদর্শন এবং অনুসন্ধান করতে পারে।
নিরীক্ষা
অডিট টুল হল আপনার নিজের ওয়েব অপ্টিমাইজেশান কনসালটেন্ট আপনার পাশে বসে থাকার মত। এই টুলটি একটি পৃষ্ঠা লোড হওয়ার সাথে সাথে বিশ্লেষণ করতে পারে এবং পৃষ্ঠা লোডের সময় হ্রাস করার জন্য পরামর্শ এবং অপ্টিমাইজেশন প্রদান করতে পারে এবং অনুভূত (এবং বাস্তব) প্রতিক্রিয়াশীলতা বাড়াতে পারে।
কনসোল
শেষ কিন্তু নিশ্চিতভাবে অন্তত নয়, বিকাশকারী সরঞ্জামগুলি একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত কনসোল অফার করে৷ কনসোল থেকে, আপনি নির্বিচারে জাভাস্ক্রিপ্ট লিখতে পারেন এবং প্রোগ্রাম্যাটিকভাবে আপনার পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করতে পারেন।
শুরু হচ্ছে
Chrome এর ভিতরে থাকাকালীন বিকাশকারী সরঞ্জামগুলি শুরু করা সহজ৷
যেকোনো অপারেটিং সিস্টেমের জন্য, আপনি পৃষ্ঠার যেকোনো উপাদানে ডান-ক্লিক করতে পারেন এবং প্রসঙ্গ মেনু থেকে "এলিমেন্ট পরিদর্শন করুন" বিকল্পটি নির্বাচন করতে পারেন। এটি বিকাশকারী সরঞ্জামগুলি খুলবে এবং আপনি যে উপাদানটিতে ক্লিক করেছেন তার ডানদিকে ড্রিল করবে।
এটি কার্যকরভাবে দেখতে, Chrome ব্রাউজারে http://www.google.com এ যান৷ Google লোগোতে ডান ক্লিক করুন, এবং আপনি নিম্নলিখিত বিকল্পগুলি দেখতে পাবেন:
"ইন্সপেক্ট এলিমেন্ট" নির্বাচন করলে ডেভেলপার টুল আসবে, যা দেখতে হবে নিচের মত:
লক্ষ্য করুন কীভাবে বিকাশকারী সরঞ্জামগুলি এলিমেন্টস ট্যাবের ভিতরে খোলা হয়েছে এবং স্বয়ংক্রিয়ভাবে Google লোগোর জন্য <img> ট্যাগে ড্রিল করা হয়েছে এবং হাইলাইট হয়েছে৷ যখন আপনি কৌতূহলী হন যে কোন এইচটিএমএল একটি নির্দিষ্ট পৃষ্ঠা উপাদান তৈরি করেছে তা খুবই কার্যকর।
আপনি একটি সাধারণ কীবোর্ড শর্টকাট দিয়ে বিকাশকারী সরঞ্জামগুলিও খুলতে পারেন। আপনার অপারেটিং সিস্টেমের উপর নির্ভর করে, নিম্নলিখিত চেষ্টা করুন:
- উইন্ডোজ এবং লিনাক্সে,
Control-Shift-Jকী নির্বাচন করুন। - Mac এ,
Command-Option-Jকী নির্বাচন করুন।
অবশেষে, আপনি প্রধান ব্রাউজার মেনু থেকে টুল খুলতে বেছে নিতে পারেন।
একটি ম্যাকে, এবং প্রধান অ্যাপ্লিকেশন মেনু বার থেকে, দেখুন, বিকাশকারী, বিকাশকারী সরঞ্জাম নির্বাচন করুন।
একটি উইন্ডোজ পিসিতে, আপনার উপরের ডানদিকে পৃষ্ঠা মেনু ব্যবহার করা উচিত এবং বিকাশকারী, বিকাশকারী সরঞ্জাম নির্বাচন করা উচিত।
এখন যেহেতু আপনার বিকাশকারী সরঞ্জামগুলি খোলা এবং প্রস্তুত, আসুন Google এর হোমপেজে উপাদানগুলি অন্বেষণ করে শুরু করি৷
উপাদান
ডেভেলপার টুলের প্রথম ট্যাবটি হল এলিমেন্টস। এটি ওয়েব পৃষ্ঠার কাঠামোর মধ্যে আপনার উইন্ডো, আপনার ব্রাউজার এটি দেখে হিসাবে উপস্থাপন করা হয়।
DOM ব্রাউজিং
আপনি যখন পৃষ্ঠার কিছু দিকের জন্য HTML স্নিপেট সনাক্ত করতে হবে তখন আপনি প্রায়শই এলিমেন্টস ট্যাবগুলিতে যান৷ উদাহরণস্বরূপ, আপনি কৌতূহলী হতে পারেন যদি একটি চিত্রের একটি HTML আইডি বৈশিষ্ট্য থাকে এবং সেই বৈশিষ্ট্যটির মান কী।
উপাদান ট্যাব কখনও কখনও একটি পৃষ্ঠার জন্য "উৎস দেখার" একটি ভাল উপায়। এলিমেন্টস ট্যাবের ভিতরে, পৃষ্ঠার DOM সুন্দরভাবে ফর্ম্যাট করা হবে, সহজেই আপনাকে HTML উপাদান, তাদের পূর্বপুরুষ এবং তাদের বংশধর দেখাবে। প্রায়শই, আপনি যে পৃষ্ঠাগুলি দেখেন সেগুলিতে ছোট বা কেবল কুশ্রী HTML থাকবে যা পৃষ্ঠাটি কীভাবে গঠন করা হয়েছে তা দেখা কঠিন করে তোলে। পৃষ্ঠার প্রকৃত অন্তর্নিহিত কাঠামো দেখার জন্য উপাদান ট্যাব হল আপনার সমাধান।
উদাহরণস্বরূপ, Google হোমপেজের "ভিউ সোর্স" থেকে নিম্নলিখিতটি আউটপুট।
উপরের উত্সটি পড়া কঠিন কারণ এটি অপ্টিমাইজ করা এবং ছোট করা হয়েছে৷ বিন্যাস ক্লায়েন্ট এবং সার্ভারের জন্য ভাল কিন্তু বিকাশকারীদের জন্য কঠিন!
পরিবর্তে, যখন আপনি একটি পৃষ্ঠার উত্স পড়তে চান, একটি সুন্দর-মুদ্রিত, সিনট্যাক্স হাইলাইট করা উপাদান শ্রেণিবিন্যাস দেখতে উপাদান ট্যাবটি ব্যবহার করুন৷
এলিমেন্টস ট্যাব আপনাকে পৃষ্ঠার যেকোনো উপাদানের জন্য ব্রাউজ করতে, ইন্টারঅ্যাক্ট করতে এবং কখনও কখনও শৈলী, মেট্রিক্স, বৈশিষ্ট্য এবং ইভেন্ট শ্রোতাদের পরিবর্তন করতে দেয়।
শৈলী ব্রাউজিং
CSS এর ক্যাসকেডিং প্রকৃতি উপাদান ট্যাবে স্টাইল ব্রাউজারটিকে খুব দরকারী করে তোলে। কখনও কখনও, শৈলীগুলি নিজেদের মধ্যে পড়ে যায় এবং অনাকাঙ্ক্ষিত ভিজ্যুয়ালগুলি উপস্থিত হয়। ব্রাউজারটি উপাদানটিতে কোন স্টাইলিং নিয়ম প্রয়োগ করছে তা জানা আপনাকে এই জাতীয় সমস্যা ডিবাগ করতে সহায়তা করে।
এলিমেন্টস ট্যাবের যেকোনো এলিমেন্টে ক্লিক করলে সেই এলিমেন্টের সাথে সংযুক্ত সমস্ত স্টাইল দেখা যাবে।
আপনি উপরের স্ক্রিনশটটিতে দেখতে পাবেন যে আমরা প্রয়োগ করা সমস্ত শৈলী বৈশিষ্ট্যগুলি বলতে সক্ষম। উদাহরণস্বরূপ, প্যাডিং সরাসরি আসে <img> উপাদানের শৈলী বৈশিষ্ট্য থেকে। প্রস্থ এবং উচ্চতা, যাইহোক, তাদের নিজ নিজ স্থানীয় বৈশিষ্ট্য থেকে আসে। মজার বিষয় হল, আপনি বলতে পারেন যে <center> ট্যাগ, <body> ট্যাগ এবং অন্যান্য থেকেও উত্তরাধিকারসূত্রে প্রাপ্ত স্টাইল রয়েছে।
যদিও স্বতন্ত্র শৈলীগুলি এবং সেগুলি কোথা থেকে এসেছে তা দেখতে দুর্দান্ত, তবে এটি গণনা করা এবং উপাদানটিতে প্রয়োগ করার পরে শৈলীগুলির চূড়ান্ত সেটটি দেখতেও খুব দরকারী। আপনি কম্পিউটেড স্টাইল মেনু নির্বাচন করে চূড়ান্ত পণ্য দেখতে পারেন, যেমনটি নীচের স্ক্রিনশটে দেখানো হয়েছে।
এর পরে, আমরা এলিমেন্টস ট্যাব দ্বারা প্রদত্ত অন্যান্য বৈশিষ্ট্যগুলিকে সংক্ষিপ্তভাবে দেখব। আমরা ভবিষ্যতের নিবন্ধগুলিতে আরও বিস্তারিতভাবে নিম্নলিখিতগুলি কভার করব।
বক্স মডেল
মেট্রিক্স মেনু নির্বাচন করে নির্বাচিত উপাদানে প্রয়োগ করা হলে আপনি বক্স মডেলটি দেখতে পারেন:
উপাদান বৈশিষ্ট্য
আপনি উপাদানের সমস্ত বৈশিষ্ট্য দেখতে পারেন, যেমন জাভাস্ক্রিপ্ট এবং DOM এটি দেখতে পাবে, বৈশিষ্ট্য মেনু নির্বাচন করে:
ইভেন্ট শ্রোতা
এবং সবশেষে, আপনি ইভেন্ট লিসেনার মেনুর মাধ্যমে ইভেন্ট শ্রোতাদের সাথে সংযুক্ত বা সেই বুদবুদটি দেখতে পারেন:
সারসংক্ষেপ
এলিমেন্টস ট্যাবের মাধ্যমে প্রচুর কার্যকারিতা উপলব্ধ রয়েছে এবং ভবিষ্যতের নিবন্ধগুলি পৃথক মেনুতে আরও গভীরে প্রবেশ করবে।
আপনি যখন দেখতে চান যে পৃষ্ঠাটি ব্রাউজারে কেমন দেখাচ্ছে তখন আপনার উপাদান ট্যাব ব্যবহার করা উচিত। সাধারণ সমস্যা যেমন "কিভাবে এই শৈলী গণনা করা হয়?" বা "কি HTML ট্যাগ এই উপাদান তৈরি করেছে?" এলিমেন্টস ট্যাবের মাধ্যমে দ্রুত এবং সহজে উত্তর দেওয়া হয়।
একটি উবার-"ভিউ সোর্স" এর মত এলিমেন্টস ট্যাবকে ভাবুন, এবং আপনার পৃষ্ঠায় খুব তীক্ষ্ণ দৃশ্যমানতা অর্জন করুন৷
আপনি পৃষ্ঠাটি তদন্ত করার পরে, আপনি হয়তো ভাবছেন যে এইচটিএমএল, সিএসএস এবং চিত্রগুলি সেখানে প্রথম স্থানে কীভাবে এসেছে। পরবর্তীতে বর্ণিত রিসোর্সেস ট্যাবটি আপনাকে দেখায় কিভাবে ক্লায়েন্ট ব্রাউজার এবং ওয়েব সার্ভার সেই রিসোর্সগুলো পাঠানোর জন্য যোগাযোগ করে।
সম্পদ
একবার আপনার অ্যাপ্লিকেশন কাজ করে, আপনার পরবর্তী পদক্ষেপটি নেটওয়ার্ক এবং ব্যান্ডউইথ কর্মক্ষমতা অপ্টিমাইজ করা উচিত। সার্ভার থেকে ক্লায়েন্টে যত দ্রুত এবং যতটা সম্ভব কার্যকরী আপনার অ্যাপ্লিকেশন স্থানান্তর করা আপনার লক্ষ্য হওয়া উচিত। আপনার ব্যবহারকারীরা দ্রুত পৃষ্ঠা লোড করার জন্য আপনাকে ধন্যবাদ জানাবে, আপনি ব্যান্ডউইথ এবং সার্ভার সংস্থানগুলিতে অর্থ সঞ্চয় করবেন এবং আপনি Google-এর অনুসন্ধান ফলাফলের র্যাঙ্কগুলিতে আরও ভাল স্কোর করবেন (যা এখন অ্যাকাউন্টের সাইটের গতি বিবেচনা করে)।
ডেভেলপার টুলস-এর রিসোর্স ট্যাব হল ওয়েব সার্ভার এবং ক্লায়েন্ট ব্রাউজারের মধ্যে যোগাযোগের আপনার উইন্ডো। আপনি ব্রাউজার দ্বারা অনুরোধ করা সমস্ত সংস্থান দেখতে সক্ষম হন (এটি সর্বদা খুব আশ্চর্যজনক!), সার্ভার থেকে সেগুলি পেতে কত সময় নেয় এবং স্থানান্তরের সময় কত ব্যান্ডউইথ ব্যবহার করা হয়।
হাস্যকরভাবে, সম্পদ ট্যাব চালানো পৃষ্ঠা লোড কর্মক্ষমতা প্রভাবিত করে, তাই এটি ডিফল্টরূপে অক্ষম করা হয়। আপনি প্রথমবার কার্যকারিতা অ্যাক্সেস করার সময়, আপনি যে পৃষ্ঠাটি দেখছেন তার জন্য আপনাকে এটি সক্ষম করতে হবে।
আমি আপনাকে ডিফল্ট "শুধুমাত্র এই সেশনের জন্য সক্ষম করুন" বেছে নেওয়ার পরামর্শ দিচ্ছি, কারণ আপনি অপ্রয়োজনীয়ভাবে ছোট পারফরম্যান্সের শাস্তি ভোগ করতে চান না। একবার আপনি "সম্পদ ট্র্যাকিং সক্ষম করুন" এ ক্লিক করলে, পৃষ্ঠাটি পুনরায় লোড হবে এবং বিকাশকারী সরঞ্জামগুলি সার্ভার থেকে পাঠানো সংস্থানগুলি নিরীক্ষণ ও প্রদর্শন করবে৷
নিম্নলিখিত স্ক্রিনশটটি Google হোমপেজের জন্য প্রয়োজনীয় এবং লোড করা সংস্থানগুলি দেখায়৷
এই স্ক্রিনে অনেক তথ্য আছে, তাই একে একে টুকরো টুকরো করা যাক।
ডিফল্ট আচরণ হল পৃষ্ঠার জন্য সমস্ত সংস্থান অনুরোধ এবং লোড করতে কত সময় লেগেছে তা আপনাকে দেখানো। সম্পদের তালিকায় স্ক্রোল করা আপনাকে অবাক করে দিতে পারে, কারণ আপনি হয়তো জানেন না যে ক্লায়েন্ট দ্বারা কতগুলি পৃথক অনুরোধ করা হচ্ছে। ক্লায়েন্টের কাছ থেকে উচ্চ সংখ্যক অনুরোধ কর্মক্ষমতাকে মারাত্মকভাবে প্রভাবিত করতে পারে। যা অনুরোধ করা হয়েছে তার দৃশ্যমানতা অর্জন করা হল অপ্টিমাইজেশনের প্রথম ধাপ এবং শেষ পর্যন্ত সম্পদের হ্রাস।
আপনি যদি শুধুমাত্র ছবি বা স্টাইল শীটগুলিতে আগ্রহী হন, আপনি সরাসরি প্রধান ট্যাব উইন্ডোর নীচে মেনু ব্যবহার করে রিসোর্স টাইপ ফিল্টার করতে পারেন।
রিসোর্সগুলি যে ক্রমে অনুরোধ করা হয়েছে তাও আপনি শিখবেন। টাইমলাইন ডিসপ্লে ব্যবহার করে, আপনার পৃষ্ঠার কিছু উপাদান কেন অন্যদের তুলনায় পরে দেখা যায় সে সম্পর্কে আপনি আরও ভালভাবে বুঝতে পারবেন।
আপনি সমস্ত অনুরোধ করা সংস্থানগুলির একটি ওভারভিউ অর্জন করার পরে এবং কীভাবে তারা সম্পূর্ণ অনুরোধের টাইমলাইন রচনা করে, আপনি পৃথক সংস্থানগুলিতে ড্রিল ডাউন করতে চাইবেন৷
আপনি যদি লক্ষ্য করেন যে প্রতিবার পৃষ্ঠাটি অ্যাক্সেস করার সময় কিছু সংস্থান অনুরোধ করা হচ্ছে, এটি একটি চিহ্ন যে আপনার ক্যাশিং শিরোনাম সঠিকভাবে কনফিগার করা হয়নি। আপনি বাম হাতের তালিকায় থাকা সংস্থানে ক্লিক করে একটি সংস্থানের জন্য সমস্ত শিরোনাম দেখতে পারেন।
প্রত্যাশিত HTTP প্রতিক্রিয়া কোড সেট করা হয়েছে এবং উপযুক্ত শিরোনাম সরবরাহ করা হয়েছে তা নিশ্চিত করতে হেডার প্রদর্শন ব্যবহার করুন। উদাহরণ স্বরূপ, যদি রিসোর্স খুব কমই বা পরিবর্তিত না হয়, তাহলে আপনার সার্ভারকে ভবিষ্যতের জন্য একটি মেয়াদোত্তীর্ণ শিরোনাম সেট করা উচিত। এটি ব্রাউজারকে বলবে যে সেই তারিখ পর্যন্ত সংস্থানটি আবার অনুরোধ করা উচিত নয়। এটি আপনার পৃষ্ঠার জন্য প্রয়োজনীয় HTTP সংযোগের পরিমাণ হ্রাস করে, এইভাবে আপনার সাইটের গতি বাড়ায়।
সারসংক্ষেপ
রিসোর্স ট্যাবে আরও অনেক কিছু আছে, যা আমরা ভবিষ্যতের নিবন্ধে কভার করব।
আপনার ক্লায়েন্ট ব্রাউজার কিভাবে ওয়েব সার্ভারের সাথে যোগাযোগ করছে তা দেখার জন্য রিসোর্স ট্যাব ব্যবহার করুন। অনুরোধের সময়, অনুরোধের আকার এবং অনুরোধের অর্ডার সহ এই তথ্য ব্যবহার করে, আপনি সার্ভারের লোড, খরচ কমাতে এবং গতি বাড়াতে এবং ব্যবহারকারীর অভিজ্ঞতা বাড়াতে স্মার্ট অপ্টিমাইজেশন করতে পারেন।
আপনার ওয়েব সাইট, আপনার ব্যবহারকারী এবং সার্চ ইঞ্জিনের জন্য গতি খুবই গুরুত্বপূর্ণ। একবার আপনার কাছে সম্পদের সংখ্যা এবং আকার কমে গেলে এবং উপযুক্ত HTTP কথোপকথন ঘটতে থাকলে, পরবর্তী পদক্ষেপটি হল আপনার পৃষ্ঠায় চলমান স্ক্রিপ্টগুলি তদন্ত এবং অপ্টিমাইজ করা। সৌভাগ্যবশত, স্ক্রিপ্ট ট্যাব, পরবর্তী আলোচনা, ঠিক তাই করে.
অতিরিক্ত সম্পদ
বিকাশকারী সরঞ্জাম সম্পর্কে আরও তথ্যের জন্য, আমরা নিম্নলিখিতগুলি সুপারিশ করতে পারি:
- Google I/O 2010 থেকে Chrome বিকাশকারী সরঞ্জাম উপস্থাপনা ভিডিও এবং স্লাইড
- ক্রোম ডেভেলপার টুলস টিউটোরিয়াল
এবং অবশ্যই, এই নিবন্ধের পার্ট 2-এর জন্য html5rocks.com-এর সাথে থাকুন, সাথে অন্যান্য অনেক দুর্দান্ত HTML5 এবং Chrome সামগ্রী।