با استفاده از DevTools مرورگر، دلیل اجرا نشدن (یا به‌روز نشدن) DOM پس از کلیک روی یک دکمه در یک اسکریپت JavaScript را با قرار دادن breakpoint و بررسی مقادیر متغیرها پیدا و اصلاح کن.

8.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 00:48

0.0

صفحه را در مرورگر باز کن و DevTools را با کلید F12 یا راست‌کلیک → Inspect باز کن؛ در پنجره Sources از قسمت Event Listener Breakpoints یا با قرار دادن breakpoint روی خطی از کد که handler کلیک را تعریف می‌کند، اجرای برنامه را متوقف کن. با ابزارهای Step Over/Into/Out و پنل Scope و Watch مقادیر متغیرها و call stack را بررسی کن تا متغیر اشتباه، مقدار undefined یا مشکلی در تسلسل اجرای کد را بیابی؛ در صورت نیاز از کنسول (Console) برای اجرای دستورات کوتاه یا تغییر مقادیر در زمان اجرا استفاده کن. نکته‌ها: از pretty-print برای فایل‌های مینیفای شده، breakpoint شرطی برای جلوگیری از توقف‌های غیرضروری و ویرایش سریع کد در DevTools (local overrides یا Live Edit) برای تست اصلاحات استفاده کن و در نهایت تغییر مناسب را در فایل پروژه ذخیره کن.

توسط پژوهشگر در 198 روز قبل ساعت 00:48
دسته بندی ها: JavaScript JavaScript for beginner
sara در 198 روز قبل ساعت 00:49

ابتدا DevTools را با F12 باز کن و در تب Sources یا از Event Listener Breakpoints یک breakpoint روی هندلر کلیک بگذار تا اجرای کد متوقف شود و با Step Into/Over توالی اجرا را دنبال کن. در پنل Scope و Watch متغیرها و call stack را بررسی کن تا متغیری که undefined است یا شرط خروج زودهنگام را شناسایی کنی؛ در صورت لزوم از Console برای تغییر مقادیر در زمان اجرا استفاده کن. برای فایل‌های مینیفای شده از pretty‑print و برای جلوگیری از توقف‌های بی‌مورد از breakpointهای شرطی بهره بگیر، و تغییرات سریع را با Live Edit یا Local Overrides تست کن. پس از پیدا کردن اصلاح، تغییر مناسب را در فایل پروژه ذخیره کن تا مشکل DOM به‌روزرسانی شود.

گزارش

1 پاسخ

جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من

در حال بارگیری...
ورود به حساب کاربری