Battery & Network Monitor: ดูระดับแบต RTT และคุณภาพเน็ตแบบเรียลไทม์

เมื่อหน้าเว็บรู้สึกช้า สาเหตุอาจอยู่ที่เครื่อง ไม่ใช่โค้ด โน้ตบุ๊กแบต 8% มือถือบนลิงก์ระดับ 2G หรือผู้ใช้ที่เปิด Data Saver จะทำงานต่างจากเดสก์ท็อปที่เสียบไฟและใช้ไฟเบอร์ Battery & Network Status Monitor อ่านสถานะเหล่านี้แบบเรียลไทม์ผ่าน navigator.getBattery() และ navigator.connection เพื่อให้เห็นสิ่งที่เบราว์เซอร์รู้เรื่องแบตและเน็ตอยู่แล้ว

ไม่มีอะไรถูกอัปโหลด แดชบอร์ดอยู่ในแท็บ อัปเดตตาม event ของ Battery Status และ Network Information และแสดงข้อความชัดเจนเมื่อ API ไม่รองรับ เหมาะกับ QA การดีบักภาคสนาม และสอน Navigator APIs

คู่มือนี้ครอบคลุมความหมายของแต่ละเมตริก การแมป UI กับ API และเมื่อไหร่ควรถือตัวเลขเป็นคำใบ้ไม่ใช่การวัดในแล็บ

ทำไมต้องใช้ Battery & Network Status Monitor?

• เห็นระดับแบตและสถานะชาร์จทันที แสดงเป็นเปอร์เซ็นต์พร้อมแถบสี แบดจ์ charging / discharging ไม่ต้องเดาจากไอคอนระบบ
• ประมาณเวลาเต็มหรือหมด เมื่อ Battery API ให้ chargingTime หรือ dischargingTime ที่เป็นตัวเลข เครื่องมือแปลงเป็นชั่วโมงและนาที ค่า Infinity กลายเป็น “Unknown” ซึ่งตรงกับสิ่งที่ OS ยอมเปิดเผย
• อ่านคลาสเน็ต ไม่ใช่แค่ online/offline Effective type (4g, 3g, 2g) พร้อมแบดจ์ Fast / Good / Slow ใกล้เคียงวิธีที่ Chromium จัดกลุ่มลิงก์มากกว่าไอคอน Wi-Fi
• วัด downlink และ RTT ความเร็วประมาณเป็น Mbps และ round-trip เป็นมิลลิวินาที — ฟิลด์เดียวกับที่ Adaptive Loading ใช้เลือกคุณภาพรูปหรือเลื่อน analytics
• เคารพ Data Saver ค่า saveData แสดง yes/no เพื่อยืนยันว่าผู้ใช้หรือเบราว์เซอร์ขอประสบการณ์ที่เบากว่า
• เป็นส่วนตัว ค่าไม่ออกจากเครื่อง ไม่มีบัญชี ไม่มี telemetry และไม่มี round trip ไปเซิร์ฟเวอร์เพื่อเติมการ์ด

คุณสมบัติหลัก

• แถบแบตตามสี เกิน 75% สีเขียว ตามด้วยเหลือง ส้ม และแดงต่ำกว่า 25% ให้สอดคล้องกับไอคอนขนาดใหญ่
• แมปคุณภาพ Effective type 4g คือ Fast, 3g คือ Good, 2g คือ Slow ค่าอื่นเป็น Unknown
• ทำงานฝั่งไคลเอนต์เท่านั้น หน้านี้เป็นเครื่องมือ static ค่ามาจากเบราว์เซอร์ ไม่ใช่เซิร์ฟเวอร์ speed test

วิธีใช้

1. เปิด Battery & Network Status Monitor บนเครื่องที่ต้องการวัด (โน้ตบุ๊ก มือถือ แท็บเล็ต) Chrome และ Edge บนเดสก์ท็อปมักมีทั้งสอง API Safari มักไม่มี Battery Status และอาจไม่มี Network Information
2. รอสักวินาทีให้การ์ดออกจากสถานะ loading หากเห็นข้อความไม่รองรับ ให้เปลี่ยนเบราว์เซอร์หรือถือว่าครึ่งหนึ่งของแดชบอร์ดใช้ไม่ได้
3. ดูระดับแบตและสถานะชาร์จ เสียบหรือถอดสายไฟ แล้วดูแบดจ์กับเวลาประมาณอัปเดตโดยไม่ต้องรีโหลด
4. ดูเน็ต เปิดโหมดเครื่องบินหรือสลับ Wi-Fi / cellular แล้วตรวจ online/offline, effective type, downlink และ RTT
5. ใช้แถวสรประบบเป็นสแนปช็อต: เปอร์เซ็นต์แบต effective type downlink Mbps และ RTT ในมุมเดียว สำหรับแคปหน้าจอหรือรายงานบั๊ก

ทำความเข้าใจ Battery Status และ Network Information

Battery Status API ให้ BatteryManager ค่า level เป็นเศษส่วน 0 ถึง 1 เครื่องมือคูณ 100 แล้วปัด charging เป็นบูลีน chargingTime และ dischargingTime เป็นวินาที หรือ Infinity เมื่อ OS ไม่ประมาณ ชื่อ event (levelchange, chargingchange, chargingtimechange, dischargingtimechange) คือเหตุผลที่ UI อัปเดตได้ขณะแท็บยังเปิดอยู่

Network Information API อยู่ที่ navigator.connection (บางเอนจินเก่าใช้ mozConnection / webkitConnection เครื่องมือนี้ใช้พาธมาตรฐาน connection) ฟิลด์สำคัญ:

• type: ขนส่งหยาบ (wifi, cellular, ethernet หรือ unknown) ใช้ล็อกได้ แต่ไม่รับประกันความเร็ว
• effectiveType: คลาสที่ควอนไทซ์แล้ว (slow-2g, 2g, 3g, 4g) จาก RTT และ downlink ที่สังเกตได้ Chromium ใช้สำหรับ Adaptive Loading ไม่ใช่ผลวัด ISP ในแล็บ
• downlink: ประมาณเมกะบิตต่อวินาที ถือเป็นอันดับขนาด จะไม่ตรงกับ speed test เฉพาะทาง
• rtt: ประมาณ round-trip เป็นมิลลิวินาทีบนการเชื่อมต่อ HTTP ที่เบราว์เซอร์ใช้ประมาณค่า
• saveData: เป็นจริงเมื่อผู้ใช้เปิด Data Saver หรือ preference ที่เทียบเท่า

navigator.onLine คนละเรื่อง: บอกว่าเบราว์เซอร์คิดว่ามีเส้นทางเน็ต ไม่ได้บอกว่า API ของคุณเรียกได้ เครื่องมือฟัง online / offline ของ window เพื่อพลิกแบดจ์เมื่อตัดเน็ต

การรองรับเบราว์เซอร์ไม่สม่ำเสมอโดยเจตนา Firefox ตัด Battery Status เพราะ fingerprinting Safari รองรับ Network Information จำกัด ข้อความไม่รองรับจึงเป็นฟีเจอร์: มันบันทึกสภาพแวดล้อมแทนการปั้นเลขศูนย์

เรื่องความเป็นส่วนตัว: API เหล่านี้ช่วย fingerprint ได้ หน้านี้แสดงค่าเฉพาะในเครื่อง อย่าส่งไป backend หากไม่มีเหตุผลผลิตภัณฑ์และเรื่อง consent ที่ชัด

กรณีใช้งานจริง

Adaptive UI ตอน QA

ก่อนปล่อย “lite mode” นั่งกับมือถือที่ throttle แล้วเปิดมอนิเตอร์ ถ้า effective type เป็น 3g และ saveData เป็นจริง สินค้าควรลดคุณภาพแบบเดียวกัน ถ้ามอนิเตอร์บอก 4g แต่ UI ยังโหลดวิดีโอใหญ่ ปัญหาอยู่ที่ heuristic ของคุณ ไม่ใช่เน็ต

รายงานบั๊กภาคสนาม

ขอให้ผู้รายงานแคปสี่ช่องสรประบบ แบต 6% คู่กับ RTT หลายร้อยมิลลิวินาที อธิบาย jank ที่เครื่อง dock จำลองไม่ได้ จับคู่กับ User Agent Parser เมื่อตั๋วยังต้องใช้สตริงเบราว์เซอร์และ OS

เซสชันกล้องและฮาร์ดแวร์

วิดีโอสดและอุปกรณ์ USB กินแบตและแพ้ RTT สูง ใช้แดชบอร์ดนี้คู่กับ Camera Tester หรือ USB Device Info Viewer เมื่อแคปเจอร์พัง: ยืนยันว่าไม่ได้แบตใกล้หมดกับ hop มือถือที่หนาแน่นพร้อมกัน

สอน Navigator APIs

เวิร์กช็อปมักกระโดดไป fetch ทันที การโชว์การ์ด Battery และ Network ก่อนทำให้ Adaptive Loading เป็นรูปธรรม นักเรียนถอดสาย เปิด Data Saver แล้วดู downlink กับ RTT ขยับ เส้นทาง Infinity → Unknown สอนได้ดีว่าอย่าถือทุกตัวเลขเป็นคำสัญญา

แนวทางที่ดี

• ถือ downlink และ RTT เป็นคำใบ้ ออกแบบ fallback ด้วย effectiveType และ saveData แล้ววัดเมตริกหน้าจริง อย่าปิด checkout เพราะค่า downlink ค่าเดียว
• รับมือเมื่อ API ไม่มี ตรวจ getBattery และ connection ก่อน เครื่องมือทำอยู่แล้ว ให้คัดลอกแพทเทิร์นนี้ในโปรดักชัน อย่าสมมติว่าเป็น Chrome บน Android ทุกที่
• อย่า fingerprint แบบไม่คิด ถ้าส่งฟิลด์แบตหรือเน็ตไป analytics ให้รวมกลุ่มและบันทึกไว้ ใช้ถังหยาบดีกว่าเปอร์เซ็นต์และมิลลิวินาทีดิบ
• ตรวจใหม่หลังเปลี่ยนไฟและวิทยุ ค่าประมาณตามหลัง หลังเสียบไฟหรือสลับเน็ต ให้รอ event ถัดไปก่อนเชื่อเวลาถึงหมด
• ใช้เบราว์เซอร์ตระกูล Chromium เพื่อแดชบอร์ดเต็ม คาดว่า Battery Status จะไม่มีใน Firefox และ Network Information ใน Safari จะไม่ครบ
• แคปแถวสรประบบติดตั๋ว สี่ตัวเลขดีกว่าย่อหน้า “wifi แปลกๆ”

ต้องการอ่านระดับแบตและคลาสเน็ตโดยไม่ติดตั้งยูทิลิตี้ระบบ? เปิด Battery & Network Status Monitor ค้างแท็บไว้ตอนเสียบไฟหรือเปลี่ยนเน็ต แล้วแคปช่องสรุปสำหรับรายงานบั๊กครั้งถัดไป

Related Tools You Might Like:

• Camera Tester — พรีวิวสตรีมเว็บแคมและชื่ออุปกรณ์ในเบราว์เซอร์
• USB Device Info Viewer — ดูรายละเอียด vendor และ product ผ่าน WebUSB
• User Agent Parser — ถอดเบราว์เซอร์ เอนจิน และ OS จากสตริง UA

ชาร์จให้เต็ม และรู้ RTT ของตัวเอง