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

- visibility ٨ mode_comment

در این مطلب میخوام تعدادی روش و تکنیک که با استفاده از اونا بیشتر میتونین از قدرت 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 روش بعدی رو خدمتتون میگم.

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

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

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

نیاز به لاگین

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