ترفند های گوگل devtools

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

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

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

 

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

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

 
ویرایش انیمیشن ها در کروم
 

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

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

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

 

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

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

 
بررسی ویژگی های کوتاه شده
 

 

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

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

 

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

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

 
کلاس های منطبق در قسمت styles
 

 

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

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

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

 
تکرار و ویرایش عناصر در devtools
 

 

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

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

 

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

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

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

 

Layout Editor

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

 
Layout editor in google chrome
 

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

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

 

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

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

 
تبدیل تصویر به base64 در کروم
 

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

  1. سلام جناب سیدی . وقتتون بخیر سوالی داشتم اینکه برای من Layout Editor فعال نمیشه مو به مو اون روشی که فرمودید رو پیش رفتم ولی توی experiment با اینکه 6 بار shift رو زدم ولی از بین گزینه هایی که اومده layout editor توشون نیست . کروم من هم نسخه 54 هست.

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *