illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 239 ۲۰ شهریور ۹۵

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 رو پاک کنم.

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

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram