home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ซอฟต์แวร์ >> เบราว์เซอร์

เพิ่มประสิทธิภาพการพัฒนา: ใช้ฟีเจอร์ Cross-Browser DevTools ให้เกิดประโยชน์สูงสุด

สร้างเว็บแอพ Cross-Browser ยากเพราะ Browser แต่ละตัวมี Debugging Tools ต่างกัน แต่ปัจจุบัน Browser หลักๆ รองรับมาตรฐานสมัยใหม่และมีฟีเจอร์ช่วย Developer มากขึ้น

สารบัญ

  • Scroll Into View ใน DevTools
  • Console Shortcuts ใน DevTools
  • Block Resource Request สำหรับทดสอบ
  • Edit และ Resend Network Request
  • Detect Unused Source Code (Coverage)
  • Enable Accessibility Tree
  • สรุป

1. Scroll Into View

เวลา Debug HTML Node เยอะ คลิกขวาที่ Node -> Scroll Into View (Chrome, Firefox, Edge) จะเลื่อนหน้าจอไปที่ Element นั้นทันที ประหยัดเวลามาก

เพิ่มประสิทธิภาพการพัฒนา: ใช้ฟีเจอร์ Cross-Browser DevTools ให้เกิดประโยชน์สูงสุด

2. Console Shortcuts

$_ — ค่าล่าสุดที่ประเมิน

เก็บค่าผลลัพธ์ล่าสุดใน Console ใช้ต่อได้ทันที ไม่ต้องประกาศตัวแปร

> multiply(5)
> // returns function
> $_(4)
// 20

$0 — Element ที่เลือกอยู่ใน DOM Tree

ใน Elements Panel คลิก Element ใดๆ แล้วใน Console ใช้ $0 อ้างอิง Element นั้นได้ทันที

$0.style.backgroundColor = 'lightblue';

เพิ่มประสิทธิภาพการพัฒนา: ใช้ฟีเจอร์ Cross-Browser DevTools ให้เกิดประโยชน์สูงสุด

3. Block Resource Request

จำลองสถานการณ์ Resource โหลดไม่ได้ (Image, JS, CSS, Domain) เพื่อทดสอบพฤติกรรมเว็บ

Chrome/Edge: Network Panel -> Right-click Resource -> Block Request URL -> Refresh

Firefox: Network Panel -> Right-click -> Block URL -> Reload

เพิ่มประสิทธิภาพการพัฒนา: ใช้ฟีเจอร์ Cross-Browser DevTools ให้เกิดประโยชน์สูงสุด

4. Edit และ Resend Network Request

แก้ไข Request (URL, Headers, Body) และส่งใหม่โดยไม่ต้อง Reload หน้า หรือกรอกฟอร์มใหม่

Edge/Firefox: Right-click Request -> Edit and Resend

Chrome: เฉพาะ XHR -> Right-click -> Replay

เพิ่มประสิทธิภาพการพัฒนา: ใช้ฟีเจอร์ Cross-Browser DevTools ให้เกิดประโยชน์สูงสุด

5. Detect Unused Code (Coverage Tool)

หา JS/CSS ที่ไม่ได้ใช้ระหว่างโหลดและโต้ตอบ ลดขนาดไฟล์ โหลดเร็วขึ้น

Chrome/Edge: Ctrl+Shift+P -> "Coverage" -> Start Instrumenting -> Refresh

แสดงตาราง: Total Bytes, Unused Bytes, Usage Visualization (แดง = ไม่ได้ใช้)

เพิ่มประสิทธิภาพการพัฒนา: ใช้ฟีเจอร์ Cross-Browser DevTools ให้เกิดประโยชน์สูงสุด

6. Enable Accessibility Tree

Accessibility Tree ใช้โดย Screen Reader คล้าย DOM Tree แต่มุ่งเน้น Accessibility

Chrome/Edge: Settings -> Experiments -> Enable Full Accessibility Tree View -> Reload DevTools -> Elements -> Switch to Accessibility Tree

Firefox: Tab Accessibility -> Expand Document Node -> ดู Properties และ Checks Tab

เพิ่มประสิทธิภาพการพัฒนา: ใช้ฟีเจอร์ Cross-Browser DevTools ให้เกิดประโยชน์สูงสุด

สรุป

อัปเดตฟีเจอร์ DevTools ล่าสุดช่วยประหยัดเวลามาก บทความนี้ครอบคลุม: Element Inspection, Console Shortcuts, Network Monitoring ลองสำรวจฟีเจอร์อื่นๆ เพิ่มเติม!