معرفی
سافاری وب اینسپکتور (Safari Web Inspector) مجموعه ابزار داخلی مرورگر Safari برای بررسی و اشکال‌زدایی صفحات وب است. این ابزار به توسعه‌دهندگان امکان می‌دهد ساختار HTML، سبک‌های CSS، درخواست‌های شبکه، اجرای JavaScript و مصرف منابع صفحه را بررسی و تحلیل کنند.
این ابزار برای توسعه‌دهندگان فرانت‌اند و فول‌استک اهمیت ویژه‌ای دارد، زیرا Safari از موتور مرورگر WebKit استفاده می‌کند. صفحه‌ای که در مرورگرهای مبتنی بر Chromium درست کار می‌کند، ممکن است در Safari روی macOS، iPhone یا iPad رفتار متفاوتی داشته باشد.
وب اینسپکتور امکان اتصال Safari در macOS به Safari روی دستگاه iOS یا iPadOS را فراهم می‌کند تا صفحات وب یا وب‌اپلیکیشن‌ها روی دستگاه واقعی بررسی شوند. این قابلیت برای پیدا کردن خطاهای لمسی، مشکلات چیدمان واکنشگرا، محدودیت‌های Safari موبایل و خطاهای JavaScript مفید است.
جریان عملی رفع خطای Safari
ابتدا قابلیت‌های توسعه‌دهنده Safari و Web Inspector را فعال کنید. سپس خطا را در Safari مک یا Safari دستگاه واقعی بازتولید کنید. عنصر مشکل‌دار را انتخاب کنید یا خطاهای کنسول و درخواست‌های ناموفق شبکه را بررسی کنید.
یک تغییر موقت در CSS یا JavaScript اعمال کنید تا علت احتمالی را بیازمایید. پس از یافتن راه‌حل، آن را در کد پروژه پیاده‌سازی کنید و همان مسیر را دوباره روی دستگاه آزمایش کنید. زمانی می‌توان اصلاح را موفق دانست که خطا دیگر بازتولید نشود و فرایند موردنظر، مانند ارسال فرم یا تکمیل پرداخت، در Safari روی دستگاه واقعی بدون مشکل انجام شود.
ویژگی‌های کلیدی
موارد زیر تصویری کلی از این بخش برای این ابزار ارائه میکنند.
-
بازرسی DOM و CSS
درخت عناصر صفحه، ویژگی‌ها و قوانین CSS را نمایش می‌دهد و امکان ویرایش موقت HTML و سبک‌ها را برای بررسی سریع مشکل چیدمان فراهم می‌کند.
-
اشکال‌زدایی JavaScript
می‌توانید خط توقف بگذارید، مقدار متغیرها و پشته فراخوانی را ببینید و اجرای کد JavaScript را مرحله‌به‌مرحله دنبال کنید.
-
تحلیل درخواست‌های شبکه
درخواست‌های HTTP، پاسخ‌ها، زمان‌بندی بارگذاری و خطاهای شبکه را نشان می‌دهد؛ برای بررسی API، فایل‌های استاتیک و کش مرورگر کاربرد دارد.
-
پروفایل عملکرد و منابع
ابزارهای Timeline و پروفایل‌گیری به شناسایی اسکریپت‌های پرهزینه، رندرهای مکرر و فعالیت‌هایی کمک میکنند که پاسخ‌گویی صفحه را کاهش می‌دهند.
-
کنسول توسعه‌دهنده
پیام‌های خطا، هشدارها و خروجی console را نمایش می‌دهد و محیطی برای اجرای دستورهای JavaScript در زمینه همان صفحه فراهم می‌کند.
-
بازرسی از راه دور دستگاههای iOS و iPadOS
با اتصال دستگاه به Mac و فعال‌سازی تنظیمات توسعه‌دهنده، می‌توان تب‌های Safari روی iPhone یا iPad را از Safari مک بررسی و اشکال‌زدایی کرد.
کاربردها
برای آشنایی بهتر با این ابزار، توجه به موارد زیر می‌تواند مفید باشد.
-
رفع تفاوت نمایش سایت در Safari
وقتی فونت، فاصله‌ها، انیمیشن یا چیدمان یک صفحه فقط در Safari مشکل دارد، عناصر و قوانین CSS مؤثر را مستقیماً در همان مرورگر بررسی کنید.
-
بررسی وب‌سایت روی iPhone واقعی
برای خطاهایی که فقط با لمس، اندازه نمایشگر یا Safari موبایل رخ می‌دهند، دستگاه iOS را به Mac متصل کنید و تب باز را با Web Inspector بازرسی کنید.
-
پیدا کردن خطای JavaScript در WebKit
اگر یک قابلیت، رویداد یا کد JavaScript در Safari کار نمی‌کند، از Console و Breakpoint برای یافتن خطا و بررسی مسیر اجرای کد استفاده کنید.
-
تحلیل کندی بارگذاری یا تعامل صفحه
با بررسی درخواست‌های شبکه و Timeline می‌توانید منابع کند، اجرای طولانی JavaScript یا فعالیت‌های پرتکرار رندر را تشخیص دهید.
-
اعتبارسنجی سازگاری وب‌اپلیکیشن
پیش از انتشار، مسیرهای اصلی وب‌اپلیکیشن را در Safari بررسی کنید تا مشکلات سازگاری با WebKit تنها پس از گزارش کاربران آشکار نشوند.
-
تأیید اصلاح یک خطای واقعی Safari
خطا را روی Safari یا دستگاه واقعی بازتولید کنید، عنصر یا درخواست مرتبط را در Web Inspector بررسی کنید، تغییر موقت را بیازمایید و پس از اصلاح کد همان مسیر را دوباره اجرا کنید. موفقیت یعنی خطا تکرار نشود و جریان کار کامل شود.
ابزارهای جایگزین
پرسش‌های رایج درباره سافاری وب اینسپکتور
در این بخش، به تعدادی از پرسش‌های رایج درباره این ابزار پاسخ داده شده است.
چگونه Safari Web Inspector را فعال کنم؟
در Safari روی macOS، Settings را باز کنید و در بخش Advanced گزینه نمایش قابلیت‌های توسعه‌دهنده وب را فعال کنید. سپس منوی Develop ظاهر میشود و Web Inspector از آن در دسترس است. نام دقیق گزینه ممکن است با نسخه Safari تفاوت جزئی داشته باشد.
آیا Safari Web Inspector روی ویندوز قابل استفاده است؟
خیر، Safari Web Inspector همراه Safari روی macOS ارائه میشود. برای بررسی دقیق رفتار Safari و WebKit به یک Mac نیاز دارید.
آیا می‌توان Safari روی iPhone را با این ابزار دیباگ کرد؟
بله. در iPhone یا iPad، Web Inspector را از مسیر Settings، Apps، Safari، Advanced فعال کنید. سپس دستگاه را به Mac متصل و در Safari مک از منوی Develop، دستگاه و تب Safari موردنظر را انتخاب کنید. نام مسیرها ممکن است با نسخه iOS، iPadOS و Safari تفاوت جزئی داشته باشد.
Safari Web Inspector جای Chrome DevTools را میگیرد؟
برای توسعه روزمره بسیاری از قابلیتها مشابهاند، اما جایگزین کامل نیست. Safari Web Inspector برای مشاهده رفتار WebKit ضروری است و Chrome DevTools برای موتور Chromium کاربرد دارد.
چه زمانی تست Safari اولویت دارد؟
اولویت تست به سهم کاربران و دستگاههای هدف محصول وابسته است. اگر کاربران شما از iPhone، iPad یا macOS استفاده میکنند، مسیرهای اصلی ثبتنام، پرداخت، فرمها، منوهای لمسی و رابط واکنشگرا را در Safari بررسی کنید.
