COOL IT IDEAS AND STUFF

See the original english version Click here!

 

ไม่ว่าคุณจะเป็น Software Developer ประเภทใด คุณก็มีโอกาสสูงที่จะใช้ Chrome ในการทำงาน และบทความนี้ก็เป็น 10 สิ่งที่ Chrome DevTools ทำได้ เพื่อช่วยแก้ Bug ได้อย่างมีประสิทธิภาพมากขึ้น และลดการพึ่งพา Console.log ให้น้อยลง

1. Drag-and-Drop Elements

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

และนี่ก็คือตัวอย่าง:

2. Save Modified CSS

คุณคงจะเคยทำงานใน Project แล้วแก้ไข CSS ของคุณใน Chrome แล้วต่อมา คุณก็นึกออกว่า คุณอาจจะต้องทำแบบนี้ซ้ำ ๆ อีก และ Copy ในสิ่งที่คุณทำแล้วลงใน CSS File จริง

เพื่อทำสิ่งนั้น คุณสามารถแก้ไข CSS จากนั้นก็ คลิกขวา แล้วกด Save

3. Screenshot a Single Element

บางครั้ง คุณแค่ต้องการจับภาพ Screenshot ของ Element โดยไม่ต้องใช้ Snipping Tool

สิ่งที่คุณต้องทำคือ คลิกขวา แล้วเลือก Focus ที่ Element ที่คุณต้องการ จากนั้นให้กดปุ่ม cmd + shift + p แล้วพิมพ์ screenshot

ต่อไปนี้เป็นคำอธิบายสั้น ๆ ว่า Option ต่าง ๆ ทำหน้าที่อะไรบ้าง:

Capture node screenshot — จับภาพ Screenshot ของ Element ที่ถูก Inspect แบบแยกเป็นส่วน ๆ

Capture screenshot — จับภาพ Screenshot ของ Viewport เท่านั้น

Capture full-size screenshot — จับภาพทั้ง Page แม้แต่สิ่งที่อยู่นอก Viewport

Capture area screenshot — ให้คุณลากพื้นที่ใดก็ได้ของ Page ที่ต้องการจะจับภาพ

ซึ่งในตัวอย่างการจับภาพ Screen ด้านล่างนี้ เป็นการใช้ node Option

4. Live Expressions

Live Expressions ใน Chrome DevTools จะช่วยให้คุณสามารถประเมิน JavaScript Expressions ได้แบบ Real Time ในขณะที่ทำการ Debug Code ของคุณ คุณสามารถมองได้ว่า มันเป็นวิธีการโต้ตอบกับ Code ของคุณ ในขณะที่หยุดสิ่งต่าง ๆ ชั่วคราว ซึ่งสิ่งนี้มีประโยชน์สำหรับวัตถุประสงค์ต่าง ๆ เช่น:

• ตรวจสอบค่าของ Variables และ Expressions แบบ Real Time
• การแก้ไขค่า เพื่อดูผลกระทบใน Code
• การ Debug Code แบบ Asynchronous
• การทดสอบ Code Snippets โดยไม่กระทบกับ Source Code ของคุณ

คุณเพียงคลิกที่ดวงตาเล็ก ๆ ใต้ Console เพื่อใช้ Live Expressions

5. Breakpoints Debugging ใน Console

Breakpoints ใน Console เป็น Debugging Tool ที่มีประโยชน์ใน Chrome ซึ่งจะช่วยให้คุณหยุดการทำงานของ JavaScript Code ชั่วคราว และตรวจสอบค่าของ Variables และ Expressions ได้ และนี่ก็คือวิธีที่คุณสามารถทำสิ่งนั้นได้:

• ใน Developer Tools Panel ให้เลือกที่ “Sources” Tab
• ค้นหา JavaScript File ที่คุณต้องการจะ Set ค่า Breakpoint แล้วทำการ Open มัน
• Set ค่า Breakpoint โดยการคลิกที่แถบด้านซ้ายของบรรทัดของ Code ที่คุณต้องการจะ หยุดไว้ชั่วคราว
• ทำการ Refresh Page ใน Browser เพื่อเรียก Breakpoint
• Developer Tools จะหยุดการทำงานของ JavaScript Code ที่จุด Breakpoint
• หากคุณต้องการเข้าถึง Console ให้คลิกที่ “Console” Tab ใน Developer Tools
• ตอนนี้คุณสามารถใช้ Console เพื่อตรวจสอบค่าของ Variables และ Expressions โดยการพิมพ์มันลงไปใน Console แล้วกด "Enter"
• ใช้ปุ่ม “Step Over” เพื่อไปยัง Code บรรทัดถัดไป หรือปุ่ม “Resume script execution” เพื่อให้ Code ทำงานต่อไปจนกว่าจะถึง Breakpoint จุดถัดไป

6. Running Commands

การ Run คำสั่งใน Console เป็น Tool ที่มีประโยชน์อย่างมากใน Chrome ซึ่งจะช่วยให้คุณสามารถโต้ตอบและจัดการกับ Content ของ Web Page ได้ และนี่ก็คือวิธีที่คุณสามารถทำสิ่งนั้นได้:

• หากต้องการเข้าถึง Console ให้คลิกที่ “Console” Tab ใน Developer Tools
• คุณสามารถป้อนคำสั่งของ JavaScript ใน Console และ Run โดยการกด "Enter"
• ผลลัพธ์ของคำสั่ง จะถูกแสดงใน Console
• คุณสามารถใช้ ปุ่มลูกศรขึ้น/ลง เพื่อเลื่อนดูประวัติของคำสั่งที่ถูก Run ไปก่อนหน้านี้
• คุณยังสามารถเข้าถึง DOM (Document Object Model) ของ Page ได้โดยการพิมพ์ "document" ลงใน Console แล้วกด "Enter"
• จากที่นี่ คุณสามารถเข้าถึงและจัดการกับ Elements บน Page ได้ โดยใช้คำสั่งของ JavaScript

ด้วยการ Run คำสั่งใน Console คุณสามารถโต้ตอบและจัดการกับ Content ของ Web Page ได้แบบ Real Time ทำให้คุณสามารถ Test และ Debug Code ของคุณได้อย่างมีประสิทธิภาพมากขึ้น

7. Resend XHR Requests

การส่ง XHR (XMLHttpRequest) Requests ซ้ำอีกครั้งใน Chrome เป็น Tool ที่มีประโยชน์สำหรับการ Debug และการ Test Behavior ของ Code ของคุณ และนี่ก็คือวิธีที่คุณสามารถทำสิ่งนั้นได้:

• เลือก Network Panel
• คลิก Fetch/XHR
• เลือก Request ที่คุณต้องการจะส่งซ้ำใหม่
• คลิกขวา แล้วเลือก Replay XHR

ด้วยการส่ง XHR Requests ซ้ำอีกครั้งใน Chrome คุณสามารถจะ Test และ Debug Behavior ของ Code ได้อย่างง่ายดาย และทำความเข้าใจว่า Server ทำการประมวลผล Requests ต่าง ๆ อย่างไร

8. Trigger CSS Pseudo-Class

คุณเคยต้องการ Test State โดยที่ไม่ต้องทำจริง ๆ หรือไม่? แน่นอนว่า ตอนนี้คุณสามารถ Test State ได้ด้วยตัวคุณเองด้วยวิธีการง่าย ๆ จากการคลิกขวา

CSS Pseudo-Class คือ Selector ประเภทพิเศษที่จะช่วยให้คุณสามารถเลือกและจัดรูปแบบของ Element ตาม State หรือ Dynamic Behavior ตัวอย่างเช่น คุณสามารถใช้ :hover pseudo-class เพื่อเปลี่ยนลักษณะที่ปรากฏของ Element เมื่อนำ Pointer ของ Mouse ไปวางบน Element นั้น

ลองดูตัวอย่างต่อไปนี้:

9. หา Elements โดยใช้ CSS Selectors

เชื่อว่ามีบางครั้ง ที่คุณอาจต้องการใช้ CSS Selector แต่ไม่ต้องการที่จะสืบค้น CSS Document ทั้งหมดใน Debugging Tool ใช่ไหม ในกรณีนี้ คุณสามารถใช้ Filter Option เพื่อให้คุณทำสิ่งต่าง ๆ ได้อย่างรวดเร็ว

10. Multiple Lines ใน Console ด้วย Shift + Enter

คุณเคยต้องการเขียน JavaScript ใน Console แต่ต้องการให้ Code ของคุณมีหลายบรรทัด บ้างหรือไม่?

คุณสามารถทำสิ่งนั้นได้ด้วยการ กด Enter เพื่อเป็นการ Execute คำสั่งของคุณ และการ กด shift + enter ก็จะเป็นการขึ้นบรรทัดใหม่

ที่มา: https://betterprogramming.pub/

 

 

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

 

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

 

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

• 8 Diagramming Tools สำหรับ Software Architecture
• 5 ไอเดียการทำ Personal Project สำหรับ Software Engineers
• 12 CSS Generator Tools ที่ Developers ควรลองใช้ ในปี 2023