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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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