การตรวจสอบประสิทธิภาพ Firebase สำหรับเว็บ

1. ภาพรวม

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้การตรวจสอบประสิทธิภาพ Firebase เพื่อวัดประสิทธิภาพของเว็บแอปแชท ไปที่ https://fireperf-Friendlychat.web.app/ เพื่อดูการสาธิตสด

3b1284f5144b54f6.png

สิ่งที่คุณจะได้เรียนรู้

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

สิ่งที่คุณต้องการ

  • IDE หรือโปรแกรมแก้ไขข้อความที่คุณเลือก เช่น WebStorm , Atom , Sublime หรือ VS Code
  • เทอร์มินัล/คอนโซล
  • เบราว์เซอร์ที่คุณเลือก เช่น Chrome
  • โค้ดตัวอย่างของ Codelab (ดูส่วนถัดไปของ Codelab นี้เพื่อดูวิธีรับโค้ด)

2. รับโค้ดตัวอย่าง

โคลน ที่เก็บ GitHub ของ codelab จากบรรทัดคำสั่ง:

git clone https://github.com/firebase/codelab-friendlychat-web

หรือหากคุณไม่ได้ติดตั้ง git คุณสามารถ ดาวน์โหลด repo เป็นไฟล์ zip ได้

นำเข้าแอปเริ่มต้น

ใช้ IDE ของคุณ เปิดหรือนำเข้าไดเร็กทอรี 📁 performance-monitoring-start จากพื้นที่เก็บข้อมูลโคลน ไดเรกทอรี 📁 performance-monitoring-start นี้ประกอบด้วยโค้ดเริ่มต้นสำหรับ Codelab ซึ่งเป็นเว็บแอปแชท

3. สร้างและตั้งค่าโปรเจ็กต์ Firebase

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

  1. ใน คอนโซล Firebase คลิก เพิ่มโครงการ
  2. ตั้งชื่อโปรเจ็กต์ Firebase ของคุณ FriendlyChat

จำรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ Firebase ของคุณ

  1. คลิก สร้างโครงการ

เพิ่มเว็บแอป Firebase ให้กับโปรเจ็กต์

  1. คลิกที่ไอคอนเว็บ 58d6543a156e56f9.png เพื่อสร้างเว็บแอป Firebase ใหม่
  2. ลงทะเบียนแอปด้วยชื่อเล่น Friendly Chat จากนั้นทำเครื่องหมายที่ช่องถัดจาก ตั้งค่า Firebase Hosting สำหรับแอปนี้ด้วย
  3. คลิก ลงทะเบียนแอป
  4. คลิกผ่านขั้นตอนที่เหลือ คุณไม่จำเป็นต้องทำตามคำแนะนำบนหน้าจอตอนนี้ สิ่งเหล่านี้จะกล่าวถึงในขั้นตอนต่อๆ ไปของ Codelab นี้

ea9ab0db531a104c.png

เปิดใช้งานการลงชื่อเข้าใช้ Google สำหรับการตรวจสอบสิทธิ์ Firebase

หากต้องการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปแชทด้วยบัญชี Google เราจะใช้วิธีการลงชื่อเข้าใช้ Google

คุณจะต้องเปิดใช้งานการลงชื่อเข้าใช้ Google :

  1. ในคอนโซล Firebase ให้ค้นหาส่วน พัฒนา ในแผงด้านซ้าย
  2. คลิก การตรวจสอบสิทธิ์ จากนั้นคลิกแท็บ วิธีการลงชื่อเข้าใช้ ( ไปที่คอนโซล )
  3. เปิดใช้งานผู้ให้บริการลงชื่อเข้าใช้ Google จากนั้นคลิก บันทึก

7f3040a646c2e502.png

เปิดใช้งาน Cloud Firestore

เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่

คุณจะต้องเปิดใช้งาน Cloud Firestore:

  1. ในส่วน พัฒนา ของคอนโซล Firebase ให้คลิก ฐานข้อมูล
  2. คลิก สร้างฐานข้อมูล ในบานหน้าต่าง Cloud Firestore
  3. เลือกตัวเลือก เริ่มในโหมดทดสอบ จากนั้นคลิกเปิด ใช้งาน หลังจากอ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัย

โค้ดเริ่มต้นสำหรับ Codelab นี้มีกฎที่ปลอดภัยยิ่งขึ้น เราจะปรับใช้ในภายหลังใน Codelab

24bd1a097492eac6.png

เปิดใช้งานที่เก็บข้อมูลบนคลาวด์

เว็บแอปใช้ Cloud Storage สำหรับ Firebase เพื่อจัดเก็บ อัปโหลด และแชร์รูปภาพ

คุณจะต้องเปิดใช้งาน Cloud Storage:

  1. ในส่วน พัฒนา ของคอนโซล Firebase ให้คลิก ที่เก็บข้อมูล
  2. คลิก เริ่มต้นใช้งาน
  3. อ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัยสำหรับโปรเจ็กต์ Firebase ของคุณ จากนั้นคลิก รับ ทราบ

โค้ดเริ่มต้นประกอบด้วยกฎความปลอดภัยพื้นฐาน ซึ่งเราจะนำไปใช้ในภายหลังใน Codelab

4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase

อินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Firebase ช่วยให้คุณใช้โฮสติ้งของ Firebase เพื่อให้บริการเว็บแอปของคุณภายในเครื่อง รวมถึงปรับใช้เว็บแอปกับโปรเจ็กต์ Firebase ของคุณ

  1. ติดตั้ง CLI โดยทำตาม คำแนะนำเหล่านี้ ในเอกสาร Firebase
  2. ตรวจสอบว่าติดตั้ง CLI อย่างถูกต้องโดยการรันคำสั่งต่อไปนี้ในเทอร์มินัล:
firebase --version

ตรวจสอบให้แน่ใจว่าเวอร์ชัน Firebase CLI ของคุณเป็นเวอร์ชัน 8.0.0 หรือใหม่กว่า

  1. ให้สิทธิ์ Firebase CLI โดยการรันคำสั่งต่อไปนี้:
firebase login

เราได้ตั้งค่าเทมเพลตเว็บแอปเพื่อดึงการกำหนดค่าแอปของคุณสำหรับโฮสติ้ง Firebase จากไดเรกทอรีในเครื่องของแอป (พื้นที่เก็บข้อมูลที่คุณโคลนไว้ก่อนหน้านี้ใน Codelab) แต่ในการดึงการกำหนดค่า เราจำเป็นต้องเชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase ของคุณ

  1. ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณเข้าถึงไดเรกทอรี performance-monitoring-start ในเครื่องของแอป
  2. เชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:
firebase use --add
  1. เมื่อได้รับแจ้ง ให้เลือกรหัสโปรเจ็กต์ของคุณ จากนั้นตั้งชื่อแทนโปรเจ็กต์ Firebase ของคุณ

นามแฝงมีประโยชน์ถ้าคุณมีหลายสภาพแวดล้อม (การใช้งานจริง การจัดเตรียม ฯลฯ) อย่างไรก็ตาม สำหรับ Codelab นี้ ให้ใช้นามแฝงของ default

  1. ปฏิบัติตามคำแนะนำที่เหลือในบรรทัดคำสั่งของคุณ

5. ผสานรวมกับการตรวจสอบประสิทธิภาพ Firebase

มีหลายวิธีในการผสานรวมกับ Firebase Performance Monitoring SDK สำหรับเว็บ (โปรดดูรายละเอียดใน เอกสาร ประกอบ) ใน Codelab นี้ เราจะเปิดใช้การตรวจสอบประสิทธิภาพจาก URL โฮสติ้ง

เพิ่มการตรวจสอบประสิทธิภาพและเริ่มต้น Firebase

  1. เปิดไฟล์ src/index.js จากนั้นเพิ่มบรรทัดต่อไปนี้ใต้ TODO เพื่อรวม Firebase Performance Monitoring SDK

ดัชนี js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. นอกจากนี้เรายังต้องเริ่มต้น Firebase SDK ด้วยออบเจ็กต์การกำหนดค่าที่มีข้อมูลเกี่ยวกับโครงการ Firebase และเว็บแอปที่เราต้องการใช้ เนื่องจากเราใช้ Firebase Hosting คุณจึงสามารถนำเข้าสคริปต์พิเศษที่จะทำการกำหนดค่านี้ให้กับคุณได้ สำหรับ Codelab นี้ เราได้เพิ่มบรรทัดต่อไปนี้ไว้ที่ด้านล่างของไฟล์ public/index.html แล้ว แต่โปรดตรวจสอบอีกครั้งว่ามีบรรทัดดังกล่าวอยู่หรือไม่

ดัชนี.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. ในไฟล์ src/index.js ให้เพิ่มบรรทัดต่อไปนี้ใต้ TODO เพื่อเริ่มต้นการตรวจสอบประสิทธิภาพ

ดัชนี js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

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

เพิ่มไลบรารี polyfill ความล่าช้าในการป้อนข้อมูลแรก

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

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

ไลบรารีโพลีฟิลนี้เป็นทางเลือกสำหรับการผสานรวมการตรวจสอบประสิทธิภาพ

เปิดไฟล์ public/index.html จากนั้นยกเลิกหมายเหตุในบรรทัดต่อไปนี้

ดัชนี.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

ณ จุดนี้ คุณได้ผสานรวมกับ Firebase Performance Monitoring ในโค้ดของคุณเรียบร้อยแล้ว!

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

6. เพิ่มการติดตามที่กำหนดเองให้กับแอปของคุณ

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

  1. ในไฟล์ src/index.js ให้รับออบเจ็กต์ประสิทธิภาพ จากนั้นสร้างการติดตามที่กำหนดเองสำหรับการอัปโหลดข้อความรูปภาพ

ดัชนี js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. หากต้องการบันทึกการติดตามแบบกำหนดเอง คุณต้องระบุจุดเริ่มต้นและจุดหยุดสำหรับการติดตาม คุณสามารถมองร่องรอยเป็นตัวจับเวลาได้

ดัชนี js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

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

7. เพิ่มตัวชี้วัดที่กำหนดเองให้กับแอปของคุณ

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

  1. ค้นหาการติดตามที่กำหนดเองจากขั้นตอนก่อนหน้า (กำหนดไว้ในไฟล์ src/index.js )
  2. เพิ่มบรรทัดต่อไปนี้ใต้ TODO เพื่อบันทึกขนาดของภาพที่อัปโหลด

ดัชนี js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

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

8. เพิ่มแอตทริบิวต์ที่กำหนดเองให้กับแอปของคุณ

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

  1. ใช้การติดตามแบบกำหนดเองที่กำหนดไว้ในไฟล์ src/index.js ของคุณ
  2. เพิ่มบรรทัดต่อไปนี้ใต้ TODO เพื่อบันทึกประเภท MIME ของรูปภาพที่อัปโหลด

ดัชนี js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

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

9. [ขยาย] เพิ่มการติดตามที่กำหนดเองด้วย User Timing API

SDK การตรวจสอบประสิทธิภาพ Firebase ได้รับการออกแบบมาให้สามารถโหลดแบบอะซิงโครนัสได้ และจะไม่ส่งผลเสียต่อประสิทธิภาพของเว็บแอปในระหว่างการโหลดหน้าเว็บ ก่อนที่จะโหลด SDK Firebase Performance Monitoring API จะไม่พร้อมใช้งาน ในสถานการณ์สมมตินี้ คุณยังคงสามารถเพิ่มการติดตามแบบกำหนดเองได้โดยใช้ User Timing API SDK ประสิทธิภาพ Firebase จะรับระยะเวลาจาก การวัด () และบันทึกเป็นการติดตามที่กำหนดเอง

เราจะวัดระยะเวลาในการโหลดสคริปต์สไตล์แอปโดยใช้ User Timing API

  1. ในไฟล์ public/index.html ให้เพิ่มบรรทัดต่อไปนี้เพื่อทำเครื่องหมายจุดเริ่มต้นของการโหลดสคริปต์การจัดรูปแบบแอป

ดัชนี.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. เพิ่มบรรทัดต่อไปนี้เพื่อทำเครื่องหมายจุดสิ้นสุดของการโหลดสคริปต์การจัดรูปแบบแอป และเพื่อวัดระยะเวลาระหว่างจุดเริ่มต้นและจุดสิ้นสุด

ดัชนี.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

รายการที่คุณสร้างที่นี่จะถูกรวบรวมโดยอัตโนมัติโดย Firebase Performance Monitoring คุณจะพบการติดตามที่กำหนดเองที่เรียกว่า loadStyling ในคอนโซล Firebase Performance ในภายหลัง

10. ปรับใช้และเริ่มส่งรูปภาพ

ปรับใช้กับโฮสติ้ง Firebase

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

  1. ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณเข้าถึงไดเรกทอรี performance-monitoring-start ในเครื่องของแอป
  2. ปรับใช้ไฟล์ของคุณกับโปรเจ็กต์ Firebase ของคุณโดยรันคำสั่งต่อไปนี้:
firebase deploy
  1. คอนโซลควรแสดงสิ่งต่อไปนี้:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. เยี่ยมชมแอปพลิเคชันเว็บของคุณที่ขณะนี้โฮสต์โดยสมบูรณ์โดยใช้โฮสติ้งของ Firebase ที่โดเมนย่อย Firebase สองโดเมนของคุณเอง: https://<projectId>.firebaseapp.com และ https://<projectId>.web.app

ตรวจสอบว่าได้เปิดใช้งานการตรวจสอบประสิทธิภาพแล้ว

เปิด คอนโซล Firebase แล้วไปที่แท็บ ประสิทธิภาพ หากคุณเห็นข้อความต้อนรับที่แสดง "ตรวจพบ SDK" แสดงว่าคุณได้ผสานรวมกับการตรวจสอบประสิทธิภาพ Firebase สำเร็จแล้ว!

30df67e5a07d03b0.png

ส่งข้อความรูปภาพ

สร้างข้อมูลประสิทธิภาพโดยการส่งรูปภาพในแอปแชทของคุณ

  1. หลังจากลงชื่อเข้าใช้แอปแชทแล้ว ให้คลิกปุ่มอัปโหลดรูปภาพ 13734cb66773e5a3.png .
  2. เลือกไฟล์รูปภาพโดยใช้ตัวเลือกไฟล์
  3. ลองส่งรูปภาพหลายรูป (ตัวอย่างบางส่วนจะถูกจัดเก็บไว้ใน public/images/ ) เพื่อให้คุณสามารถทดสอบการกระจายของเมตริกที่กำหนดเองและแอตทริบิวต์ที่กำหนดเองได้

ข้อความใหม่ควรแสดงใน UI ของแอปพร้อมกับรูปภาพที่คุณเลือก

11. ตรวจสอบแดชบอร์ด

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

เข้าถึงแดชบอร์ดของคุณ

  1. ใน คอนโซล Firebase ให้เลือกโปรเจ็กต์ที่มีแอป Friendly Chat ของคุณ
  2. ในแผงด้านซ้าย ให้ค้นหาส่วน คุณภาพ แล้วคลิก ประสิทธิภาพ

ตรวจสอบข้อมูลในอุปกรณ์

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

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

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

ตรวจสอบข้อมูลเครือข่าย

คำขอเครือข่าย HTTP/S คือรายงานที่บันทึกเวลาตอบสนองและขนาดเพย์โหลดของการโทรผ่านเครือข่าย

  1. กลับไปที่หน้าจอหลักของแดชบอร์ดการตรวจสอบประสิทธิภาพ
  2. คลิกแท็บ เครือข่าย เพื่อดูรายการคำขอเครือข่ายสำหรับเว็บแอปของคุณ
  3. เรียกดูสิ่งเหล่านี้เพื่อระบุคำขอที่ช้าและเริ่มดำเนินการแก้ไขเพื่อปรับปรุงประสิทธิภาพของแอปของคุณ!

26a2be152a77ffb9.png

12. ขอแสดงความยินดี!

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

สิ่งที่เราได้กล่าวถึง:

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

เรียนรู้เพิ่มเติม: