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

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

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

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

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

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

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

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

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

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

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

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

• รับประสบการณ์จริงด้วย Firebase Performance Monitoring สำหรับ Web Codelab

• เรียนรู้เพิ่มเติมเกี่ยวกับข้อมูลที่เก็บรวบรวมโดยอัตโนมัติโดยการตรวจสอบประสิทธิภาพ:

  • ข้อมูลสำหรับ การโหลดหน้าเว็บ ในแอปของคุณ
  • ข้อมูลสำหรับ คำขอเครือข่าย HTTP/S ที่ออกโดยแอปของคุณ

• ดู ติดตาม และกรอง ข้อมูลประสิทธิภาพของคุณในคอนโซล Firebase

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

• ใช้แอตทริบิวต์เพื่อกรองข้อมูลประสิทธิภาพ