Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

ก่อนจะเริ่ม

หากคุณยังไม่ได้เข้าชม เพิ่ม Firebase กับโครงการ JavaScript ของคุณ เรียนรู้วิธีการ:

  • สร้างโปรเจ็กต์ Firebase

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

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

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

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

  2. เพิ่ม Performance Monitoring JS SDK และเริ่มต้นการตรวจสอบประสิทธิภาพ:

    เว็บรุ่น 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);
    

    เว็บรุ่น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 นี้ไม่จำเป็นสำหรับ Performance Monitoring เพื่อรายงานตัววัดเว็บแอปอื่นๆ

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

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

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

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

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

    หากคุณไม่เห็นการแสดงผลของข้อมูลเบื้องต้นของคุณตรวจสอบ เคล็ดลับการแก้ไขปัญหา

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

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

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

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

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

หากแอปของคุณไม่ได้บันทึกเหตุการณ์การปฏิบัติงานตรวจสอบ เคล็ดลับการแก้ไขปัญหา

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

เพื่อตรวจสอบข้อมูลผลการดำเนินงานที่เกี่ยวข้องกับรหัสเฉพาะใน app ของคุณคุณสามารถเครื่องดนตรี ร่องรอยรหัสที่กำหนดเอง

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

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

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

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

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

คุณสามารถตรวจสอบข้อมูลประสิทธิภาพใน แผงควบคุมการปฏิบัติงาน ของคอนโซล Firebase

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