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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

12 تکنیک و روش کار کردن با Inspector مرورگر Chrome ( قسمت اول )

8 1529 ۶ اردیبهشت ۹۴

در این مطلب میخوام تعدادی روش و تکنیک که با استفاده از اونا بیشتر میتونین از قدرت Inspector کروم بهره ببرید رو خدمتتون عرض کنم و بتونین زودتر کاراتون رو انجام بدین و به هدفتون برسید. برای هر مورد یک تصویر gif قرار داده شده که از سایت منبع گرفته شده و برای درک بهتر براتون قرار میدم.

15-chrome-devtools-tips-and-tricks

 

1. جابجا شدن سریع بین فایلها :

با استفاده از این روش میتونین با سرعت هر چه تمامتر بین فایلهای موجود در اون سایت جابجا بشید. برای اینکار Inspector رو باز کنید و روی دکمه های ترکیبی Ctrl + P کلیک کنید ، با اینکار یک باکس باز میشه و میتونین اسم فایل مورد نظر رو بنویسید. این جستجو بصورتی هست که وقتی شما یک حرف رو تایپ میکنید ، فقط اون فایلهایی که درون اسمشون اون حرف رو دارن در نتایج باقی میمونن ، که این به شما کمک میکنه که زودتر فایلتونو پیدا کنید.

1

2. جستجو کلی در کدها :

با استفاده از این روش شما میتونین به جستجو کلی در کدهای سایت مورد نظر بپردازید. مثلا فرض کنید میخواید ببینید یک کلمه خاص در کجاهای سایت قرار داده شده و وجود داره. برای اینکار باید دکمه های ترکیبی Ctrl + Shift + F رو فشار بدید تا بخش مورد نظر باز بشه ، درون تکس باکس مربوطه عبارت مورد نظر خودتون رو تایپ کنید و Enter بزنید. با اینکار همه کدهایی که چنین کلمه هایی در خودشون دارن ظاهر میشه و پر رنگ میشن. همچنین بیان میشه که اون کد در چه فایل و چه آدرسی وجود داره.

2.SearchAll

3. رفتن سریع به خطی مشخص :

با استفاده از این روش میتونین با سرعت هر چه تمامتر به خط مورد نظر خودتون برید. مثلا فرض کنید که یک فایل رو در Inspector باز کردید و 10000 خط داشت. پیدا کردن خط 7250 شاید یکم وقت گیر باشه ، اینجاست که این روش به کمکمون میاد. برای اینکار دکمه های ترکیبی Ctrl + G رو فشار بدین و عدد خط مورد نظر رو وارد کرده و Enter بزنید.

3.JumpToLine

4. انتخاب عناصر در Console :

فرض کنید میخواید درون Console موجود در Inspector کدهاتون رو تست کنید و نیاز دارید که المنتهای مختلف رو انتخاب کنید. برای اینکار تعدادی روش وجود داره. با نوشتن $('div') در Console اولین div موجود در صفحه انتخاب میشه. اینکار دقیقا برابر با document.querySelector('div') هست.

با نوشتن $$('div') در Console تمام div های موجود در صفحه انتخاب میشن. اینکار دقیقا برابر با document.querySelectorAll('div') هست.

با نوشتن $0 ، اون المنتی رو که هم اکنون در تب Element پر رنگ شده رو انتخاب میکنه.

4.

5. تایپ کردن همزمان در جاهای مختلف :

با استفاده از این روش لازم نیس که برای جاهای مختلف که لازم دارین یک کلمه مشابه رو وارد کنید ، یکبار اون کلمه رو بنویسید. میتونین کاری کنید که ، با یکبار تایپ کردن در همه مکانهای دلخواه شما ، اون عبارت تایپ بشه. برای اینکار کلید Ctrl رو نگه دارین و در مکانهایی که میخواید چیزی رو وارد کنید ، کلیک کنید ، با این کار در همه اون مکانها Cursor قرار میگیره و با تایپ کردن ، متن بصورت همزمان در همه جاها تایپ میشه.

5.MultipleSelectClick

6. تر و تمیز کردن و فرمت دادن به کدها :

وقتی که کدهاتون رو فشرده و minify میکنید ، خوندن و رفع کردن مشکلشون خیلی خیلی سخت میشه. میتونین با استفاده از این روش کدهایی که فشرده شدن رو از حالت فشرده در آورد و زودتر مشکل رو پیدا کرد. برای اینکار باید روی آیکون {} در تب Sources کلیک کنید.

7.PrettyPrint

در قسمت بعدی 6 روش بعدی رو خدمتتون میگم.

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

موفق باشید. یا علی

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

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    خیلی خوب بود.

    ممنونم.

  • ‏‏

    عالی بود :smile:
    خدا قوت آقای اسفندیاری ❓

  • ‏‏
    نازمحمد گری(۱۰ خرداد ۱۳۹۴)

    ممنون مطالب بسیار ارزنده ی بودند

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram