ابزارهای حرفه‌ای Chrome Developer Tools برای توسعه دهندگان

اگر توسعه دهنده رابط کاربری وب (Frontend Developer) باشید مطمئنا با Chrome Developer Tools (یا Inspect Elements) آشنایی دارید. بخشی از مرورگر گوگل که باعث شد کروم در بین توسعه دهندگان به شدت محبوب شود.

اکثر ما با قسمت‌های اصلی قسمت توسعه دهنده گوگل کروم آشنایی داریم. قسمت هایی مثل Console , DOM Inspector , Style . اما گوگل کروم بخش‌های زیادی هم دارد که خیلی از ما آن را ندیده ایم و استفاده از آن باعث میشه تا سرعت دیباگ و توسعه ما بیشتر بشه.

۱. تم سیاه (مناسب برای شب)

همه برنامه نویس‌ها به نوعی Night Owl هستند. این یعنی اینکه شب‌ها و توی نور کم مشغول به کار هستند. یکی از مشکلاتی که خیلی‌ها با بخش Inspect Elemnts گوگل کروم دارند رنگ سفید اونه که چشم رو اذیت میکنه. شما می‌تونید خیلی راحت بعد از باز کردن Inspect Elements و کلیک روی دکمه ... (۳نقطه) در سمت راست و رفتن به این آدرس زیر رنگ کنسول خودتون رو تیره کنید تا شب‌ها هم به خوبی بتونید با اون کار کنید.

1Setting >> Theme >> Dark

۲. انجام کارها به صورت دستورات کامندی در گروم

همه ما عادت کرده ایم که کارهایی که میخوایم بکنیم رو از طریق ترمینال انجام بدیم. انجام کارها به وسیله تایپ کردن سرعت را به شدت افزایش میده. خیلی‌ها از این خبر ندارند که توی کروم هم دقیقا دسترسی این رو دارند که کارهایی که میخوان بکنند رو میتونن به وسیله دستورات خطی انجام بدند. مثلا مثال قبلی که برای تغیر تم گوگل کروم به تیره بود مسیرش خیلی طولانی هست. شما میتونید به راحتی از طریق بخش دستورات این کار را انجام بدید.

برای باز کردن بخش دستورات بعد از باز شدن Inspect Elements کلید ترکیبی Ctrl + Shift + P را بزنید (در مک Command + Shift + P) در باکس باز شده میتونید قسمتی از متن دستوری که میخواهید را بنویسین.

۳.انیمیشن‌ها

یکی دیگر از بخش‌های مهمی که در Chrome Developer Tools وجود دارد بخش Animations است. جدیدا تو همه طرح های فرونت اند انیمیشن‌های CSS وجود دارد. شاید برای شما هم درآوردن انیمیشن یک یا چند باکس کار سختی باشه. شما با کمک پنل انیمیشن می‌تونید در یک محیط گرافیکی انیمیشن‌های فعلی صفحه را ببینید و دیلی، سرعت و بقیه خصوصیات آن را تغییر بدید. برای اجرا و دیدن نتیجه هم فقط کافیه یک بار روی باکس انیمیشنی که تغیر دادید کلیک کنید.

برای دسترسی به بخش انیمیشن‌ها فقط کافیه که بعد از باز کردن Inspect Elements روی دکمه ... کلیک کنید و از قسمت More Tools گزینه Animations را بزنید. یا میتونید به کمک بخش کامندلاین هم دستور Animations را اجرا کنید.

مثلا عکس زیر انیمیشن‌های دکمه‌های ادیتور همین سایت ویرگول در صفحه نوشتن پسته.

۴.اضافه کردن مقادیر عددی در Style

یکی از وقت‌هایی که خیلی از Inspect Elements استفاده می‌کنیم وقتیه که میخواهیم Padding, Margin, Font-Size و بقیه اتریبیوت‌های CSS را تغییر بدیم تا بهترین حالت و اندازه اش رو پیدا کنیم. حالا مقیاس های مختلفی مثل px , em , rem و... را استفاده میکنیم.

حتما می‌دونید وقتی که میخواهیم عددها یکی یکی کم و زیاد بشه (مثلا از ۲ بریم ۳) میتونیم دکمه بالا و پایین رو بزنیم و هربار عدد یکی کم/زیاد میشه.

اما ترند فعلی استفاده از rem و بقیه مقیاس‌هاست که توی rem معمولا کم پیش میاد بخوایم عددمون رو یکی یکی اضافه کنیم و اکثرا نیاز داریم مقدار اون رو ۰.۱ کم و زیاد کنیم.

برای این کار می‌تونید همزمان با اینکه کلید بالا/پایین رو میزنید کلید Alt رو هم نگه دارید. اینجوری همونطوری که گفتم عددتون به مقدار ۰.۱ کم و زیاد میشه.

اگر هم خواستید عددتون ۱۰ تایی عوض بشه میتونید کلید Shift رو بگیرید.

گوگل کروم ابزارهای حرفه‌ای دیگه‌ای هم (مثل Code Coverage) داره که اگه فیدبک روی این مطلب خوب بود این موضوع را ادامه میدم و توی پستهای بعدی در مورد بقیه بخش‌هاش مینویسم.

اگه مثل مطلب قبلی این مطلب رو هم دوست داشتید لطفا این مطلب رو لایک کنید. ♡ >> ❤️