معرفی قابلیت های جدید Chrome Devtools (قسمت سوم)

در ادامه مطالب مربوط به ابزار طراحان وب در گوگل کروم می خواهیم در این مطلب بیشتر به نکات مربوط به قسمت استایل نویسی و ویراش عناصر بپردازیم.

البته چند مورد از نکات, خیلی هم جدید نیستند :)

 

ویرایش مستقیم keyframe@

این ویژگی همراه با ویژگی هایی که در مطالب قبلی بیان شد نشان می دهد که روز به روز ویرایش و کار با انیمیشن ها در کروم راحت تر و کاربردی تر می شود:

 

 

اضافه و یا حذف کردن کلاس

در نسخه های جدید کروم این قابلیت فوق العاده کاربردی اضافه شده است که می توانیم به راحتی کلاسی برای تست و یا کاربردهای دیگر به عنصر اضافه کنیم و یا کلاس هایی را از آن حذف کنیم:

 

 

 

مشاهده جزییات ویژگی های مختصر نوشته شده

در خیلی از مواقع ما برای نوشتن استایل از روش مختصر نویسی استفاده می کنیم. کروم این امکان را به وجود آورده است تا بتوانیم به راحتی ویژگی های مختصر نوشته شده را مو شکافی کنیم :)

 

 

 

تغییر سریع مقادیر

با استفاده از دکمه های جهت بالا و پایین می توانیم در قسمت استایل مقادیر را تغییر دهیم. همینطور اگر همزمان کلید Shift را نگه داریم این تغییرات 10 تا 10 اتفاق می افتند. نگه داشتن Alt تغییرات اعشاری را در پی دارد. همچنین از چرخ موس هم می توانید برای سرعت بیشتر استفاده کنید.
 

 

 

تشخصیص کلاس های منطبق بر عنصر

زمانی که استایل های مربوط به یک عنصر را نگاه می کنیم, انتخابگرهای مختلفی که با ویرگول از هم جدا شده اند شاید رنگ متفاوت داشته باشند.
آن قسمتی که خاکستری روشن است به این معنا است که آن انتخابگر با عنصر انتخاب شده منطبق نیست اما انتخابگری که رنگ تیره دارد منطبق بر عنصر انتخاب شده است.

 

 

 

تکرار کردن عناصر به روشی ساده تر

گاهی نیاز داریم که عناصر را تکرار کنیم تا متوجه شویم صفحه آرایی در کجا نیاز به بهبود یافتن دارد. مثلا تعداد آیتم های منوی اصلی سایت را زیاد می کنیم تا چیدمان مورد آزمایش قرار گیرد. به جای اینکه عناصر DOM را ویرایش کنیم می توانیم از ترفند زیر استفاده کنیم:

در تصویر زیر اولین بار از منوها استفاده شده است اما تکرار بعدی از کلیدهای میانبر Ctrl + C و Ctrl + V به ترتیب برای کپی کردن و چسباندن استفاده شده است. در زمان چسباندن عنصر باید عنصر پدر را انتخاب کنید به عنوان نمونه در مثال زیر بعد از انجام عمل کپی عنصر پدر انتخاب شد و عملیات چسباندن انجام شد. نکته جالب اینکه می توانیم از کلید جهت چپ برای انتخاب عنصر پدر استفاده کنید.

 

 

 

نمایش سریع تر عنصر در Viewport

خیلی پیش می آید که دنبال عنصری هستیم که همان لحظه در Viewport نیست. در این مواقع می توانیم از گزینه Scroll into view کمک بگیریم:
 

 

 

متغیرها در کروم پشتیبانی می شوند

متغیرهای CSS در نسخه های جدید کروم قابل استفاده می باشند. ناگفته نماند که کروم از نسخه 49 شروع به پشتیبانی متغیرها کرد اما فایرفاکس از نسخه 31.

 

 

Layout Editor

اول ببینید چقدر باحاله بعد می گم چطوری فعالش کنید :)

 

 

به این آدرس رفته: chrome://flags/#enable-devtools-experiments گزینه Developer Tools experiments را فعال کنید. سپس در قسمت تنظیمات Devtools به قسمت Experiments مراجعه کنید و کلید Shift را 6 بار فشار دهید و بعد گزینه Layout Editor را فعال کنید. از این به بعد آیکون مربوط به این عملکرد در قسمت استایل نمایش داده می شود.

این قابلیت از نسخه 45 کروم قابل دسترس است.

 

تبدیل تصویر به data URI

استفاده از Date URI برای اضافه کردن تصاویر به صفحات وب می تواند در برخی مواقع مفید باشد. همیشه برای تبدیل یک تصویر به فرمت Base64 (نوع رمزگذاری که برای این کار استفاده می شود) به ابزارهای دیگر و یا وب سایت هایی که برای این عمل ساخته شده اند مراجعه می کنیم. اما جالب است بدانید که می توانیم این تبدیل را در خود کروم انجام دهیم: