اگر داری تو دنیای طراحی و توسعه وب قدم برمیداری، حتما اسم "DevTools" یا "ابزار توسعه‌دهنده" رو شنیدی. ولی ممکنه هنوز نفهمی دقیقاً چیه و چرا همه ازش استفاده می‌کنن. الان تو این مقاله قراره یاد بگیری چطور از DevTools استفاده کنی، بدون اینکه نیاز باشه ابزار خاصی نصب کنی، و چطور این ابزار کارت رو توی ساخت وب راحت میکنه.

DevTools چیه؟

DevTools یه مجموعه ابزاره که تو تمام مرورگرهای مدرن مثل Chrome، Firefox، Edge و Safari وجود داره. این ابزار بهت اجازه میده که داخل صفحه وب نفوذ کنی، کد HTML و CSS رو ببینی، تغییر بدی، مشکلات JS رو پیدا کنی و حتی عملکرد سایت رو تست کنی.

فرض کن داری یه دکمه می‌نویسی ولی رنگش درست نمیشه. بدون DevTools، تنها راه تست اینه که کد رو عوض کنی و دوباره ذخیره کنی. ولی با DevTools میتونی توی خود مرورگر کد رو تغییر بدی و فوری نتیجه رو ببینی!

چرا DevTools مهمه؟

  • مشاهده و تغییر HTML/CSS: میتونی توی کد صفحه تغییر بدی و فوراً نتیجه رو ببینی.
  • پیدا کردن اشکالات: خطاهای جاوااسکریپت، مشکلات CSS و بارگذاری نادرست المان‌ها رو پیدا کنی.
  • بهینه‌سازی عملکرد: متوجه بشی چه فایلی دیر لود میشه یا چه تابعی زمان‌بره.
  • تست واکنش‌گرایی: ببینی صفحه تو اندازه‌های مختلف چطور نمایش داده میشه.
  • بدون نصب اضافی: فقط کافیه یه مرورگر داشته باشی!

چطور DevTools رو باز کنیم؟

راه‌های زیادی برای باز کردن DevTools وجود داره. ساده‌ترین روش:

  • روی هر قسمت از صفحه کلیک راست کن و گزینه inspect یا "بررسی" رو انتخاب کن.
  • از کیبورد دکمه‌های F12 یا Ctrl + Shift + I (روی ویندوز) رو بزن.
  • تو مرورگر Chrome، از منوی بالا سمت راست روی سه نقطه کلیک کن و برو More tools > Developer tools

بخش‌های مهم DevTools

وقتی DevTools رو باز کردی، چند تب اصلی رو می‌بینی. هر کدوم یه کار مخصوصی انجام میده:

1. Elements (عناصر)

این قسمت کد HTML و CSS صفحه رو بهت نشون میده. میتونی المان‌ها رو انتخاب کنی، کد رو ویرایش کنی و ببینی دقیقاً کدوم CSS به کدوم المان اعمال شده.

 
احالا توی DevTools (تب Elements)، روی دکمه کلیک کن و کلاس btn-danger رو پیدا کن. بعدش اون رو پاک کن و btn-primary رو جاش بنویس. دکمه فوراً آبی میشه!

2. Console (کنسول)

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


console.log("سلام دنیا!");

3. Network (شبکه)

این قسمت همه فایل‌هایی که صفحه بارگذاری میکنه (مثل CSS، JS، تصاویر) رو نشون میده. میتونی ببینی کدوم فایل دیر لود میشه یا اصلاً نتونسته بار بشه.

4. Sources (منابع)

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

5. Application (کاربرد)

اینجا میتونی دیتا‌های ذخیره شده تو مرورگر مثل localStorage، sessionStorage و cookies رو ببینی و مدیریت کنی.

مثال عملی: تغییر رنگ یه دکمه توی DevTools

فرض کن یه دکمه داری که رنگش قرمزه ولی میخوای ببینی اگر آبی بشه چطور میشه.

تست واکنش‌گرایی با DevTools

یکی از کاربردهای خیلی مفید DevTools، تست ظاهر سایت توی اندازه‌های مختلفه. مثلاً میخوای ببینی سایت توی موبایل چطور نمایش داده میشه.

  1. DevTools رو باز کن.
  2. دکمه Toggle device toolbar رو پیدا کن (معمولاً یه آیکون گوشی و تبلت).
  3. صفحه رو کوچیک کن و بزرگ کن و ببین چطور المان‌ها ردیف میشن.

حل مشکلات با کنسول

اگر برنامه‌ات کار نکرد، اولین جایی که باید سر بزنی، تب Console هست. مثلاً اگر یه تابع رو فراموش کردی تعریف کنی، کنسول یه خطا نشون میده:


Uncaught ReferenceError: myFunction is not defined

این یعنی تابع myFunction رو نداریم تو کد. حالا میفهمی چی اشتباهه و میتونی رفعش کنی.

نتیجه‌گیری

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

با تشکر از خوندنت! 😊 اگر دوست داشتی بیشتر یاد بگیری، منتظر مقاله بعدی "کار با کنسول و Debug کردن" باش!