خانه / آموزشی / معرفی ابزار توسعه دهنده( Developer Tools یا DevTools )گوگل کروم
معرفی ابزار توسعه دهنده( Developer Tools یا DevTools )گوگل کروم

معرفی ابزار توسعه دهنده( Developer Tools یا DevTools )گوگل کروم

داشتن یه پکیج کامل از ابزار های مختلف برای تست وب سایت برای کاربرهای حرفه ایی یه امر ضروریه. اما بهترین جا برای نگهداری این ابزار ها کجاست ؟ صددرصد داخل خود مرورگر بهترین جاس. بهتر بدونید که مرورگر محبوب گوگل یعنی کروم پکیج کاملی از این ابزار های مختلف برای سازنده و برنامه نویس های وب ساخته. ابزار توسعه دهنده وب کروم (یا DevTools) به کاربرا این امکان رو میده که داخل مرورگرشون روی انواع وب سایت و برنامه های تحت وب مختلف کار کنن و نهایت استفاده رو ببرن.

Chrome-Developer-Tools

 

با استفاده از DevTools کروم شما می تونید استایل های استفاده شده رو رو بشناسید، اندازه تصاویر و اسکریپت های استفاده شده و خیلی چیزهای دیگه رو ببینید و پیدا کنید. شما می تونید صفحه هات رو مشکل زدایی (دیباگ) کنید و علت خطاها رو تشخیص بدید. شما حتی می تونید استایل ها رو خاموش یا روشن کنید یا کلا تغییرشون بدید تا ببینید چه تغییراتی روی وب سایتتون اعمال میشه !

 

همش داخل مرورگرتونه

دسترسی به ابزارها بسیار آسونه. اما من باز ۳ روش که می تونید بهشون دسترسی پیدا کنید رو می نویسم:

 

  1. تو مرورگر کرومتون – منو کروم رو انتخاب کنید (سه تا خط افقی که بالا سمت راست مرورگر قرار داره)، بعد بع ترتیب اول More Tools و Developer Tools رو انتخاب کنید.
  2. روی یه المنت (یک شیء) تو صفحه وب کلیک راست کنید و بعد Inspect Element رو انتخاب کنید.
  3. تو سیستم عامل ویندوز کلید های ترکیبی Ctrl + Shift + i و تو مک cmnd + opt + i رو بزنید.

هرکدوم از این روش ها DevTools کروم رو پایین مرورگرتون باز می کنه.

It’s-In-Your-Browser

پنجره اصلی

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

ابزار ها تو منو پنجره اصلی قرار دارن که به ترتیب Elements, Network, Sources, Timeline, Profiles, Resources, Audits, و Console هستن.

Elements

تو اینجا شما میتونید ساختار HTML صفحه تون رو ببینید، پایین پنجره هم HTML و Body هست که اطلاعات مکانی که در حال حاضر قرار ویرایش بشه هست شما می تونید خیلی راحت هرجاای صفحه وب کلیک کنید تا اطلاعات و کدهای اونجا رو ببینید.

شما می تونید خیلی راحت با کلیک روش فلش های کنار هر تگ تگ مورد نظر رو باز کنید و کدهای داخلش رو ببینید و یا تگ های غیر ضرروری رو ببندید و فقط با تگ مورد نضرتون کار کنید، این قابلیت واقعا کمک زیادی به راحت خوندن کدها می کنه.

دیگر قسمت های این ابزار مرورگر کروم هم به همین قدرت آماده ارائه سرویس به شما طراحان وب عزیز هستن فقط کافیه بازشون کنید تا نحوه کارشون رو یاد بگیرید 😉

پیشنهاد می کنم حتما از این ابزار برای انجام کاراتون استفاده کنید.

 

 

درباره هادی صفرزاده

هادی صفرزاده هستم، برنامه نویس و طراح سایت از سال 86 در دنیای وب مشغول هستم. PHP - PYTHON - MYSQL - UI/UX

نظر بدهید

آدرس ایمیلتان منتشر نمیشودگزینه های الزامی ستاره دار شده اند *

*

برو بالا !