خطاهای مرورگر در کنسول ثبت شد

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

پیام‌های ثبت‌شده در کنسول یا از طرف توسعه‌دهندگان وب که صفحه را ساخته‌اند یا از طرف خود مرورگر می‌آیند. همه پیام‌های کنسول دارای سطح شدت هستند: Verbose ، Info ، Warning یا Error . یک پیام Error به این معنی است که مشکلی در صفحه شما وجود دارد که باید آن را حل کنید.

چگونه حسابرسی خطای مرورگر Lighthouse با شکست مواجه می‌شود

Lighthouse تمام خطاهای مرورگر را در کنسول ثبت می‌کند:

ممیزی Lighthouse خطاهای مرورگر را در کنسول نشان می‌دهد.

نحوه رفع خطاهای مرورگر

هر خطای مرورگری که Lighthouse گزارش می‌دهد را برطرف کنید تا مطمئن شوید صفحه شما مطابق انتظار برای همه کاربرانتان اجرا می‌شود.

Chrome DevTools شامل چند ابزار است که به شما کمک می‌کند علت خطاها را پیگیری کنید:

  • در زیر متن هر خطا، کنسول DevTools پشته فراخوانی (call stack) که باعث اجرای کد مشکل‌ساز شده است را نشان می‌دهد.
  • لینکی در بالا سمت راست هر خطا، کدی که باعث بروز خطا شده را به شما نشان می‌دهد.

برای مثال، این اسکرین‌شات صفحه‌ای را نشان می‌دهد که دو خطا دارد:

نمونه‌ای از خطاها در کنسول DevTools کروم.

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

در زیر متن هر خطا، کنسول DevTools پشته فراخوانی که خطا در آن ظاهر می‌شود را نشان می‌دهد. برای مثال، برای اولین خطا، کنسول نشان می‌دهد که یک تابع (anonymous) تابع init را فراخوانی کرده است که تابع doStuff را فراخوانی کرده است. کلیک روی لینک pen.js:9 در بالا سمت راست آن خطا، کد مربوطه را به شما نشان می‌دهد.

بررسی کد مربوط به هر خطا به این روش می‌تواند به شما در شناسایی و حل مشکلات احتمالی کمک کند.

اگر نمی‌توانید علت خطا را بفهمید، متن خطا را در یک موتور جستجو وارد کنید. اگر نمی‌توانید راه‌حلی برای مشکل خود پیدا کنید، سعی کنید در Stack Overflow سؤالی بپرسید.

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

منابع