زمانی که یک صفحه وب لود می شود، مرورگر یک ساختار درختی از تمام اشیای موجود در صفحه HTML می‌سازد (که اصطلاحا به «مدل شیء‌گرا» یا DOM معروف است).
المان‌های دینامیک، صرفا همان المان‌های معمول HTML هستند که می‌شناسید؛ منتها آن چیزی که به این المان‌ها خصلت پویا یا «دینامیک» می‌دهد اینست که همگی به واسطه مرورگر و فقط در زمان اجرا، در این ساختار درختی ایجاد می‌شوند. این المان‌ها تقریبا همیشه پویایی خودشان را از جاوااسکریپت می‌گیرند و جاوااسکریپت می‌تواند المان‌های HTML را تغییر دهد یا حذف و اضافه کند.
حالا از این توضیحاتِ نه چندان لازم و گیج‌کننده بگذریم و برای جا افتادن صورت مساله، یک منو را با تب‌های مختلف فرض کنید که هر زمان ماوس روی یک تب می‌رود باز می‌شود و زیرمنو نمایش داده می‌شود.
اگر شما بخواهید از المان‌های این منو Inspect بگیرید، قاعدتا آن را باز می‌کنید و در قسمتی از آن کلیک راست و گزینه Inspect را انتخاب می‌کنید. ولی مشکل این است که بعد از این، منو بلافاصله بسته می‌شود و مجددا برای Inspect کردن سایر بخش‌ها مجبورید این چرخه را مدام تکرار کنید.
حالا سوال این است که چطور می‌شود در این مثال منو را بعد از باز شدن، در همان حالت «فریز» کرد (یا به طور دقیق‌تر اسکریپت آن را غیرفعال کرد) تا بعد بشود با خیال راحت تمام قسمت‌های آن را Inspect کرد.
این قابلیت در Developer Tools مرورگرها گنجانده شده است، یعنی کافی است که:
1) با فشردن کلید F12 وارد Developer Tools بشوید.
2) اگر از مرورگر کروم استفاده می‌کنید، وارد تب Sources شوید و اگر از فایرفاکس استفاده می‌کنید، وارد تب Debugger.
3) منو را باز کنید و کلید F8 را بزنید تا حالت Debug فعال شود.
کار تمام است و الان با خیال راحت می‌توانید المان‌های منوی موردنظر را (در این مثال) اینسپکت کنید. حالا همین مراحل را می‌شود به سایر المان‌های دینامیک HTML در صفحات وب تعمیم داد و از آن استفاده کرد.
وندا نوژن
