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

ก่อนที่คุณจะเริ่ม

หากคุณยังไม่ได้ไป ที่เพิ่ม Firebase ในโครงการ JavaScript ของคุณ เพื่อเรียนรู้วิธี:

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

  • ลงทะเบียนเว็บแอปของคุณด้วย Firebase

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

ขั้นตอนที่ 1 : เพิ่มและเริ่มต้นการตรวจสอบประสิทธิภาพ

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

  2. เพิ่ม Performance Monitoring JS SDK และเริ่มต้นการตรวจสอบประสิทธิภาพ:

API แบบโมดูลาร์ของเว็บ

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);

API เนมสเปซของเว็บ

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 ความล่าช้าในการป้อนข้อมูลแรก

หากต้องการวัด เมตริกความล่าช้าอินพุตแรก คุณต้องเพิ่มไลบรารีโพลีฟิลสำหรับเมตริกนี้ สำหรับคำแนะนำในการติดตั้ง โปรดดู เอกสารประกอบ ของห้องสมุด

การเพิ่มไลบรารีโพลีฟิลนี้ไม่จำเป็นสำหรับการตรวจสอบประสิทธิภาพเพื่อรายงานตัววัดเว็บแอปอื่นๆ

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

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

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

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

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

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

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

  1. เปิดเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ของคุณ (เช่น แท็บเครือข่ายสำหรับ Chrome Dev Tools หรือใน Network Monitor สำหรับ Firefox )

  2. รีเฟรชแอปพลิเคชันเว็บของคุณในเบราว์เซอร์

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

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

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

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

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

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

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

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

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

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

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

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