ابزار و نرم افزارها : ابزارهای توسعه‌دهنده مرورگر چیست؟

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

نحوه باز کردن ابزارهای توسعه (devtools) در مرورگر

ابزارهای توسعه (devtools) در مرورگر شما، در یک زیرپنجره که تقریباً شبیه به این است، بسته به مرورگری که استفاده می‌کنید، قرار دارند: چگونه آن را بالا بیاورید؟ سه راه: - صفحه کلید: یا - نوار منو: فایرفاکس: کروم: اپرا: سافاری: . ابزارهای توسعه‌دهنده سافاری به طور پیش‌فرض فعال نیستند. برای فعال کردن آنها، به بروید و گزینه یا را تیک بزنید. - منوی زمینه: روی یک مورد در صفحه وب کلیک راست/فشار دهید (در مک Ctrl را نگه دارید) و از منوی زمینه‌ای که ظاهر می‌شود، Inspect Element را انتخاب کنید. (یک مزیت اضافه: این روش بلافاصله کد عنصری را که روی آن کلیک راست کرده‌اید، هایلایت می‌کند.)

ابزارهای توسعه‌دهنده معمولاً به‌طور پیش‌فرض در inspector باز می‌شوند که چیزی شبیه به تصویر زیر است. این ابزار نشان می‌دهد که HTML صفحه شما در زمان اجرا چگونه به نظر می‌رسد، و همچنین CSS اعمال شده به هر عنصر در صفحه را نیز نشان می‌دهد. همچنین به شما امکان می‌دهد HTML و CSS را فوراً تغییر دهید و نتایج تغییرات خود را به‌صورت زنده در نمای مرورگر مشاهده کنید. اگر بازرس (inspector) را نمی‌بینید: فایرفاکس: برگه بازرس (Inspector) را انتخاب کنید. سایر مرورگرها: برگه عناصر (Elements) را انتخاب کنید.

بررسی DOM inspector

برای شروع، روی یک عنصر HTML در DOM inspector کلیک راست () کنید و به منوی زمینه نگاه کنید. گزینه‌های منوی موجود در مرورگرهای مختلف متفاوت است، اما موارد مهم اکثراً یکسان هستند:

delete node (گاهی اوقات حذف عنصر). عنصر فعلی را حذف می‌کند. (گاهی اوقات افزودن ویژگی/ویرایش متن). به شما امکان می‌دهد HTML را تغییر دهید و نتایج را درجا مشاهده کنید. برای اشکال‌زدایی و آزمایش بسیار مفید است. . حالت‌های عنصر را مجبور می‌کند تا فعال باشند، بنابراین می‌توانید ببینید که سبک‌بندی آنها چگونه خواهد بود. کپی/. HTML انتخاب شده فعلی را کپی کنید. برخی از مرورگرها همچنین گزینه‌های کپی CSS Path و کپی XPath را در دسترس دارند تا به شما امکان دهند انتخابگر CSS یا عبارت XPath را که عنصر HTML فعلی را انتخاب می‌کند، کپی کنید. اکنون سعی کنید برخی از DOM خود را ویرایش کنید. روی یک عنصر دوبار کلیک کنید یا روی آن راست کلیک کنید و ویرایش به عنوان HTML را از منوی زمینه انتخاب کنید. می‌توانید هر تغییری را که می‌خواهید انجام دهید، اما نمی‌توانید تغییرات خود را ذخیره کنید.

بررسی ویرایشگر CSS

به طور پیش‌فرض، ویرایشگر CSS قوانین CSS اعمال شده بر عنصر انتخاب شده فعلی را نمایش می‌دهد:

این ویژگی‌ها به ویژه مفید هستند: قوانین اعمال شده بر عنصر فعلی به ترتیب از بیشترین به کمترین اختصاصیت نشان داده می‌شوند. روی کادرهای انتخاب کنار هر تعریف کلیک کنید تا ببینید اگر تعریف را حذف کنید چه اتفاقی می‌افتد. روی فلش کوچک کنار هر ویژگی مختصرنویسی کلیک کنید تا معادل‌های کامل آن ویژگی را نشان دهید. روی نام یا مقدار یک ویژگی کلیک کنید تا یک کادر متنی ظاهر شود، جایی که می‌توانید مقدار جدیدی را وارد کنید تا پیش‌نمایش زنده‌ای از تغییر سبک داشته باشید. در کنار هر قانون، نام فایل و شماره خط قانون تعریف شده وجود دارد. کلیک روی آن قانون باعث می‌شود ابزارهای توسعه آن را در نمای خودش نشان دهند، جایی که معمولاً می‌توان آن را ویرایش و ذخیره کرد. همچنین می‌توانید روی آکولاد بسته هر قانون کلیک کنید تا یک کادر متنی در یک خط جدید ظاهر شود، جایی که می‌توانید یک تعریف کاملاً جدید برای صفحه خود بنویسید. در بالای نمایشگر CSS متوجه چندین تب قابل کلیک خواهید شد: محاسبه‌شده: این گزینه سبک‌های محاسبه‌شده برای عنصر انتخاب‌شده فعلی (مقادیر نهایی و نرمال‌شده‌ای که مرورگر اعمال می‌کند) را نشان می‌دهد. طرح‌بندی: این بخش جزئیات حالت‌های طرح‌بندی CSS grid و flexbox را در صورتی که عنصری که بررسی می‌کنید از آنها استفاده کند، نشان می‌دهد. فونت‌ها: در فایرفاکس و سافاری، تب فونت‌ها فونت‌های اعمال شده بر عنصر فعلی را نشان می‌دهد. نمای مدل جعبه‌ای، مدل جعبه‌ای عنصر فعلی را به صورت بصری نشان می‌دهد، بنابراین می‌توانید با یک نگاه ببینید که چه padding، border و margin به آن اعمال شده است و محتوای آن چقدر بزرگ است. در فایرفاکس، این بخش در تب Layout قرار دارد؛ در سایر مرورگرها، در تب Computed قرار دارد. در برخی از مرورگرها، جزئیات جاوا اسکریپت عنصر انتخاب شده را نیز می‌توان در این پنل مشاهده کرد. در سافاری، این جزئیات در تب Node یکپارچه شده‌اند، اما در کروم، اپرا و اج در تب‌های جداگانه‌ای قرار دارند. ویژگی‌ها: ویژگی‌های شیء عنصر. شنودکنندگان رویداد: رویدادهای مرتبط با عنصر. درباره Inspector در مرورگرهای مختلف بیشتر بدانید: Firefox Page inspector Chrome DOM inspector (Inspector در Opera و Edge یکسان است) Safari Elements tab

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

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

برای دسترسی به دیباگر: فایرفاکس: ابزارهای توسعه‌دهندگان را باز کنید و برگه دیباگر را انتخاب کنید. سایر مرورگرها: ابزارهای توسعه‌دهندگان را باز کنید و برگه منابع را انتخاب کنید.

بررسی دیباگر

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

فهرست فایل‌ها

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

کد منبع

نقاط توقف را در جایی که می‌خواهید اجرا متوقف شود، تنظیم کنید. در تصویر زیر، هایلایت روی عدد ۱۸ نشان می‌دهد که خط دارای یک نقطه توقف است.

عبارات و نقاط توقف را تماشا کنید

پنل سمت راست لیستی از عبارات watch که اضافه کرده‌اید و نقاط توقفی که تنظیم کرده‌اید را نشان می‌دهد. در تصویر، بخش اول، Watch expressions، نشان می‌دهد که متغیر listItems اضافه شده است. می‌توانید لیست را برای مشاهده مقادیر موجود در آرایه گسترش دهید. بخش بعدی، Breakpoints، نقاط توقف تنظیم شده در صفحه را فهرست می‌کند. در ، یک نقطه توقف روی عبارت تنظیم شده است. دو بخش آخر فقط زمانی ظاهر می‌شوند که کد در حال اجرا باشد. بخش Call stack به شما نشان می‌دهد که چه کدی برای رسیدن به خط فعلی اجرا شده است. می‌توانید ببینید که کد در تابعی است که کلیک ماوس را مدیریت می‌کند و کد در حال حاضر روی نقطه توقف متوقف شده است. بخش آخر، Scopes، نشان می‌دهد که چه مقادیری از نقاط مختلف درون کد شما قابل مشاهده هستند. به عنوان مثال، در تصویر زیر، می‌توانید اشیاء موجود در کد را در تابع addItemClick مشاهده کنید.

اطلاعات بیشتر

درباره اشکال‌زدای جاوا اسکریپت در مرورگرهای مختلف بیشتر بدانید: اشکال‌زدای جاوا اسکریپت فایرفاکس اشکال‌زدای کروم (اشکال‌زدای اپرا و اج یکسان است) تب منابع سافاری

کنسول جاوا اسکریپت

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

برای دیدن اینکه چه اتفاقی می‌افتد، سعی کنید قطعه کدهای زیر را یکی یکی در کنسول وارد کنید (و سپس Enter را فشار دهید):

JAVASCRIPT

حالا سعی کنید نسخه‌های نادرست کد زیر را وارد کنید و ببینید چه چیزی دریافت می‌کنید.

JAVASCRIPT

شما شروع به دیدن انواع خطاهایی خواهید کرد که مرورگر برمی‌گرداند. اغلب، این خطاها نسبتاً مرموز هستند، اما تشخیص این مشکلات باید بسیار ساده باشد!

اطلاعات بیشتر

درباره کنسول جاوا اسکریپت در مرورگرهای مختلف بیشتر بدانید: کنسول وب فایرفاکس کنسول جاوا اسکریپت کروم (کنسول اپرا و اج یکسان است) API شیء کنسول سافاری و API خط فرمان کنسول