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

ก่อนจะเริ่ม

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

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

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

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

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

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

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

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
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 Dev หรือใน Network Monitor สำหรับ Firefox )

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

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

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

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

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

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

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

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

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

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

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

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

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