ترفند و تکنیک های Chrome Devtools که بهتره بلد باشید



visibility  
mode_comment   ۰

در این مطلب میخوایم تعدادی ترفند و تکنیک Chrome Devtools رو بهتون آموزش بدم که بهتره اونا رو بلد باشید و با استفاده از اونا روند تست و توسعه رو بهبود بدین و به اون سرعت ببخشین.ترفند و تکنیک های Chrome Devtools که بهتره بلد باشید

ترفند و تکنیک های Chrome Devtools که بهتره بلد باشید

1. Drag و Drop در تب Elements

در تب Elements، می تونید هر عنصر HTML را بکشید و رها کنید و موقعیت مکانی اون رو در صفحه تغییر بدید.

2. رفرنس دادن به المنت انتخابی در Console

یک تگ رو در پنل Elements انتخاب کنید و $0 رو در کنسول بنویسید تا اون رو ارجاع بدید. اگر از jQuery استفاده می کنید، می تونید $($0)  رو وارد کنید و به API jQuery برای عنصر دسترسی پیدا کنید.

3. استفاده از مقدار آخرین operation در Console

از $_ می تونید مقدار عملیات قبلی که در کنسول اجرا شده رو استفاده کنید و دسترسی داشته باشید.

4. اضافه کردن CSS و تغییر وضعیت المنت

در پانل Elements دو دکمه فوق العاده مفید وجود داره. اولین دکمه به شما اجازه می ده که یک ویژگی جدید CSS رو با selector مورد نظر خودتون اضافه کنید.

دومین دکمه به شما اجازه می ده که یک حالت را برای عنصر انتخاب شده ایجاد کنید، بنابراین می تونید حالت های اعمال شده رو هنگام فعال بودن، هاور شدن یا در حالت focus مشاهده کنید.

5. ذخیره کردن کدهای CSS تغییر داده شده

روی نام فایل CSS که اون رو قبلا ویرایش کردید کلیک کنید. inspector اون رو در قسمت Sources باز می کنه و شما از اونجا میتونید فایلتون رو با همون ویرایش های انجام شده ذخیره کنید. این ترفند برای selector های جدید که از + اضافه میشن کاربردی نیست و فقط برای فایلهایی که از قبل وجود دارند کاربرد داره.

6. گرفتن عکس از یک المنت

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

یک عنصر رو انتخاب کنید و cmd-shift-p را فشار بدید (یا این که در ویندوز ctrl-shift-p رو فشار بدید) تا منوی فرمان (Command Menu) باز بشه. بعد از اون می تونید گزینه Capture node screenshot رو انتخاب کنید.

7. پیدا کردن المنتها بر اساس نام کلاس

با فشار دادن cmd-f (ctrl-f در ویندوز) کادر جستجو در پانل Elements باز می شه. در اون کادر شما می تونید هر رشته ای رو تایپ کنید و یا این که می تونید از Selector های CSS استفاده کنید تا Chrome المنت مورد نظر رو برای شما پیدا بکنه.

8. Shift-enter در کنسول

برای نوشتن دستوراتی که در کنسول بیش از یک خط هستند، برای رفتن به سطر بعد کلید shift-enter رو فشار بدید. زمانی که script شما آماده شد، درانتهای اون Enter رو فشار بدید تا دستورات شما اجرا بشن:

شما می تونید کنسول رو با استفاده از دکمه Clear در سمت چپ کنسول یا با فشار دادن ctrl-l یا cmd-k پاک کنید.

9. رفتن به ...

در تب Sources، دستور cmd-o  و در ویندوز ctrl-o ،  تمام فایل های بارگذاری شده توسط صفحه شما رو نمایش میده.

کلید ترکیبی cmd-shift-o  در مک و ctrl-shift-o در ویندوز نمادهای (خواص، توابع، کلاس ها) رو را در فایل فعلی نشان میده و ctrl-g به یک خط خاص میره.

10. Watch Expression یا پایش تغییرات یک عبارت

به جای این که شما نام یک متغیر رو بارها و بارها در Console بنویسید و یا یک عبارت خاص رو در طول یک قسمت از debug مدام چک کنید، می تونید اون رو به لیست Watch Expression اضافه کنید و در هر لحظه تغییرات اون رو مشاهده کنید.

11. خطایاب XHR/Fetch

از بخش debugger پانل XHR / Fetch Breakpoints   رو باز کنید. شما می تونید رو به نحوی تنظیم کنید که هر زمان یک تماس XHR / Fetch ارسال می شه متوقف بشه و یا جوری تنظیم کنید که فقط در مواقع خاصی متوقف بشه.

12. خطایابی در زمان تغییر DOM

روی یک عنصر راست کلیک کنید و Break on Subtree Modifications رو فعال کنید. هر زمان که یک کد Javascript تغییراتی در فرزندان این المنت ایجاد کنه،debugger به طور خودکار متوقف می شه تا شما بتونید اون چیزی رو که اتفاق افتاده ببینید و بررسی کنید.

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

Source

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

نیاز به لاگین

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