چگونه خطاهای جاوااسکریپت را در کنسول مرورگر پیدا کنیم؟
چرا سایت شما در مرورگر یک نفر بههم میریزد و در مرورگر دیگری سالم است و چطور با کنسول مرورگر، در پنج دقیقه منبع دقیق خطا را پیدا کنید؟
یکی از عجیب‌ترین پرونده‌های پشتیبانی که به یاد دارم، این بود: سایت روی مرورگر طراح کاملاً سالم بود، ولی مشتری گزارش می‌داد «فرم تماس کار نمی‌کند». وقتی از مشتری پرسیدم کدام مرورگر، گفت «مرورگر پیش‌فرض گوشی». بعد از دو ساعت جست‌وجو، فهمیدم روی آن مرورگر، یکی از فایل‌های جاوااسکریپت به‌دلیل نسخهٔ قدیمی، یک خطای نحوی داشت که فرم را بی‌کار می‌کرد — خطایی که فقط در کنسول همان مرورگر دیده می‌شد. آن روز، به این نتیجه رسیدم که کنسول مرورگر، یکی از ابزارهای ضروریِ هر توسعه‌دهنده و صاحب سایت است، نه یک ابزار لوکس. این مقاله، مسیری است که در پنج دقیقه شما را به منبع خطا می‌رساند. اگر تازه با مفهوم کنسول و ابزارهای مرورگر آشنا می‌شوید، ابتدا افزونه‌های ضروری مرورگر برای توسعه‌دهندگان را ببینید.
کنسول مرورگر دقیقاً چه چیزی را نشان می‌دهد؟
کنسول مرورگر، سه دسته پیام را نشان می‌دهد: اول، خطاهای جاوااسکریپت — هر خطای اجرای کد که هنگام لود یا تعامل کاربر رخ می‌دهد. دوم، هشدارها — پیام‌های هشدار که مانع اجرای کد نمی‌شوند ولی نشانهٔ مشکل هستند (مثل استفاده از API قدیمی). سوم، پیام‌های لاگ — پیام‌هایی که خود توسعه‌دهنده با console.log اضافه کرده. برای صاحب سایت، خطاها مهم‌ترین دسته هستند، چون معمولاً به‌معنای از کار افتادن یک قابلیت است.
کنسول مرورگر، دفتر شکایت کاربران است؛ هر خطای آن، یک کاربر احتمالی ناراضی است.
باز کردن کنسول در سه مرورگر اصلی
روش‌های سریع: Chrome، Edge و Brave: کلید F12 یا Ctrl+Shift+I (در ویندوز) و Cmd+Option+I (در مک). Firefox: همان کلیدها. Safari: ابتدا باید در تنظیمات، منوی توسعه‌دهنده را فعال کنید، بعد با Cmd+Option+C. توصیه: در Chrome و Firefox، سربرگ Console را به تب پیش‌فرض تغییر دهید تا هر بار باز کردن، مستقیم به کنسول برود.
آناتومی یک خطای جاوااسکریپت
یک پیام خطای استاندارد در کنسول، این‌طور دیده می‌شود:
Uncaught TypeError: Cannot read property 'value' of null
at updateForm (main.js:145:23)
at HTMLFormElement.onsubmit (main.js:178:5)سه بخش اصلی: اول، نوع خطا — Uncaught TypeError. دوم، پیام توصیفی — Cannot read property 'value' of null. سوم، مسیر دقیق — main.js:145:23 یعنی فایل main.js، خط ۱۴۵، ستون ۲۳. این سه بخش، شما را در چند ثانیه به منبع خطا می‌رسانند.
انواع خطاهای جاوااسکریپت در کنسول
پنج نوع خطای شایع که در پروژه‌های وردپرسی زیاد دیده‌ام:
- TypeError: استفاده نادرست از یک مقدار — مثل خواندن خاصیت از
null. مسیر کامل در خطای TypeError در جاوااسکریپت چیست. - ReferenceError: ارجاع به متغیری که وجود ندارد. مسیر در رفع خطای ReferenceError در جاوااسکریپت.
- SyntaxError: خطای نحوی — معمولاً در فایل‌های دست‌کاری‌شده. مسیر در خطای SyntaxError در جاوااسکریپت.
- Undefined: استفاده از مقدار
undefinedبه‌جای مقدار معتبر. مسیر در چگونه خطای undefined را برطرف کنیم. - CORS: مسدود شدن درخواست به‌دلیل سیاست امنیتی مرورگر. مسیر در خطای CORS در جاوااسکریپت.
خواندن خطا: از سمت راست به چپ
پیشنهاد می‌کنم خطاها را از سمت راست بخوانید: اول، مسیر فایل و شمارهٔ خط — این شما را به محل خطا می‌رساند. دوم، پیام توصیفی — این به شما می‌گوید چه چیزی اشتباه است. سوم، نوع خطا — این به شما می‌گوید جنس مشکل چیست. یک ترفند عملی: اگر در کنسول، تعداد خطاها زیاد است، روی فلش کوچک کنار هر خطا کلیک کنید تا stack trace کامل باز شود. این کار به شما می‌گوید کدام فایل، خطا را ایجاد کرده و کدام فایل آن را فراخوانی کرده است.
سربرگ Network: یافتن خطاهای بارگذاری
بخشی از خطاهای جاوااسکریپت در کنسول دیده نمی‌شوند، بلکه در سربرگ Network هستند. مثلاً اگر فایلی با خطای ۴۰۴ بارگذاری نشود، کنسول فقط می‌گوید Failed to load resource. در سربرگ Network می‌توانید ببینید کدام فایل بارگذاری نشده و چه کدی برگشته. توضیح کامل این خطا در خطای Failed to load resource در جاوااسکریپت.
Source Maps: یافتن خطا در کد اصلی
در سایت‌هایی که از Minify یا Bundle استفاده می‌کنند، خطا در فایل فشرده دیده می‌شود (مثل main.min.js) که خواناتر نیست. راه‌حل: فعال‌سازی Source Maps. اگر افزونه‌های بهینگی مثل Autoptimize یا WP Rocket روی سایت شما فعال است، گزینهٔ «Generate Source Maps» را فعال کنید تا در کنسول، خطا به فایل اصلی نسبت داده شود.
جدول انواع پیام‌های کنسول
| نوع پیام | رنگ | معنی | اقدام |
|---|---|---|---|
| خطا (Error) | قرمز | کد اجرا نشد | فوری رفع |
| هشدار (Warning) | زرد | کد اجرا شد ولی مشکل‌دار | در فرصت مناسب |
| لاگ (Log) | مشکی/خاکستری | پیام توسعه‌دهنده | در فاز تولید حذف |
| خطای شبکه | قرمز در Network | فایل بارگذاری نشد | بررسی مسیر فایل |
تکنیک‌های دیباگ
چهار تکنیک که در پروژه‌های خودم زیاد استفاده می‌کنم:
- Breakpoint: در سربرگ Sources، روی شمارهٔ خط کلیک کنید تا نقطه توقف فعال شود. با رفرش صفحه، کد متوقف می‌شود و می‌توانید مقدار متغیرها را ببینید.
- Console.log هدفمند: در محل مورد نظر، پیام‌هایی با شماره اضافه کنید تا ترتیب اجرا را ببینید.
- Preserve log: فعال‌کردن گزینهٔ Preserve Log در تنظیمات کنسول، باعث می‌شود خطاها بین بازخوانی‌های صفحه حفظ شوند.
- Console Snippets: در Chrome، از بخش Sources → Snippets استفاده کنید تا اسکریپت‌های کوچک را سریع اجرا کنید.
خطاهای جاوااسکریپت در وردپرس
در وردپرس، سه منبع شایع خطاهای جاوااسکریپت: اول، افزونه‌های سازگارنبوده با jQuery جدید. دوم، ادغام نادرست CSS و JS توسط افزونه‌های بهینگی. سوم، تداخل بین دو افزونه که هر دو از یک API استفاده می‌کنند. مسیر تشخیص افزونهٔ مقصر در چگونه افزونه مشکل‌ساز وردپرس را پیدا کنیم؟ و رفع خطای تضاد افزونه‌ها در وردپرس. برای بهینگی، توصیه می‌کنم ابتدا قابلیت‌های ادغام را خاموش کنید و مرحله‌مرحله فعال کنید — مسیر دقیق در WP Rocket یا W3 Total Cache و بهترین افزونه‌های کش وردپرس.
ابزارهای کمکی
سه ابزار که در پروژه‌های خودم استفاده می‌کنم: اول، افزونه‌های مرورگر مثل Console Recorder برای ذخیرهٔ خطاها. دوم، سرویس‌های مانیتورینگ مثل Sentry برای دریافت خطاهای کاربران واقعی. سوم، ابزار Chrome DevTools که پایهٔ اصلی است. مسیر تکمیلی در این مقاله.
نگاه عمیق به مدیریت خطا در مرورگر
برای توسعه‌دهندهٔ ارشد، مدیریت خطا در مرورگر فراتر از خواندن پیام‌های کنسول است. سه اصل که در پروژه‌های خودم رعایت می‌کنم: اصل اول — ثبت فعال خطاها. روی سایت، یک شنوندهٔ خطا (Error Listener) با window.addEventListener('error', ...) ثبت کنید تا خطاها را در سرور ذخیره کنید. این رویکرد، خطاهای کاربران واقعی را می‌گیرد که در تست محلی هرگز دیده نمی‌شوند. اصل دوم — تست در چند مرورگر. سایت شما باید حداقل در Chrome، Firefox، Safari و مرورگر موبایل تست شود. تفاوت‌های مرورگری، شایع‌ترین دلیل خطاهای گزارش‌شده در پشتیبانی است. اصل سوم — خطا به‌عنوان سیگنال. هر خطای جاوااسکریپت، یک سیگنال از یک بخش شکنندهٔ سیستم است. این سیگنال‌ها را در یک داشبورد مانیتورینگ جمع کنید و به‌طور دوره‌ای مرور کنید. در یکی از پروژه‌های بزرگم، این رویکرد باعث شد یک خطای نادرِ مرورگری را قبل از اینکه به گزارش مشتری تبدیل شود، پیدا کنیم.
یک نکتهٔ عملی که در تجربه‌های خودم ارزشش را ثابت کرده: هر بار که یک قابلیت جدید به سایت اضافه می‌کنید، بعد از انتشار، دو دقیقه کنسول را باز کنید و ببینید آیا خطای جدیدی ظاهر شده. این دو دقیقهٔ ساده، جلوی هفته‌ها پشتیبانی را می‌گیرد — چون خطاهای جاوااسکریپت، معمولاً قبل از اینکه به چشم کاربر بیایند، در کنسول ظاهر می‌شوند. برای مطالعهٔ ادامهٔ مسیر، مدیریت خطا در جاوااسکریپت و ابزارهای اشکال‌زدایی جاوااسکریپت و دیباگ کردن Action و Filter در وردپرس را پیشنهاد می‌کنم.
اگر خطای جاوااسکریپتی داشته‌اید که روزها وقت‌تان را گرفته و فقط از طریق کنسول حل شده، سناریو را در دیدگاه بنویسید. همین پرونده‌ها، مسیر تشخیص را برای خوانندگان بعدی دقیق‌تر می‌کنند. 🔍
نویسنده در وردپرس کار.