ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 32) : انتخابگر زمینه اجرا در Console

همونطور که اطلاع دارید در جلسه قبل تعدادی نکته کاربردی درباره Network در اختیارتون قرار دادم. در این جلسه میخوایم تعدادی نکته کاربردی در مورد انتخابگر زمینه اجرا یا Execution context در Console رو بهتون آموزش بدیم.

انتخاب کردن زمینه اجرا در Console

یک Dropdown در Console وجود داره که شاید تا بحال کاربرد اون رو نفهمیده باشید:

به این مورد انتخابگر زمینه اجرا میگن و با استفاده از اون میتونین زمینه اجرا رو مشخص کنید. این مورد در اکثر مواقع top رو نشون میده و منظور از top صفحه اصلی سایت یا همون بالاترین و اصلی ترین فریم سایت می باشد. فریم های دیگه، زمینه اجرا مستقل و مربوط به خودشون رو دارن. در حالت پیش فرض و زمانی که بر روی top قرار دارید، نمیتونین موارد مربوط به مثلا iframe رو در Console ببینید و در iframe دستکاری کنید.

در ابتدا باید زمینه اجرا اون iframe رو انتخاب کرده و بعد از اون کارهای مورد نظرتون که مربوط به اون فریم می باشد رو انجام بدید.

مثالی ساده

فرض کنید که یک فایل بنام index.html بسازیم و کدهای زیر رو درونش قرار بدیم:

میبینید که یک iframe قرار دادیم و فایل print.html رو بعنوان src قرار دادیم. با اینکار فریم صفحه print.html در index.html نمایش داده میشه. کدهای درون print.html بصورت زیر هستند:

همونطور که میبینید در انتها و درون تگ script یک متغیر بنام name تعریف کردیم و مقدار Mohammad رو برای اون قرار دادیم. حالا اگر index.html رو در مرورگر باز کنیم، بصورت زیر خواهد بود:

میبینید که print.html در index.html قرار گرفته است. حالا وارد Console میشیم:

میبینید که بصورت پیش فرض top انتخاب هست و زمانی که name رو میخوایم در Console چاپ کنیم، چیزی برای اون نمایش داده نمیشه و به این متغیر در این زمینه دسترسی نداریم.

انتخاب زمینه مورد نظر

حالا برای اینکه به iframe مورد نظر دسترسی داشته باشیم و بتونیم در اون دستکاری کنیم، باید بر روی انتخابگر زمینه اجرا کلیک کرده و iframe مورد نظر رو انتخاب کنیم:

میبینید زمانی که زمینه مربوط به print.html رو انتخاب میکنیم، میتونیم به راحتی به مواردی که درون اون وجود داره دسترسی داشته باشیم و مثل این میمونه که print.html رو مستقیما در مرورگر باز کرده و با استفاده از Console با اون کار کنیم.

زمانی که یک زمینه به جزء top انتخاب میکنید، با پس زمینه قرمز رنگ نمایش داده میشه:

حالا با استفاده از console میتونین هر دستکاری که بخواید درون محتوای این iframe به وجود بیارید.

زمانی که Inspector رو باز میکنیم، بصورت پیش فرض و در اکثر مواقع top نمایش داده میشه. اما اگر بر روی iframe کلیک راست کرده و Inspect Element رو بزنید، زمینه مربوط به اون iframe بصورت پیش فرض انتخاب میشه و دیگه نیازی نیست که بصورت دستی زمینه رو تغییر بدیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی