فراجاب

کروم دولوپر تولز؛ ابزار بررسی و اشکال‌زدایی وب

معرفی

«کروم دولوپر تولز» (Chrome DevTools) مجموعه‌ای از ابزارهای داخلی مرورگر گوگل کروم برای بررسی، تحلیل و اشکال‌زدایی وب‌سایت‌ها و وب‌اپلیکیشن‌ها است. توسعه‌دهندگان با استفاده از این ابزارها می‌توانند بدون ترک کردن صفحات وب، ساختار HTML، سبک‌های CSS، خطاهای JavaScript، درخواست‌های شبکه و داده‌های ذخیره شده در مرورگر را بررسی کنند.

چه افرادی از Chrome DevTools استفاده می‌کنند؟

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

نحوه دسترسی به Chrome DevTools

کروم دولوپر تولز بخشی از مرورگر Chrome است و به نصب جداگانه نیازی ندارد. این ابزار را می‌توان با کلید F12، میانبر «Ctrl + Shift + I» (در سیستم‌عامل مک با «⌘ + ⌥ + I») یا انتخاب گزینه Inspect با کلیک‌راست روی صفحه باز کرد.

البته، تسلط بر Chrome DevTools به معنای حفظ کردن همه قابلیت‌های پنل‌ها نیست و باید بدانید برای هر مسئله از کدام پنل، مانند Elements، Console، Network یا Performance استفاده کنید.

استفاده از ابزارهای توسعه در مرورگرهای دیگر

برای بررسی رفتار وب‌سایت در Firefox و Safari، به‌ترتیب Firefox Developer Tools و Safari Web Inspector ابزارهای بومی و مناسب آن مرورگرها هستند. با این حال، Chrome DevTools جای آزمایش وب‌سایت در موتورهای مرورگر دیگر را نمی‌گیرد. به‌ویژه هنگام بررسی تفاوت‌های نمایش، عملکرد یا قابلیت‌های مرورگرها، بهتر است صفحه را در مرورگر هدف نیز آزمایش کنید.

ویژگی‌های کلیدی

موارد زیر تصویری کلی از این بخش برای این ابزار ارائه می‌کنند.

  • بررسی و ویرایش DOM و CSS

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

  • اشکال‌زدایی JavaScript

    پنل Sources امکان گذاشتن breakpoint، اجرای مرحله‌به‌مرحله کد، مشاهده متغیرها و بررسی زنجیره فراخوانی را فراهم می‌کند. Console علاوه بر نمایش خطاها، هشدارها و خروجی‌ها، امکان اجرای دستورات JavaScript را نیز فراهم می‌کند.

  • تحلیل درخواست‌های شبکه

    در پنل Network می‌توانید درخواست‌های HTTP، زمان پاسخ، کد وضعیت، هدرها، بدنه درخواست و پاسخ و ترتیب بارگذاری منابع را بررسی کنید. این پنل برای عیب‌یابی API و منابعی که دیر بارگذاری می‌شوند مفید است.

  • بررسی ذخیره‌سازی مرورگر

    پنل Application داده‌هایی مانند Cookie، Local Storage، Session Storage، Cache Storage و IndexedDB را نمایش می‌دهد. می‌توانید داده‌های آزمایشی را حذف یا تغییر دهید و اثر آن را در برنامه ببینید.

  • شبیه‌سازی نمایشگر و شرایط شبکه

    Device Mode نمایش صفحه را در ابعاد مختلف بررسی می‌کند. همچنین، می‌توانید سرعت شبکه را شبیه‌سازی و CPU را به‌صورت شبیه‌سازی‌شده محدود (Throttle) کنید تا رفتار رابط وب را در شرایط ضعیف‌تر ارزیابی کنید.

  • اندازه‌گیری عملکرد رابط وب

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

  • ممیزی کیفیت با Lighthouse

    Lighthouse گزارش‌هایی درباره عملکرد، دسترس‌پذیری، سئو و «بهترین شیوه‌ها» (Best Practices) تولید می‌کند. این گزارش باید نقطه شروع بررسی باشد، نه جایگزین آزمون واقعی با کاربران و دستگاه‌های گوناگون.

کاربردها

برای آشنایی بهتر با این ابزار، توجه به موارد زیر می‌تواند مفید باشد.

  • پیدا کردن علت نمایش نادرست یک جزء

    وقتی یک دکمه، کارت یا منو در صفحه درست نمایش داده نمی‌شود، با Elements قوانین CSS مؤثر، ابعاد محاسبه‌شده و ساختار DOM را بررسی کنید تا علت مشکل را از میان استایل‌های متداخل پیدا کنید.

  • عیب‌یابی خطای API در رابط وب

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

  • بررسی واکنش‌گرایی پیش از تحویل

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

  • تحلیل کندی هنگام تعامل کاربر

    برای صفحه‌ای که هنگام کلیک، اسکرول یا باز شدن یک پنجره کند می‌شود، یک ضبط Performance بگیرید و وظایف (Long Tasks) جاواسکریپت، محاسبات چیدمان و رندرهای پرتکرار را بررسی کنید.

  • بازبینی داده‌های نشست کاربر

    در زمان عیب‌یابی ورود، خروج یا حفظ وضعیت کاربر، Cookie و Local Storage را در پنل Application بررسی کنید. از تغییر داده‌های واقعی یا حساس در محیط عملیاتی پرهیز کنید.

پرسش‌های رایج درباره کروم دولوپر تولز

در این بخش، به تعدادی از پرسش‌های رایج درباره این ابزار پاسخ داده شده است.

آیا کروم دولوپر تولز نیاز به نصب دارد؟

خیر. این ابزار به‌صورت داخلی در Google Chrome وجود دارد. معمولاً با F12، Ctrl+Shift+I یا انتخاب گزینه Inspect با راست‌کلیک روی صفحه باز می‌شود.

آیا تغییر CSS در DevTools روی سایت اصلی اثر می‌گذارد؟

خیر. تغییرهای پنل Elements معمولاً فقط در مرورگر شما و تا زمان بارگذاری مجدد صفحه باقی می‌مانند. برای اعمال دائمی باید فایل‌های پروژه را ویرایش و منتشر کنید.

برای دیباگ API از کدام پنل استفاده کنم؟

از پنل Network شروع کنید. درخواست موردنظر را باز کنید و URL، کد وضعیت، هدرها و پاسخ را بررسی کنید. اگر خطای JavaScript رخ داده است، پنل Console را هم ببینید.

آیا Device Mode جای آزمون روی موبایل واقعی را می‌گیرد؟

خیر. Device Mode برای بررسی سریع اندازه و چیدمان مفید است، اما تفاوت مرورگر، عملکرد دستگاه، لمس و شبکه واقعی را کاملاً شبیه‌سازی نمی‌کند.

آیا DevTools فقط برای توسعه‌دهنده فرانت‌اند است؟

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

آموزش‌های مرتبط در فرادرس

منابع پیشنهادی

برچسب‌ها و کلیدواژه‌ها

کروم دولوپر تولزChrome DevToolsدیباگ جاوا اسکریپتبررسی DOMدیباگ CSSبررسی Networkبهینه‌سازی عملکرد وبLighthouseDevice Mode