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

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

 

کنترل سرعت ترنزیشن ها و انیمیشن ها

اگر با این موضوع آشنایی ندارید به مطلب timing function مراجعه کنید. در نسخه های جدید کروم قابلیت کنترل و تغییر این تابع بوسیله نمودار مهیا شده است. کافی است بر روی علامت آیکون نمودار که به رنگ بنفش است کلیک کنید.

کنترل سرعت انیمیشن در Devtools

 

کنترل انیمیشن ها

این قابلیت در زمان نوشتن این مطلب بطور کامل فقط در نسخه Beta وجود دارد. فقط کافی است دکمه لوزی شکل را در قسمت استایل ها بزنید تا یک پنل جدا برای این قابلیت باز شود.

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

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

 

چند امکان دیگر

  • می توانید ترتیب منوی های DevTools را بصورت دلخواه تغییر دهید. فقط کافی است یک منو را بکشید و در مکان دلخواه رها کنید. مثلا اگر بیشتر از Timeline استفاده می کنید می توانید آن را جز موارد اول قرار دهید. همینطور اگر تا الان متوجه نشدید Console به صورت پیشفرض به دومین آیتم تغییر مکان داده است.
  • شاید گاهی لازم باشد تا از خطاها و یا گزارش های کنسول خروجی بگیرید. در نسخه های جدید کافی است بر روی کنسول کلیک راست کرده و گزینه ذخیره را بزنید تا تمام گزارش های کنسول در یک فایل متنی برای شما آماده شود.
  • همینطور از این به بعد می توانید در کنسول با نگه داشتن موس بر روی یک آدرس عکس, پیش نمایشی از آن را داشته باشید.
  • سینتکس در کنسول از این به بعد با رنگ های مختلف مشخص می شود و همینطور شکلک ها یا همان Emoji ها هم در کنسول پشتیبانی می شوند.

 

قابلیت های ارث برده شده از سابلایم

اگر با ویرایشگر سابلایم آشنایی ندارید به این مطلب مراجعه کنید.

با زدن دکمه ترکیبی Ctrl + P یک منو در تب source باز می شود که این امکان را به شما می دهد تا در فایل های سایت جستجو کنید و فایل مورد نظرتان را باز کنید.

توجه داشته باشید که در این صفحه برای ویرایش می توانید از قابلیت های چند نشانه گر بودن و همینطور انتخاب های چندگانه (Ctrl + D) استفاده کنید.

ویرایش فایل های سایت در کروم