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