مقدمه ای بر ابزار برنامه نویس کروم، قسمت اول

معرفی

Google Chrome یک مرورگر وب غنی و قدرتمند است که برای برنامه های کاربردی در وب پیشگام است. Google سخت کار کرده است تا یک تجربه مرور بسیار سریع، بسیار پایدار و غنی از ویژگی ها را برای کاربران نهایی ارائه دهد. Google همچنین تضمین کرده است که توسعه دهندگانی مانند شما تجربه خوبی با Chrome دارند. Developer Tools که در کروم و سافاری موجود است، به توسعه دهندگان وب و برنامه نویسان اجازه می دهد تا به قسمت های داخلی مرورگر و برنامه وب آنها دسترسی عمیق داشته باشند.

Developer Tools بخشی از پروژه Webkit منبع باز است. بیشتر بحث در این مقاله مربوط به گوگل کروم و سافاری است. با این حال، اسکرین شات ها با استفاده از Google Chrome 6 گرفته شده اند، بنابراین ممکن است تفاوت های جزئی در مرورگر شما وجود داشته باشد.

در این مقاله، مروری بر ابزارهای توسعه‌دهنده خواهیم داشت و به محبوب‌ترین و مفیدترین ویژگی‌های آن اشاره می‌کنیم. مخاطبان هدف ما توسعه دهندگان وب هستند که ابزارهای توسعه دهنده را نمی شناسند یا هنوز تحقیق نکرده اند. با این حال، ما مطمئن هستیم که حتی اگر یک توسعه دهنده وب با تجربه باشید، یک یا دو نکته را انتخاب خواهید کرد.

اگر نمونه شما از Developer Tools کاملاً با اسکرین شات های موجود در این مقاله مطابقت ندارد، توصیه می کنیم آن را به 5 ارتقا دهید تا بتوانید دنبال کنید و به همه ویژگی های توضیح داده شده در اینجا دسترسی پیدا کنید.

بررسی اجمالی

به طور کلی، هشت گروه اصلی از ابزارهای موجود برای مشاهده ابزار توسعه‌دهنده وجود دارد و قابلیت‌ها با هر نسخه افزایش می‌یابد. Chrome 5 اکنون عناصر، منابع، اسکریپت‌ها، جدول زمانی، نمایه‌ها، فضای ذخیره‌سازی، حسابرسی و کنسول را ارائه می‌دهد.

عناصر

ابزار Elements به شما این امکان را می دهد که صفحه وب را همانطور که مرورگر می بیند ببینید. یعنی با استفاده از ابزار Elements می‌توانید HTML خام، سبک‌های CSS خام، Document Object Model را ببینید و هر کدام را در زمان واقعی دستکاری کنید.

منابع

از ابزار Resources استفاده کنید تا بدانید صفحه وب یا برنامه شما چه اجزایی را از سرورهای وب درخواست می کند، این درخواست ها چقدر طول می کشد و چه مقدار پهنای باند مورد نیاز است. همچنین می توانید هدرهای درخواست و پاسخ HTTP را برای هر یک از منابع خود مشاهده کنید. ابزار Resources برای کمک به افزایش سرعت بارگذاری صفحه بسیار مناسب است.

اسکریپت ها

برای بررسی داخل جاوا اسکریپت برای یک صفحه، از ابزار Scripts استفاده خواهید کرد. در اینجا می‌توانید فهرستی از اسکریپت‌های مورد نیاز صفحه به‌علاوه یک دیباگر اسکریپت کامل را پیدا کنید. حتی می توانید جاوا اسکریپت را در لحظه تغییر دهید!

جدول زمانی

برای تجزیه و تحلیل زمان و سرعت پیشرفته، ابزار Timeline دید عمیقی را به فعالیت‌های مختلف پشت صحنه Chrome ارائه می‌دهد. می‌توانید یاد بگیرید که مرورگر چقدر طول می‌کشد تا رویدادهای DOM، رندر کردن طرح‌بندی‌های صفحه و رنگ‌آمیزی پنجره را انجام دهد.

پروفایل ها

ابزار Profiles به شما کمک می کند تا عملکرد اسکریپت های جاوا اسکریپت را ضبط و تجزیه و تحلیل کنید. برای مثال، می‌توانید یاد بگیرید که کدام توابع بیشترین زمان را برای اجرا می‌برند و دقیقاً مکان بهینه‌سازی را صفر کنید.

ذخیره سازی

برنامه‌های کاربردی وب مدرن به ماندگاری بیشتری نسبت به کوکی‌های ساده نیاز دارند، و ابزار Storage به شما کمک می‌کند فضای ذخیره‌سازی مرورگر محلی را ردیابی، جستجو و اشکال‌زدایی کنید. این ابزار می‌تواند داده‌های ذخیره‌شده در پایگاه‌های داده محلی، ذخیره‌سازی محلی، ذخیره‌سازی جلسه و کوکی‌ها را نمایش دهد و پرس و جو کند.

حسابرسی

ابزار حسابرسی مانند این است که مشاور بهینه سازی وب خود در کنار شما بنشیند. این ابزار می‌تواند یک صفحه را هنگام بارگذاری آنالیز کند و پیشنهادات و بهینه‌سازی‌هایی را برای کاهش زمان بارگذاری صفحه و افزایش پاسخ‌گویی درک شده (و واقعی) ارائه دهد.

کنسول

آخرین اما قطعا نه کم اهمیت، Developer Tools یک کنسول کامل ارائه می دهد. از کنسول، می توانید جاوا اسکریپت دلخواه را وارد کنید و به صورت برنامه نویسی با صفحه خود تعامل داشته باشید.

راه اندازی

راه‌اندازی ابزارهای توسعه‌دهنده در داخل Chrome آسان است.

برای هر سیستم عاملی، می توانید به سادگی بر روی هر عنصر در صفحه کلیک راست کرده و گزینه "Inspect Element" را از منوی زمینه انتخاب کنید. با این کار Developer Tools باز می شود و دقیقاً روی عنصری که روی آن کلیک کرده اید دریل می شود.

برای مشاهده عملکرد، از http://www.google.com در مرورگر کروم دیدن کنید. روی لوگوی گوگل کلیک راست کنید و گزینه های زیر را مشاهده خواهید کرد:

با انتخاب "Inspect Element" ابزار Developer Tools ظاهر می شود که باید به شکل زیر باشد:

توجه کنید که چگونه ابزار Developer Tools در داخل برگه Elements باز می شود و به طور خودکار به تگ <img> برای لوگوی Google کشیده شده و برجسته می شود. وقتی کنجکاو هستید که کدام HTML عنصر صفحه خاصی را ایجاد کرده است، بسیار مفید است.

همچنین می توانید Developer Tools را با یک میانبر صفحه کلید ساده باز کنید. بسته به سیستم عامل خود، موارد زیر را امتحان کنید:

• در ویندوز و لینوکس، کلیدهای Control-Shift-J را انتخاب کنید.
• در مک، کلیدهای Command-Option-J را انتخاب کنید.

در نهایت، می‌توانید ابزارها را از منوی اصلی مرورگر باز کنید.

در مک و از نوار منوی اصلی برنامه، View، Developer، Developer Tools را انتخاب کنید.

در رایانه شخصی ویندوز، باید از منوی صفحه در بالا سمت راست استفاده کنید و Developer, Developer Tools را انتخاب کنید.

اکنون که ابزار Developer Tools را باز و آماده کرده اید، بیایید با کاوش در عناصر صفحه اصلی Google شروع کنیم.

عناصر

اولین تب در Developer Tools Elements است. این پنجره شما در ساختار صفحه وب است که همانطور که مرورگر شما آن را می بیند ارائه می شود.

مرور DOM

هنگامی که نیاز به شناسایی قطعه HTML برای برخی از جنبه های صفحه دارید، اغلب از برگه های Elements بازدید می کنید. به عنوان مثال، ممکن است کنجکاو باشید که آیا یک تصویر دارای ویژگی HTML id است و ارزش آن ویژگی چقدر است.

برگه عناصر گاهی اوقات راه بهتری برای "مشاهده منبع" برای یک صفحه است. در داخل تب Elements، DOM صفحه به خوبی قالب بندی می شود و به راحتی عناصر HTML، اصل و نسب آنها و فرزندان آنها را به شما نشان می دهد. اغلب، صفحاتی که بازدید می‌کنید دارای HTML کوچک یا به سادگی زشت هستند که دیدن ساختار صفحه را دشوار می‌کند. تب Elements راه حل شما برای مشاهده ساختار واقعی صفحه است.

به عنوان مثال، خروجی زیر از «نمایش منبع» صفحه اصلی گوگل است.

خواندن منبع فوق سخت است زیرا بهینه و کوچک شده است. فرمت برای مشتریان و سرورها خوب است اما برای توسعه دهندگان دشوار است!

در عوض، زمانی که می‌خواهید منبع یک صفحه را بخوانید، از تب Elements برای مشاهده سلسله‌مراتب عناصر برجسته‌شده با نحو زیبا و چاپ شده استفاده کنید.

برگه Elements همچنین به شما امکان می دهد برای هر عنصری در صفحه بگردید، تعامل داشته باشید و گاهی اوقات حتی سبک ها، معیارها، ویژگی ها و شنوندگان رویداد را تغییر دهید.

مرور سبک ها

ماهیت آبشاری CSS مرورگر Styles را در تب Elements بسیار مفید می کند. گاهی اوقات، سبک ها روی خود فرو می ریزند و تصاویر ناخواسته ظاهر می شوند. دانستن اینکه کدام قانون استایلی که مرورگر بر روی عنصر اعمال می کند به شما کمک می کند چنین مشکلی را رفع کنید.

با کلیک بر روی هر عنصر در تب Elements، تمام سبک های متصل به آن عنصر نمایش داده می شود.

در تصویر بالا خواهید دید که ما می‌توانیم تمام ویژگی‌های سبک اعمال شده را بگوییم. برای مثال، padding مستقیماً از ویژگی style عنصر <img> می آید. با این حال، عرض و ارتفاع از ویژگی‌های بومی مربوطه خود می‌آیند. جالب اینجاست که می‌توان گفت که سبک‌هایی نیز از تگ <center> ، تگ <body> و دیگران به ارث رسیده‌اند.

در حالی که دیدن تک تک استایل ها و اینکه از کجا آمده اند بسیار عالی است، دیدن مجموعه نهایی سبک ها پس از محاسبه و اعمال بر روی عنصر نیز بسیار مفید است. همانطور که در تصویر زیر نشان داده شده است، می توانید محصول نهایی را با انتخاب منوی Computed Style مشاهده کنید.

در ادامه نگاهی کوتاه به سایر ویژگی های ارائه شده توسط Elements Tab خواهیم داشت. موارد زیر را با جزئیات بیشتری در مقالات بعدی پوشش خواهیم داد.

مدل جعبه

با انتخاب منوی Metrics می‌توانید مدل جعبه را همانطور که روی عنصر انتخاب‌شده اعمال می‌شود ببینید:

ویژگی های عنصر

با انتخاب منوی Properties می‌توانید تمام ویژگی‌های عنصر را ببینید، همانطور که جاوا اسکریپت و DOM آن را مشاهده می‌کنند:

شنوندگان رویداد

و در نهایت، حتی می‌توانید شنوندگان رویداد متصل به عنصر یا آن حباب را از طریق منوی Event Listeners ببینید:

خلاصه

قابلیت‌های زیادی از طریق برگه Elements در دسترس است و مقالات آینده عمیق‌تر به منوهای فردی خواهند رفت.

زمانی که می‌خواهید ببینید صفحه برای خود مرورگر چگونه به نظر می‌رسد، باید از تب Elements استفاده کنید. مشکلات رایجی مانند "این سبک چگونه محاسبه می شود؟" یا "چه تگ های HTML این مؤلفه را ایجاد کرد؟" به سرعت و به راحتی از طریق برگه عناصر پاسخ داده می شوند.

به برگه Elements مانند یک "منبع مشاهده uber" فکر کنید و دید بسیار واضحی را در صفحه خود به دست آورید.

بعد از اینکه صفحه را بررسی کردید، ممکن است تعجب کنید که چگونه HTML، CSS و تصاویر در وهله اول به آنجا رسیده اند. برگه منابع، که در ادامه توضیح داده شد، به شما نشان می دهد که چگونه مرورگر مشتری و سرور وب برای ارسال بر روی آن منابع با هم ارتباط برقرار می کنند.

منابع

هنگامی که برنامه شما کار می کند، گام بعدی شما باید بهینه سازی عملکرد شبکه و پهنای باند باشد. باید هدفتان این باشد که انتقال برنامه خود از سرور به کلاینت را تا حد امکان سریع و کارآمد انجام دهید. کاربران شما بابت بارگذاری سریع صفحه از شما تشکر خواهند کرد، در پهنای باند و منابع سرور صرفه جویی خواهید کرد و همچنین در رتبه های نتایج جستجوی گوگل (که اکنون سرعت سایت را در نظر می گیرد) امتیاز بهتری کسب خواهید کرد.

برگه Resources در Developer Tools پنجره شما برای ارتباط بین وب سرور و مرورگر مشتری است. شما می توانید تمام منابع درخواست شده توسط مرورگر را مشاهده کنید (این همیشه بسیار تعجب آور است!)، مدت زمان دریافت آنها از سرور، و میزان پهنای باندی که در طول انتقال استفاده می شود.

از قضا، اجرای Tab Resources بر عملکرد بارگذاری صفحه تأثیر می گذارد، بنابراین به طور پیش فرض غیرفعال است. اولین باری که به عملکرد دسترسی پیدا می کنید، باید آن را برای صفحه ای که مشاهده می کنید فعال کنید.

توصیه می‌کنم پیش‌فرض «فقط فعال کردن برای این جلسه» را انتخاب کنید، زیرا نمی‌خواهید بیهوده جریمه عملکرد کوچک را متحمل شوید. هنگامی که روی «فعال کردن ردیابی منابع» کلیک کنید، صفحه مجدداً بارگیری می‌شود و Developer Tools منابع ارسال شده از سرور را نظارت و نمایش می‌دهد.

تصویر زیر منابع مورد نیاز و بارگذاری شده برای صفحه اصلی Google را نشان می دهد.

اطلاعات زیادی روی این صفحه وجود دارد، پس بیایید آن را تکه تکه کنیم.

رفتار پیش‌فرض این است که به شما نشان می‌دهد که درخواست و بارگیری همه منابع صفحه چقدر طول کشیده است. اسکرول کردن فهرست منابع ممکن است شما را شگفت زده کند، زیرا ممکن است ندانید که چه تعداد درخواست فردی توسط مشتری انجام می شود. تعداد زیاد درخواست های مشتری می تواند به شدت بر عملکرد تأثیر بگذارد. به دست آوردن دید در مورد آنچه درخواست شده است اولین گام برای بهینه سازی و در نهایت کاهش منابع است.

اگر فقط به تصاویر یا شیت‌های سبک علاقه دارید، می‌توانید نوع منبع را با استفاده از منو مستقیماً زیر پنجره برگه اصلی فیلتر کنید.

همچنین ترتیب درخواست منابع را خواهید آموخت. با استفاده از نمایش خط زمانی، ممکن است درک بهتری از اینکه چرا برخی از عناصر در صفحه شما دیرتر از سایرین نشان داده می شوند، به دست آورید.

پس از اینکه یک نمای کلی از همه منابع درخواستی و نحوه تشکیل کل جدول زمانی درخواست به دست آوردید، می‌خواهید به منابع جداگانه بپردازید.

اگر متوجه شدید که هر بار که به صفحه دسترسی پیدا می کنید، برخی از منابع درخواست می شود، این نشانه آن است که هدرهای ذخیره سازی شما به درستی پیکربندی نشده اند. می توانید با کلیک بر روی منبع موجود در لیست سمت چپ، تمام سرصفحه های یک منبع را مشاهده کنید.

از صفحه نمایش سرصفحه ها برای اطمینان از تنظیم کد پاسخ HTTP مورد انتظار و ارائه هدرهای مناسب استفاده کنید. به عنوان مثال، اگر منبع به ندرت یا هرگز تغییر نمی کند، سرور شما باید سرصفحه Expires را برای آینده ای دور تنظیم کند. این به مرورگر می‌گوید که منبع تا آن تاریخ دیگر نباید درخواست شود. این مقدار اتصالات HTTP مورد نیاز برای صفحه شما را کاهش می دهد و در نتیجه سرعت سایت شما را افزایش می دهد.

خلاصه

برگه منابع چیزهای بیشتری وجود دارد که در مقاله آینده به آنها خواهیم پرداخت.

از برگه منابع برای مشاهده نحوه ارتباط مرورگر مشتری با سرور وب استفاده کنید. با استفاده از این اطلاعات، از جمله زمان درخواست، اندازه درخواست، و سفارش درخواست، می توانید بهینه سازی های هوشمندی برای کاهش بار سرور، هزینه ها و افزایش سرعت و بهبود تجربه کاربر انجام دهید.

سرعت برای وب سایت شما، کاربران و موتورهای جستجو بسیار مهم است. هنگامی که تعداد و اندازه منابع کاهش یافت و مکالمات HTTP مناسب انجام شد، گام بعدی بررسی و بهینه سازی اسکریپت هایی است که در صفحه شما در حال اجرا هستند. خوشبختانه، تب Scripts که در ادامه به آن پرداخته شد، این کار را انجام می دهد.

منابع اضافی

برای اطلاعات بیشتر در مورد ابزارهای توسعه دهنده، می توانیم موارد زیر را توصیه کنیم:

• ویدیو و اسلایدهای ارائه ابزار توسعه‌دهنده Chrome از Google I/O 2010
• آموزش ابزارهای برنامه نویس کروم

و البته، با html5rocks.com برای قسمت 2 این مقاله همراه با بسیاری دیگر از محتوای عالی HTML5 و Chrome همراه باشید.