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

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

หากยังไม่ได้ดำเนินการ ให้ไปที่หัวข้อเพิ่ม 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 สําหรับเมตริกนี้ ดูวิธีการติดตั้งได้จากเอกสารประกอบของไลบรารี

Performance Monitoring ไม่จำเป็นต้องเพิ่มไลบรารี polyfill นี้เพื่อรายงานเมตริกอื่นๆ ของเว็บแอป

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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