Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

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

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

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

  • สร้างโครงการ Firebase

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

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

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

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

  2. เพิ่ม Performance Monitoring JS SDK และเตรียมใช้งาน Performance Monitoring:

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 นี้ไม่จำเป็นสำหรับการมอนิเตอร์ประสิทธิภาพเพื่อรายงานเมตริกเว็บแอปอื่นๆ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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