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

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

หากยังไม่ได้ดำเนินการ ให้ไปที่เพิ่ม 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: (ไม่บังคับ) เพิ่มการตรวจสอบที่กำหนดเองสำหรับโค้ดที่เฉพาะเจาะจง

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

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

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

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

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

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

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

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