เริ่มต้นใช้งานการตรวจสอบประสิทธิภาพสำหรับเว็บ

ก่อนเริ่มต้น

โปรดไปที่ เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript เพื่อเรียนรู้วิธีทำสิ่งต่อไปนี้

  • สร้างโปรเจ็กต์ Firebase

  • ลงทะเบียนเว็บแอปกับ Firebase

โปรดทราบว่าเมื่อคุณเพิ่ม Firebase ลงในแอป คุณอาจทำ ขั้นตอนที่อธิบายภายหลังในหน้านี้ (เช่น การเพิ่ม SDK และการเริ่มต้น Firebase)

ขั้นตอนที่ 1: เพิ่มและเริ่มต้น Performance Monitoring

  1. หากคุณยังไม่ได้ดำเนินการ ติดตั้ง Firebase JS SDK และเริ่มต้น Firebase

  2. เพิ่ม 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 นี้เพื่อให้ Performance Monitoring รายงานรายการอื่น เมตริกเว็บแอป

ขั้นตอนที่ 3: สร้างเหตุการณ์ประสิทธิภาพสําหรับการแสดงข้อมูลเริ่มต้น

Firebase จะเริ่มประมวลผลเหตุการณ์เมื่อคุณเพิ่ม SDK ลงใน แอป หากคุณยังพัฒนาในเครื่อง ให้โต้ตอบกับแอปเพื่อสร้าง เหตุการณ์สำหรับการเก็บรวบรวมและประมวลผลข้อมูลเริ่มต้น

  1. แสดงและดูเว็บแอปของคุณในสภาพแวดล้อมในเครื่อง

  2. สร้างเหตุการณ์โดยการโหลดหน้าย่อยสําหรับเว็บไซต์ การโต้ตอบกับแอป และ/หรือการเรียกคําขอเครือข่าย ตรวจสอบว่าได้เปิดแท็บเบราว์เซอร์ไว้อย่างน้อย 10 วินาทีหลังจากหน้าเว็บโหลด

  3. ไปที่แดชบอร์ดประสิทธิภาพของคอนโซล Firebase คุณควรจะเห็นข้อมูลเริ่มต้นแสดงอยู่ภายใน ภายในไม่กี่นาที

    หากคุณไม่เห็นการแสดงข้อมูลเริ่มต้น ให้ตรวจสอบการแก้ปัญหา เคล็ดลับ

ขั้นตอนที่ 4: (ไม่บังคับ) ดูข้อความบันทึกสำหรับเหตุการณ์ด้านประสิทธิภาพ

  1. เปิดเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ (เช่น แท็บเครือข่ายสําหรับเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ Chrome หรือในเครื่องมือตรวจสอบเครือข่ายสําหรับ Firefox)

  2. รีเฟรชเว็บแอปในเบราว์เซอร์

  3. ตรวจสอบข้อความบันทึกของคุณเพื่อหาข้อความแสดงข้อผิดพลาด

  4. หลังจากนั้นไม่กี่วินาที ให้มองหาการเรียกเครือข่ายเพื่อ firebaselogging.googleapis.comในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ การมีการเรียกเครือข่ายนั้นแสดงว่าเบราว์เซอร์กำลังส่งประสิทธิภาพ ไปยัง Firebase

หากแอปไม่ได้บันทึกเหตุการณ์ด้านประสิทธิภาพ โปรดดูเคล็ดลับในการแก้ปัญหา

ขั้นตอนที่ 5: (ไม่บังคับ) เพิ่มการตรวจสอบที่กําหนดเองสําหรับโค้ดที่ต้องการ

วิธีตรวจสอบข้อมูลประสิทธิภาพที่เชื่อมโยงกับโค้ดที่ต้องการในแอป การติดตามโค้ดที่กำหนดเอง

คุณสามารถวัดระยะเวลาที่แอปใช้ดำเนินการจนเสร็จสิ้นได้ด้วยการติดตามโค้ดที่กำหนดเอง งานหรือชุดงานที่เฉพาะเจาะจง เช่น การโหลดชุดรูปภาพหรือการค้นหา ฐานข้อมูลของคุณ เมตริกเริ่มต้นสำหรับการติดตามโค้ดที่กำหนดเองคือระยะเวลาของเมตริก แต่ คุณยังสามารถเพิ่มเมตริกที่กำหนดเอง เช่น แคช Hit และคำเตือนหน่วยความจำได้

ในโค้ดของคุณ คุณจะต้องกำหนดจุดเริ่มต้นและจุดสิ้นสุดของการติดตามโค้ดที่กำหนดเอง (และ เพิ่มเมตริกที่กำหนดเองที่ต้องการ) โดยใช้ API ที่ Performance Monitoring SDK มีให้

ไปที่หัวข้อเพิ่มการตรวจสอบสำหรับโค้ดที่ต้องการ เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์เหล่านี้ รวมถึงวิธีเพิ่มฟีเจอร์ลงในแอป

ขั้นตอนที่ 6: ทำให้แอปใช้งานได้ จากนั้นตรวจสอบผลลัพธ์

หลังจากตรวจสอบ Performance Monitoring แล้ว คุณสามารถทำให้เวอร์ชันที่อัปเดตแล้วของ ให้แก่ผู้ใช้ของคุณ

คุณตรวจสอบข้อมูลประสิทธิภาพได้ในประสิทธิภาพ แดชบอร์ดของ คอนโซล Firebase

ขั้นตอนถัดไป