ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 13) : 5 ترفند و روش در Console

- visibility ٠ mode_comment

inspector

ترفند 24 : 5 ترفند و روش در Console

استفاده از دستور Inspect:

در این مطلب میخایم روشهایی رو به شما بگیم که با استفاده از اونا هم میتونین حرفه ای تر بشید و هم اینکه بیشتر از Console کار بکشید و وقتتون رو از دست ندید. یادتون هست که در قسمتهای قبلی گفتم که میتونین با زدن دستور $0 در Console، المنت فعال فعلی رو انتخاب کنید. یعنی تونستیم با اینکار یک رابطه بین تب Elements و Console ایجاد کنیم. حالا میخایم برعکس این کار رو انجام بدین. فرض کنید شما میخاید یک رابطه از Console و به Elements ایجاد کنید. برای اینکار کافیه که console رو در هر جایی که هست باز کرده و از دستور inspect استفاده کنید. برای مثال وارد سایت w3schools میشیم و به تب Console در Inspector میریم.inspector console tricks

حالا اگر ما دستور $('table.gssb_c') رو در console بزاریم و اجرا کنیم، المنت مورد نظر به ما برگشت داده میشه، بصورت زیر:inspector console tricks 2

حالا ما میخایم این دستور رو فقط در console نیاریم و میخایم inspector ما رو ببره درون تب elements و اون المنت رو برامون فعال کنه. برای اینکار دستور inspect($('table.gssb_c')) رو میزنیم و با اینکار بصورت اتوماتیک اون المنت برای ما انتخاب میشه و میتونین اون رو ویرایش و ... کنید.inspector console tricks 3

استفاده از دستور copy:

فرض کنید که شما میخاید نتیجه یک دستور مشخص رو کپی کرده و در جای دیگه ای از اون استفاده کنید. با استفاده از دستور کپی شما میتونین متن و چیزای دیگه رو درون حافظه موقت سیستمتون ذخیره کنید و درون نرم افزارهای دیگه از اون استفاده کنید. فرض کنید میخام نتیجه دستور $('table.gssb_c') رو در حافظه موقت ذخیره کنیم. برای اینکار دستور copy($('table.gssb_c')) رو زده و اینتر میزنیم.inspector console tricks 4

حالا اگر جای دیگه ctrl+v یا paste رو بزنیم، کدهای مورد نظر کپی میشن. مثلا من اونا رو در Sublime text میزارم:inspector console tricks 5

بهمین راحتی.

گرفتن مقادیر یک شئ یا Object:

فرض کنید که شما یک شئ دارید که میخاید به سرعت به مقادیر اون دسترسی داشته باشید. برای اینکار میتونین از دستور values استفاده کنید و اون شئ مورد نظر رو به عنوان آرگومان برای اون قرار بدین، مثلا من عبارت values({ one: 1, two: 2, three: 3 }) رو در Console قرار میدم و Enter میزنم:inspector console tricks 6

دیدید که به چه راحتی مقادیر شئ مورد نظر به ما برگشت داده شد.

استایل دادن به خروجی Console:

شما میتونین به راحتی میتونین به خروجی که در Console نمایش، استایل مورد نظرتون رو بدین. مثلا فرض کنید میخایم دستور Hello World رو بهش استایل بدیم و چاپش کنیم. برای اینکار دستور زیر رو در Console میزنیم:

به %c که در ابتدای Hello World هست دقت کنید. به عنوان آرگومان و ورودی دوم استایل مورد نظرمون رو به صورت دستورات css وارد کردیم. حالا اگر همین کد رو در Console قرار بدیم:inspector console tricks 7

پاک و خالی کردن سریع Console:

شما هر دفعه که بخاید محیط Console رو خالی کنید و اون رو تمیز کنید، لازم نیس که بر روی آیکون Clear کلیک کنید. بر روی این آیکون هاور کنید و خودش بهتون میگه که کلیدهای ترکیبی اون چی هست:inspector console tricks 8

میبینید که مال من Ctrl+l هست. از این به بعد به سرعت میتونم با استفاده از این دستور محیط Console رو پاک کنم.

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

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.