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

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

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

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

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

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

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

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

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

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

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

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

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

مثلا اگر بنویسیم :۱۲:۹ به خط ۱۲ و کاراکتر ۹ می رویم.

goto line column - ترفندهای کروم برای کار با قسمت Sources

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

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

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

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

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

 

منبع: css-tricks . مجله تایم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.