ก่อนเริ่มต้น
โปรดไปที่ เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript เพื่อเรียนรู้วิธีทำสิ่งต่อไปนี้
สร้างโปรเจ็กต์ Firebase
ลงทะเบียนเว็บแอปกับ Firebase
โปรดทราบว่าเมื่อคุณเพิ่ม Firebase ลงในแอป คุณอาจทำ ขั้นตอนที่อธิบายภายหลังในหน้านี้ (เช่น การเพิ่ม SDK และการเริ่มต้น Firebase)
ขั้นตอนที่ 1: เพิ่มและเริ่มต้นการตรวจสอบประสิทธิภาพ
หากคุณยังไม่ได้ดำเนินการ ติดตั้ง Firebase JS SDK และเริ่มต้น Firebase
เพิ่ม Performance Monitoring JS SDK และเริ่มต้น Performance Monitoring ดังนี้
Web
import { initializeApp } from "firebase/app"; import { getPerformance } from "firebase/performance"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = getPerformance(app);
Web
import firebase from "firebase/compat/app"; import "firebase/compat/performance"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = firebase.performance();
ขั้นตอนที่ 2: เพิ่มไลบรารี Polyfill ของความล่าช้าอินพุตแรก
ในการวัดค่า เมตริกความล่าช้าของอินพุตแรก คุณต้องเพิ่มไลบรารี Polyfill สำหรับเมตริกนี้ สำหรับติดตั้ง วิธีการ โปรดไปที่คลัง เอกสารประกอบ
คุณไม่จำเป็นต้องเพิ่มไลบรารี Polyfill นี้เพื่อให้การตรวจสอบประสิทธิภาพรายงานอีกรายการ เมตริกเว็บแอป
ขั้นตอนที่ 3: สร้างเหตุการณ์ด้านประสิทธิภาพเพื่อแสดงข้อมูลเริ่มต้น
Firebase จะเริ่มประมวลผลเหตุการณ์เมื่อคุณเพิ่ม SDK ลงใน แอป หากคุณยังพัฒนาในเครื่อง ให้โต้ตอบกับแอปเพื่อสร้าง เหตุการณ์สำหรับการเก็บรวบรวมและประมวลผลข้อมูลเริ่มต้น
แสดงและดูเว็บแอปของคุณในสภาพแวดล้อมในเครื่อง
สร้างเหตุการณ์โดยโหลดหน้าเว็บย่อยสำหรับเว็บไซต์ และโต้ตอบกับ แอปและ/หรือการทริกเกอร์คำขอเครือข่าย อย่าลืมเก็บแท็บเบราว์เซอร์ไว้ เป็นเวลาอย่างน้อย 10 วินาทีหลังจากโหลดหน้าเว็บ
ไปที่หน้าแดชบอร์ดประสิทธิภาพ ของคอนโซล Firebase คุณควรจะเห็นข้อมูลเริ่มต้นแสดงอยู่ภายใน ภายในไม่กี่นาที
หากคุณไม่เห็นการแสดงข้อมูลเริ่มต้น ให้ตรวจสอบการแก้ปัญหา เคล็ดลับ
ขั้นตอนที่ 4: (ไม่บังคับ) ดูข้อความบันทึกสำหรับเหตุการณ์ด้านประสิทธิภาพ
เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ (เช่น แท็บเครือข่ายสำหรับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome หรือใน Network Monitor สำหรับ Firefox)
รีเฟรชเว็บแอปในเบราว์เซอร์
ตรวจสอบข้อความบันทึกของคุณเพื่อหาข้อความแสดงข้อผิดพลาด
หลังจากนั้นไม่กี่วินาที ให้มองหาการเรียกเครือข่ายเพื่อ
firebaselogging.googleapis.com
ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ การมีการเรียกเครือข่ายนั้นแสดงว่าเบราว์เซอร์กำลังส่งประสิทธิภาพ ไปยัง Firebase
หากแอปไม่บันทึกเหตุการณ์ด้านประสิทธิภาพ โปรดดูการแก้ปัญหา เคล็ดลับ
ขั้นตอนที่ 5: (ไม่บังคับ) เพิ่มการตรวจสอบที่กําหนดเองสําหรับโค้ดที่ต้องการ
วิธีตรวจสอบข้อมูลประสิทธิภาพที่เชื่อมโยงกับโค้ดที่ต้องการในแอป การติดตามโค้ดที่กำหนดเอง
คุณสามารถวัดระยะเวลาที่แอปใช้ในการดำเนินการด้วยการติดตามโค้ดที่กำหนดเอง งานหรือชุดงานที่เฉพาะเจาะจง เช่น การโหลดชุดรูปภาพหรือการค้นหา ฐานข้อมูลของคุณ เมตริกเริ่มต้นสำหรับการติดตามโค้ดที่กำหนดเองคือระยะเวลาของเมตริก แต่ คุณยังสามารถเพิ่มเมตริกที่กำหนดเอง เช่น แคช Hit และคำเตือนหน่วยความจำได้
ในโค้ดของคุณ คุณจะต้องกำหนดจุดเริ่มต้นและจุดสิ้นสุดของการติดตามโค้ดที่กำหนดเอง (และ เพิ่มเมตริกที่กําหนดเองที่ต้องการ) โดยใช้ API ที่มาจาก Performance Monitoring SDK
ไปที่หัวข้อเพิ่มการตรวจสอบสำหรับโค้ดที่ต้องการ เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์เหล่านี้ รวมถึงวิธีเพิ่มฟีเจอร์ลงในแอป
ขั้นตอนที่ 6: ทำให้แอปใช้งานได้ จากนั้นตรวจสอบผลลัพธ์
หลังจากที่คุณตรวจสอบประสิทธิภาพการตรวจสอบแล้ว คุณสามารถทำให้เวอร์ชันที่อัปเดตแล้วของ ให้แก่ผู้ใช้ของคุณ
คุณตรวจสอบข้อมูลประสิทธิภาพได้ในประสิทธิภาพ แดชบอร์ดของ คอนโซล Firebase
ขั้นตอนถัดไป
สัมผัสประสบการณ์ในการใช้ การตรวจสอบประสิทธิภาพ Firebase สำหรับ Web Codelab
ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลที่การตรวจสอบประสิทธิภาพรวบรวมโดยอัตโนมัติ
- ข้อมูลสำหรับการโหลดหน้าเว็บในแอป
- ข้อมูลสำหรับคำขอเครือข่าย HTTP/S ออกโดยแอปของคุณ
ดู ติดตาม และกรอง ข้อมูลประสิทธิภาพในคอนโซล Firebase
เพิ่มการตรวจสอบสำหรับงานหรือเวิร์กโฟลว์ที่เฉพาะเจาะจงในแอปโดยทำดังนี้ การใช้เครื่องมือการติดตามโค้ดที่กำหนดเอง