ก่อนเริ่มต้น
หากยังไม่ได้ดำเนินการ ให้ไปที่หัวข้อเพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript เพื่อดูวิธีดำเนินการต่อไปนี้
สร้างโปรเจ็กต์ Firebase
ลงทะเบียนเว็บแอปกับ Firebase
โปรดทราบว่าเมื่อเพิ่ม Firebase ลงในแอป คุณอาจทําตามขั้นตอนบางอย่างที่อธิบายไว้ในส่วนถัดไปของหน้านี้ (เช่น การเพิ่ม SDK และเริ่มต้นใช้งาน Firebase)
ขั้นตอนที่ 1: เพิ่มและเริ่มต้น Performance Monitoring
หากยังไม่ได้ดำเนินการ ให้ติดตั้ง Firebase JS SDK และเริ่มต้น Firebase
เพิ่ม 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 ลงในแอปเรียบร้อยแล้ว หากคุณยังพัฒนาแอปในเครื่อง ให้โต้ตอบกับแอปเพื่อสร้างเหตุการณ์สําหรับการเก็บรวบรวมและประมวลผลข้อมูลครั้งแรก
แสดงและดูเว็บแอปในสภาพแวดล้อมในเครื่อง
สร้างเหตุการณ์โดยการโหลดหน้าย่อยสําหรับเว็บไซต์ การโต้ตอบกับแอป และ/หรือการเรียกคําขอเครือข่าย ตรวจสอบว่าได้เปิดแท็บเบราว์เซอร์ไว้อย่างน้อย 10 วินาทีหลังจากหน้าเว็บโหลด
ไปที่แดชบอร์ดประสิทธิภาพของคอนโซล Firebase คุณควรเห็นข้อมูลเริ่มต้นแสดงภายในไม่กี่นาที
หากไม่เห็นการแสดงข้อมูลเริ่มต้น โปรดดูเคล็ดลับการแก้ปัญหา
ขั้นตอนที่ 4: (ไม่บังคับ) ดูข้อความบันทึกสําหรับเหตุการณ์ด้านประสิทธิภาพ
เปิดเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ (เช่น แท็บเครือข่ายสําหรับเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ Chrome หรือในเครื่องมือตรวจสอบเครือข่ายสําหรับ Firefox)
รีเฟรชเว็บแอปในเบราว์เซอร์
ตรวจสอบข้อความบันทึกเพื่อหาข้อความแสดงข้อผิดพลาด
หลังจากผ่านไป 2-3 วินาที ให้มองหาการเรียกใช้เครือข่ายเพื่อไปที่
firebaselogging.googleapis.com
ในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ การเรียกใช้เครือข่ายดังกล่าวแสดงให้เห็นว่าเบราว์เซอร์ส่งข้อมูลประสิทธิภาพไปยัง Firebase
หากแอปไม่ได้บันทึกเหตุการณ์ด้านประสิทธิภาพ โปรดดูเคล็ดลับการแก้ปัญหา
ขั้นตอนที่ 5: (ไม่บังคับ) เพิ่มการตรวจสอบที่กําหนดเองสําหรับโค้ดที่เฉพาะเจาะจง
หากต้องการตรวจสอบข้อมูลประสิทธิภาพที่เชื่อมโยงกับโค้ดที่เฉพาะเจาะจงในแอป คุณสามารถตรวจสอบการติดตามโค้ดที่กําหนดเอง
การติดตามโค้ดที่กําหนดเองช่วยให้คุณวัดระยะเวลาที่แอปใช้ในการทํางานหนึ่งๆ หรือชุดงานให้เสร็จสมบูรณ์ได้ เช่น การโหลดชุดรูปภาพหรือการค้นหาฐานข้อมูล เมตริกเริ่มต้นสำหรับการติดตามโค้ดที่กำหนดเองคือระยะเวลา แต่คุณก็เพิ่มเมตริกที่กำหนดเองได้ เช่น การตีกลับแคชและคำเตือนเกี่ยวกับหน่วยความจำ
ในโค้ด คุณจะกําหนดจุดเริ่มต้นและจุดสิ้นสุดของการติดตามโค้ดที่กําหนดเอง (และเพิ่มเมตริกที่กําหนดเองที่ต้องการ) โดยใช้ API ที่ Performance Monitoring SDK มีให้
โปรดไปที่เพิ่มการตรวจสอบสำหรับโค้ดที่เฉพาะเจาะจงเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์เหล่านี้และวิธีเพิ่มลงในแอป
ขั้นตอนที่ 6: ติดตั้งใช้งานแอปแล้วตรวจสอบผลลัพธ์
หลังจากตรวจสอบ Performance Monitoring แล้ว คุณจะเผยแพร่แอปเวอร์ชันอัปเดตให้แก่ผู้ใช้ได้
คุณตรวจสอบข้อมูลประสิทธิภาพได้ในหน้าแดชบอร์ดประสิทธิภาพของคอนโซล Firebase
ขั้นตอนถัดไป
รับประสบการณ์การใช้งาน Firebase Performance Monitoring สำหรับ Web Codelab แบบลงมือปฏิบัติจริง
ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลที่ Performance Monitoring รวบรวมโดยอัตโนมัติ
- ข้อมูลสําหรับการโหลดหน้าเว็บในแอป
- ข้อมูลสําหรับคําขอเครือข่าย HTTP/S ที่ส่งโดยแอปของคุณ
ดู ติดตาม และกรองข้อมูลประสิทธิภาพในคอนโซล Firebase
เพิ่มการตรวจสอบสำหรับงานหรือเวิร์กโฟลว์ที่เฉพาะเจาะจงในแอปโดยเครื่องมือวัดการติดตามโค้ดที่กำหนดเอง