บทความ IT เจ๋งๆ

วันนี้ทีมงานมี Tips & Tricks ที่คุณควรรู้ใน Chrome DevTools มาฝากกันครับ สำหรับผู้ที่ใช้อยู่แล้วหรือสนใจอยากลองใช้ Chrome DevTools น่าจะสามารถนำไปประยุกต์ใช้ในการทำงานได้นะครับ

1. Drag &-Drop ใน Elements panel

Elements panel, คุณสามารถ Drag & Drop ตัว Element ต่างๆ ของ HTML ได้ รวมทั้งสามารถเปลี่ยนตำแหน่งภายใน Page ได้

2. การอ้างอิง Element ที่เลือกไว้ใน Console

Node ใน Elements panel และพิมพ์ $0 ใน Console เพื่ออ้างอิงมัน

แต่ถ้าคุณใช้ jQuery สามารถใช้ $($0) ในการ access ไปยัง jQuery API บน Element นั้น

3. ใช้ค่าที่ดำเนินการครั้งล่าสุดใน Console

ใช้ $_ เพื่ออ้างอิงค่าที่ส่งกลับ(Return Value) ของการดำเนินการล่าสุดใน Console

4. เพิ่ม CSS และแก้ไข State ของ Element

ใน Elements panel นั้น มี 2 ปุ่มที่ คุณสามารถใช้ประโยชน์ได้

ส่วนแรก ช่วยให้คุณสามารถเพิ่ม Property ใหม่ของ CSS ด้วยตัวเลือกที่คุณต้องการ แต่เพิ่ม Element ที่เลือกไว้ก่อนล่วงหน้า

ส่วนที่ 2 ช่วยให้คุณเรียกใช้ State สำหรับ Element ที่เลือกไว้ ดังนั้น คุณจึงสามารถดู Style ที่ใช้งานอยู่เมื่อมัน active, hovered หรือ on focus

5. การ Save ในไฟล์ CSS ที่แก้ไขแล้ว

คลิกชื่อของไฟล์ CSS ที่คุณแก้ไข ตัว Inspector จะเปิดมันใน Sources pane และจากนั้นคุณจะสามารถ Save ข้อมูลได้จากการแก้ไขของคุณ

เทคนิคนี้ ใช้ไม่ได้สำหรับ Selectors ใหม่ที่เพิ่มเข้ามาโดยใช้ + หรือใน Property ชื่อ element.style แต่มันใช้ได้เมื่อมีการแก้ไขไฟล์ที่มีอยู่แล้ว

6. สามารถ Screenshot ใน Element ที่ต้องการ

เลือก Element ที่ต้องการแล้วกด cmd-shift-p (หรือ ctrl-shift-p ใน Windows) เพื่อเปิด Command Menu แล้วเลือก Capture node screenshot

7. ค้นหา Element โดยใช้ CSS selectors

กด cmd-f (ctrl-f ใน Windows) เพื่อเปิด Search box ใน Elements panel จากนั้นคุณสามารถพิมพ์สิ่งที่จะค้นหาใน Source code ของคุณ หรือสามารถใช้ CSS selectors เพื่อให้ Chrome ทำการ Generate ภาพให้คุณ

8. การใช้ Shift-enter ใน Console

หากต้องการเขียนคำสั่งที่มีหลายๆ บรรทัดใน  Console ให้กด shift-enter

คุณสามารถ clear ค่า Console ได้โดยใช้ปุ่ม “Clear” ที่ด้านบนซ้ายของ Console หรือสามารถกด ctrl-l หรือ cmd-k ก็ได้

9. ใช้ Go to…

ใน Sources panel:

• cmd-o (ctrl-o ใน Windows) เพื่อแสดงไฟล์ทั้งหมดที่ใช้ใน Page ของคุณ
• cmd-shift-o (ctrl-shift-o ใน Windows) เพื่อแสดง Symbols (properties, functions, classes) ในไฟล์
• ctrl-g เพื่อไปบรรทัดที่ต้องการ​

​

10. Watch Expression

แทนที่คุณจะเขียนชื่อตัวแปร หรือ expression ซ้ำๆ เพื่อตรวจสอบค่าระหว่างการ Debug นั้น คุณสามารถเพิ่มมันลงใน list ของ Watch Expression ได้

11. XHR/Fetch debugging

สามารถเปิด Debugger จาก XHR/Fetch Breakpoints panel คุณสามารถ Set Breakpoints เมื่อ XHR/Fetch call ถูกส่งค่าได้

12. Debug บน DOM modifications

Element ที่ต้องการ แล้วเลือก Break on Subtree Modifications เมื่อใดก็ตามที่ Script ผ่านไปที่ Element นั้นและแก้ไขมัน ตัว Debugger ก็จะหยุดโดยอัตโนมัติเพื่อให้คุณตรวจสอบว่าเกิดอะไรขึ้น

ที่มา: https://medium.freecodecamp.org/

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

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

บทความที่เกี่ยวข้อง

• 5 ตัวอย่าง Data Scientist ยอดแย่
• 6 วิธี ที่ใช้ทดสอบซอฟต์แวร์
• 5 ปัญหาที่ Developer มักจะเจอ พร้อมวิธีแก้ไข