COOL IT IDEAS AND STUFF

See the original english version Click here!

คงมีหลายคนที่เคยใช้งาน Google Chrome DevTool มาบ้างแล้ว คุณอาจเคยใช้มันเพื่อตรวจสอบ Status ของ Code เพื่อดูว่า HTTP Request/Response ถูกส่งไปยัง/จาก Server อย่างปลอดภัยหรือไม่ ซึ่งใน Chrome DevTools ยังมี Features น่าสนใจอย่าง [Network] Tab อีกด้วย ดังนั้นบทความนี้จะมาบอกถึง 7 เคล็ดลับ การใช้ [Network] Tab ของ Google Chrome DevTool

หมายเหตุ: Screenshots ที่ประกอบบทความนี้ มาจาก Chrome DevTools ที่เปิดจาก Youtube Video ของ CNBC ที่ชื่อว่า “Do You Need A College Degree To Be Happy?”

เราจะใช้ Network Panel เมื่อใด

Network Tab หรือ Panel ใน Chrome Devtool เป็นหนึ่งใน Debugging Tools ที่ยอดนิยมที่ Software Developers โดยเฉพาะ Web & Front-End Developer มักเลือกใช้งาน

Use Case ที่พบได้บ่อยที่สุดสำหรับ Network Tab ก็คือ

• ตรวจสอบให้แน่ใจว่ามีการ Upload หรือ Download Resources จริง ๆ
• ตรวจสอบคุณสมบัติของ Resources แต่ละรายการ เช่น HTTP Headers, Content, Size และอื่น ๆ

1. แสดงข้อมูลเพิ่มเติม

มี Column มากมายที่ถูกซ่อนไว้โดยค่า Default ซึ่งคุณอาจพบว่ามันมีประโยชน์ คุณสามารถคลิกขวาที่ Header ของ Network Log Table แล้วเลือก Columns ที่คุณต้องการที่จะให้มันแสดง

2. จำลอง Network Connection ที่ช้าลง

การทำให้ Page ช้าลง จะช่วยทำให้คุณเข้าใจได้ดีขึ้นว่า Page ใช้เวลา Load นานแค่ไหนใน Network Environment ที่ช้า อย่างเช่นใน Mobile Device

คุณสามารถเลือกได้ว่าจะเป็น Fast 3G, Slow 3G, Offline หรือ Online

3. HAR File: Import / Export Network Logs

HAR ซึ่งย่อมาจาก HTTP Archive คือรูปแบบที่ใช้สำหรับ Track ข้อมูลระหว่าง Web Browser และ Website โดยที่ HAR File มักจะมีประโยชน์อย่างมากเมื่อคุณสื่อสารกับ Frontend / Backend Developers คนอื่น ๆ และอธิบายสิ่งที่เกิดขึ้นใน Browser Network Tab ของคุณ HAR File ช่วยให้ Developers รายอื่นสามารถจำลอง Network Logs ของคุณได้อย่างง่ายดาย โดยการ Import ใน Browser Network Tabs และมันจะช่วยลดการสื่อสารที่ผิดพลาดที่อาจเกิดขึ้นได้อย่างมาก

4. บันทึก Requests ระหว่างการ Load Page

Network Logs ก่อนหน้านี้ทั้งหมดของคุณจะหายไป เมื่อคุณ "Refresh" Page ของคุณ หากต้องการบันทึก Requests ระหว่างการ Load Page ให้เลือก Checkbox ของ Preserve Log บน Network Panel แล้ว DevTools จะทำการบันทึก Requests ทั้งหมดจนกว่าคุณจะปิดใช้งาน Preserve log

5. Replay XHR Request ซ้ำ

คุณสามารถ Replay XHR Request ซ้ำได้โดยคลิกคลิกที่ Request ใน Requests Table แล้วทำการเลือก Replay XHR มันมีประโยชน์อย่างยิ่งเมื่อคุณต้องการสร้าง Request อีกครั้งโดยไม่เรียก Event ใด ๆ คุณมี Options ในการ Replay XHR ซ้ำ สำหรับ XHR Request เท่านั้น (ในตัวอย่างด้านล่างนี้ เป็นการ Filter Requests ด้วย XHR)

6. เพิ่ม Custom Columns

คุณสามารถเพิ่ม Custom Column (Column ที่กำหนดเอง) ลงใน Requests Table โดยการคลิกขวาที่ Header ของ Requests Table แล้วเลือก Response Headers > Manage Header Columns

7. Cache และ Reload

คุณจะเห็น 3 Options สำหรับการ Reload หากคุณเปิด Devtools และคลิก “reload” Icon ประมาณ 1 - 2 วินาที ความแตกต่างระหว่าง Normal Reload และ Hard Reload ขึ้นอยู่กับว่า คุณต้องการใช้อะไรใน Cache

Normal Reload – เหมือนกับการกด “F5”

Hard Reload – บังคับให้ Browser ทำการ Re-Download JavaScript File, Image, Test, File รวมทั้งอื่น ๆ อีกครั้ง

มันเหมาะสำหรับการทดสอบความเร็วในการแสดงผลในเบื้องต้นสำหรับ End-Users

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

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

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

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

• 7 VS Code Extensions ที่จะทำให้คุณอยาก Coding มากขึ้น
• 12 เทคนิคการเขียน JavaScript Code ให้สั้นกระชับ
• IT & Digital Events in October 2020