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

ترفندهایی برای کار با قسمت Sources در کروم

در مطالب قبل در مورد کانال های مختلف کروم و همینطور تعدادی از ویژگی های جدید آن برای طراحان وب بحث کردیم. در این مطلب چند ترفند را برای استفاده بهتر از قسمت منبع بیان می کنیم.

قبل از هرچیزی چند کلید میانبر پرکاربرد باهم یاد بگیریم:

  • Ctrl + Shift + I (mac: Cmd + Alt + I): باز کردن Devtools
  • Ctrl + [ و Ctrl + ]: برای حرکت کردن بین تب های مختلف Devtools
  • Ctrl + Shift + D: مکان نمایش Devtools را بین دو وضعیت اخیر تنظیم شده تعویض می کند.

باز کردن سریع قسمت Sources

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

 
باز کردن فایل در قسمت منبع در chrome devtools
 

 

انتخاب ستونی خطوط و ویرایش مقادیر

می توانیم در قسمت Sources با نگه داشتن کلید Alt و کشیدن نشانه گر, خطوط را به صورت ستونی انتخاب و سپس آنها را ویرایش کنیم.

همچنین می توانیم با نگه داشتن کلید Alt و با استفاده از کلیدهای جهت پایین و بالا مقادیر را کم و یا زیاد کنیم.

 

انتخاب  چندگانه و ستونی کد در کروم

 

 

رفتن به خط و یا ستون مورد نظر

زمانی که یک فایل در قسمت Sources باز است کلید ترکیبی Ctrl + O (CMD + O) را بزنید و سپس تعیین کنید به کدام محل از کد قصد سفر دارید: :Line:Column

مثلا اگر بنویسیم :12:9 به خط 12 و کاراکتر 9 می رویم.

 
رفتن به یک خط خاص کد در قسمت منابع گولگ کروم
 

 

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

 
ویرایش زنده در قسمت source کروم devtools

 

انتخاب تم تاریک

البته این امکان مربوط به کل Devtools می باشد:

 
 تغییر تم chrome devtools