7 Chrome DevTools Shortcuts to Boost Your Productivity
29-May-20
คัมภีร์เทพ IT
See the original english version Click here!
1. เปิด DevTools เพื่อไปยัง Panel ที่ใช้งานล่าสุด
Mac: ⌘ + ⇧ + I
Shortcut นี้มันง่ายกว่าการไปที่ Main Menu แล้วไปที่ More Tools submenu จากนั้นก็คลิกบน Developer Tools เสียอีก
Mac: ⌘ + ⇧ + C
หาก DevTools ไม่เปิดขึ้นมา ก็ให้คุณเปิดขึ้นมาแล้วไปที่ Elements panel จากนั้นคุณสามารถเคลื่อน Mouse ของคุณไปตามตำแหน่งต่าง ๆ บน Webpage ซึ่งมันจะแสดงให้คุณเห็นว่า คุณกำลังอยู่ที่ Node ไหน โดยมันจะแสดงข้อมูลพื้นฐานของแต่ละ Element
Mac และ Windows: Esc
4. Clear Console ให้ว่างเปล่า
Windows: Ctrl + L
5. เปลี่ยนตำแหน่ง DevTools Docking
Windows: Ctrl + ⇧ + D
Mac: ⌘ + ⇧ + M
สิ่งนี้มีประโยชน์ ในกรณีที่คุณต้องการสลับระหว่าง Device mode และ Normal mode อย่างรวดเร็ว
7. การเพิ่มและลดค่า CSS Property
เพิ่มขึ้น 0.1
Windows: Alt + Up and Alt + Down
Mac: Up + Down
เพิ่มขึ้น 10
Windows: ⇧ + Up and ⇧ + Down
Mac: ⌘ + Up and ⌘ + Down
Shortcut ถือเป็นสิ่งที่มีประสิทธิภาพและช่วยประหยัดเวลาในการทำงาน หวังว่าคุณจะได้เรียนรู้ Shortcut ใหม่ ๆ เพิ่มเติมจากบทความนี้ ซึ่งจะช่วยเพิ่ม Productivity ในการทำงานของคุณ
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
บทความล่าสุด