7 Chrome DevTools Shortcuts ที่ช่วยเพิ่ม Productivity ของคุณ

29-พ.ค.-20

คัมภีร์เทพ IT

มันจะดีแค่ไหน หากเราเชี่ยวชาญการใช้ Shortcuts ในงานที่ทำในแต่ละวัน เพราะ Shortcuts จะช่วยลดเวลาในการทำงานของคุณได้เป็นอย่างมาก ดังนั้น เรามาทำความรู้จักกับ 7 Chrome DevTools Shortcuts ที่ช่วยเพิ่ม Productivity ของคุณ

1. เปิด DevTools เพื่อไปยัง Panel ที่ใช้งานล่าสุด

Mac: ⌘ + ⇧ + I

Windows: F12 หรือ Ctrl + ⇧ + I

Shortcut นี้มันง่ายกว่าการไปที่ Main Menu แล้วไปที่ More Tools submenu จากนั้นก็คลิกบน Developer Tools เสียอีก

2. เลือก Elements เพื่อ Inspect ใน Page

Mac: ⌘ + ⇧ + C

Windows: Ctrl + ⇧ + C

หาก DevTools ไม่เปิดขึ้นมา ก็ให้คุณเปิดขึ้นมาแล้วไปที่ Elements panel จากนั้นคุณสามารถเคลื่อน Mouse ของคุณไปตามตำแหน่งต่าง ๆ บน Webpage ซึ่งมันจะแสดงให้คุณเห็นว่า คุณกำลังอยู่ที่ Node ไหน โดยมันจะแสดงข้อมูลพื้นฐานของแต่ละ Element 

และเมื่อคุณคลิก Element ใดบน Webpage คุณจะได้เห็นว่ากำลังอยู่ที่ Node ใดใน DevTools

3. สลับเปิด/ปิด Console Drawer

Mac และ Windows: Esc

สิ่งนี้มีประโยชน์อย่างยิ่ง ถ้าคุณอยู่บน Panel ใด ๆ ที่ไม่ใช่อยู่บน Console แต่ยังคงต้องการที่จะทำงานกับ Console ที่เปิดอยู่

4. Clear Console ให้ว่างเปล่า

Mac: ⌘ + K

Windows: Ctrl + L

Shortcut นี้เหมาะอย่างยิ่งสำหรับคนที่ชอบเริ่มทำงานกับ Console ที่ว่างเปล่า

5. เปลี่ยนตำแหน่ง DevTools Docking

Mac: ⌘ + ⇧ + D

Windows: Ctrl + ⇧ + D

Shortcut นี้จะเปลี่ยนกลับไปที่ตำแหน่ง Dock ที่คุณใช้ก่อนหน้านี้

6. สลับเปิด/ปิด Device Toolbar

Mac: ⌘ + ⇧ + M

Windows: Ctrl + ⇧ + M

สิ่งนี้มีประโยชน์ ในกรณีที่คุณต้องการสลับระหว่าง Device mode และ Normal mode อย่างรวดเร็ว

สิ่งที่คุณควรรู้: DevTools จำเป็นต้องเปิดไว้ก่อน เพื่อให้ Shortcut นี้สามารถทำงานได้

7. การเพิ่มและลดค่า CSS Property

เพิ่มขึ้น 0.1

Mac: Option + Up and Option + Down

Windows: Alt + Up and Alt + Down

เพิ่มขึ้น 1

Mac: Up + Down

Windows: Up + Down

เพิ่มขึ้น 10

Mac: ⇧+ Up and ⇧ + Down

Windows: ⇧ + Up and ⇧ + Down

เพิ่มขึ้น 100

Mac: ⌘ + Up and ⌘ + Down

Windows: Ctrl + Up and Ctrl + Down

Shortcut ถือเป็นสิ่งที่มีประสิทธิภาพและช่วยประหยัดเวลาในการทำงาน หวังว่าคุณจะได้เรียนรู้ Shortcut ใหม่ ๆ เพิ่มเติมจากบทความนี้ ซึ่งจะช่วยเพิ่ม Productivity ในการทำงานของคุณ

ที่มา:  https://medium.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด