Chrome Developer Tools

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

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

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

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

Setting >> Theme >> Dark

Chrome

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

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

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

Chrome

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

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

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

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

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

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

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

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

برای این کار می‌تونید همزمان با اینکه کلید بالا/پایین را میزنید کلید Alt را هم نگه دارید. اگر هم خواستید عدد را ۱۰ تایی عوض کنید میتوانید کلید Shift را استفاده کنید.

Chrome