در این مطلب میخوایم تعدادی ترفند و تکنیک Chrome Devtools رو بهتون آموزش بدم که بهتره اونا رو بلد باشید و با استفاده از اونا روند تست و توسعه رو بهبود بدین و به اون سرعت ببخشین.
ترفند و تکنیک‌های Chrome Devtools که بهتره بلد باشید
1. Drag و Drop در تب Elements
در تب Elements، میتونید هر عنصر HTML را بکشید و رها کنید و موقعیت مکانی اون رو در صفحه تغییر بدید.
2. رفرنس دادن به المنت انتخابی در Console
یک تگ رو در پنل Elements انتخاب کنید و رو در کنسول بنویسید تا اون رو ارجاع بدید. اگر از jQuery استفاده می‌کنید، میتونید رو وارد کنید و به API jQuery برای عنصر دسترسی پیدا کنید.
3. استفاده از مقدار آخرین operation در Console
از میتونید مقدار عملیات قبلی که در کنسول اجرا شده رو استفاده کنید و دسترسی داشته باشید.
4. اضافه کردن CSS و تغییر وضعیت المنت
در پانل Elements دو دکمه فوق العاده مفید وجود داره. اولین دکمه به شما اجازه میده که یک ویژگی جدید CSS رو با selector مورد نظر خودتون اضافه کنید.
دومین دکمه به شما اجازه میده که یک حالت را برای عنصر انتخاب شده ایجاد کنید، بنابراین میتونید حالت‌های اعمال شده رو هنگام فعال بودن، هاور شدن یا در حالت focus مشاهده کنید.
5. ذخیره کردن کدهای CSS تغییر داده شده
روی نام فایل CSS که اون رو قبلا ویرایش کردید کلیک کنید. inspector اون رو در قسمت Sources باز می‌کنه و شما از اونجا میتونید فایلتون رو با همون ویرایش‌های انجام شده ذخیره کنید. این ترفند برای selectorهای جدید که از + اضافه میشن کاربردی نیست و فقط برای فایلهایی که از قبل وجود دارند کاربرد داره.
6. گرفتن عکس از یک المنت
یک عنصر رو انتخاب کنید و 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 به طور خودکار متوقف می‌شه تا شما بتونید اون چیزی رو که اتفاق افتاده ببینید و بررسی کنید.
امیدوارم از این مطلب خوشتون اومده باشه.
اولین دیدگاه این پست رو تو بنویس !