1. ภาพรวม
ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้การตรวจสอบประสิทธิภาพ Firebase เพื่อวัดประสิทธิภาพของเว็บแอปแชท ไปที่ https://fireperf-Friendlychat.web.app/ เพื่อดูการสาธิตสด
สิ่งที่คุณจะได้เรียนรู้
- วิธีเพิ่มการตรวจสอบประสิทธิภาพ Firebase ให้กับเว็บแอปของคุณเพื่อรับการวัดที่พร้อมใช้งานทันที (การโหลดเพจและคำขอเครือข่าย)
- วิธีวัดส่วนของโค้ดเฉพาะด้วยการติดตามแบบกำหนดเอง
- วิธีบันทึกเมตริกที่กำหนดเองเพิ่มเติมซึ่งเชื่อมโยงกับการติดตามที่กำหนดเอง
- วิธีแบ่งกลุ่มข้อมูลประสิทธิภาพของคุณเพิ่มเติมด้วยแอตทริบิวต์ที่กำหนดเอง
- วิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อทำความเข้าใจประสิทธิภาพของเว็บแอปของคุณ
สิ่งที่คุณต้องการ
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
- ใน คอนโซล Firebase คลิก เพิ่มโครงการ
- ตั้งชื่อโปรเจ็กต์ Firebase ของคุณ
FriendlyChat
จำรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ Firebase ของคุณ
- คลิก สร้างโครงการ
เพิ่มเว็บแอป Firebase ให้กับโปรเจ็กต์
- คลิกที่ไอคอนเว็บ เพื่อสร้างเว็บแอป Firebase ใหม่
- ลงทะเบียนแอปด้วยชื่อเล่น
Friendly Chat
จากนั้นทำเครื่องหมายที่ช่องถัดจาก ตั้งค่า Firebase Hosting สำหรับแอปนี้ด้วย - คลิก ลงทะเบียนแอป
- คลิกผ่านขั้นตอนที่เหลือ คุณไม่จำเป็นต้องทำตามคำแนะนำบนหน้าจอตอนนี้ สิ่งเหล่านี้จะกล่าวถึงในขั้นตอนต่อๆ ไปของ Codelab นี้
เปิดใช้งานการลงชื่อเข้าใช้ Google สำหรับการตรวจสอบสิทธิ์ Firebase
หากต้องการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปแชทด้วยบัญชี Google เราจะใช้วิธีการลงชื่อเข้าใช้ Google
คุณจะต้องเปิดใช้งานการลงชื่อเข้าใช้ Google :
- ในคอนโซล Firebase ให้ค้นหาส่วน พัฒนา ในแผงด้านซ้าย
- คลิก การตรวจสอบสิทธิ์ จากนั้นคลิกแท็บ วิธีการลงชื่อเข้าใช้ ( ไปที่คอนโซล )
- เปิดใช้งานผู้ให้บริการลงชื่อเข้าใช้ Google จากนั้นคลิก บันทึก
เปิดใช้งาน Cloud Firestore
เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่
คุณจะต้องเปิดใช้งาน Cloud Firestore:
- ในส่วน พัฒนา ของคอนโซล Firebase ให้คลิก ฐานข้อมูล
- คลิก สร้างฐานข้อมูล ในบานหน้าต่าง Cloud Firestore
- เลือกตัวเลือก เริ่มในโหมดทดสอบ จากนั้นคลิกเปิด ใช้งาน หลังจากอ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัย
โค้ดเริ่มต้นสำหรับ Codelab นี้มีกฎที่ปลอดภัยยิ่งขึ้น เราจะปรับใช้ในภายหลังใน Codelab
เปิดใช้งานที่เก็บข้อมูลบนคลาวด์
เว็บแอปใช้ Cloud Storage สำหรับ Firebase เพื่อจัดเก็บ อัปโหลด และแชร์รูปภาพ
คุณจะต้องเปิดใช้งาน Cloud Storage:
- ในส่วน พัฒนา ของคอนโซล Firebase ให้คลิก ที่เก็บข้อมูล
- คลิก เริ่มต้นใช้งาน
- อ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัยสำหรับโปรเจ็กต์ Firebase ของคุณ จากนั้นคลิก รับ ทราบ
โค้ดเริ่มต้นประกอบด้วยกฎความปลอดภัยพื้นฐาน ซึ่งเราจะนำไปใช้ในภายหลังใน Codelab
4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase
อินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Firebase ช่วยให้คุณใช้โฮสติ้งของ Firebase เพื่อให้บริการเว็บแอปของคุณภายในเครื่อง รวมถึงปรับใช้เว็บแอปกับโปรเจ็กต์ Firebase ของคุณ
- ติดตั้ง CLI โดยทำตาม คำแนะนำเหล่านี้ ในเอกสาร Firebase
- ตรวจสอบว่าติดตั้ง CLI อย่างถูกต้องโดยการรันคำสั่งต่อไปนี้ในเทอร์มินัล:
firebase --version
ตรวจสอบให้แน่ใจว่าเวอร์ชัน Firebase CLI ของคุณเป็นเวอร์ชัน 8.0.0 หรือใหม่กว่า
- ให้สิทธิ์ Firebase CLI โดยการรันคำสั่งต่อไปนี้:
firebase login
เราได้ตั้งค่าเทมเพลตเว็บแอปเพื่อดึงการกำหนดค่าแอปของคุณสำหรับโฮสติ้ง Firebase จากไดเรกทอรีในเครื่องของแอป (พื้นที่เก็บข้อมูลที่คุณโคลนไว้ก่อนหน้านี้ใน Codelab) แต่ในการดึงการกำหนดค่า เราจำเป็นต้องเชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase ของคุณ
- ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณเข้าถึงไดเรกทอรี
performance-monitoring-start
ในเครื่องของแอป - เชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:
firebase use --add
- เมื่อได้รับแจ้ง ให้เลือกรหัสโปรเจ็กต์ของคุณ จากนั้นตั้งชื่อแทนโปรเจ็กต์ Firebase ของคุณ
นามแฝงมีประโยชน์ถ้าคุณมีหลายสภาพแวดล้อม (การใช้งานจริง การจัดเตรียม ฯลฯ) อย่างไรก็ตาม สำหรับ Codelab นี้ ให้ใช้นามแฝงของ default
- ปฏิบัติตามคำแนะนำที่เหลือในบรรทัดคำสั่งของคุณ
5. ผสานรวมกับการตรวจสอบประสิทธิภาพ Firebase
มีหลายวิธีในการผสานรวมกับ Firebase Performance Monitoring SDK สำหรับเว็บ (โปรดดูรายละเอียดใน เอกสาร ประกอบ) ใน Codelab นี้ เราจะเปิดใช้การตรวจสอบประสิทธิภาพจาก URL โฮสติ้ง
เพิ่มการตรวจสอบประสิทธิภาพและเริ่มต้น Firebase
- เปิดไฟล์
src/index.js
จากนั้นเพิ่มบรรทัดต่อไปนี้ใต้TODO
เพื่อรวม Firebase Performance Monitoring SDK
ดัชนี js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- นอกจากนี้เรายังต้องเริ่มต้น Firebase SDK ด้วยออบเจ็กต์การกำหนดค่าที่มีข้อมูลเกี่ยวกับโครงการ Firebase และเว็บแอปที่เราต้องการใช้ เนื่องจากเราใช้ Firebase Hosting คุณจึงสามารถนำเข้าสคริปต์พิเศษที่จะทำการกำหนดค่านี้ให้กับคุณได้ สำหรับ Codelab นี้ เราได้เพิ่มบรรทัดต่อไปนี้ไว้ที่ด้านล่างของไฟล์
public/index.html
แล้ว แต่โปรดตรวจสอบอีกครั้งว่ามีบรรทัดดังกล่าวอยู่หรือไม่
ดัชนี.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- ในไฟล์
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
- ในไฟล์
src/index.js
ให้รับออบเจ็กต์ประสิทธิภาพ จากนั้นสร้างการติดตามที่กำหนดเองสำหรับการอัปโหลดข้อความรูปภาพ
ดัชนี js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- หากต้องการบันทึกการติดตามแบบกำหนดเอง คุณต้องระบุจุดเริ่มต้นและจุดหยุดสำหรับการติดตาม คุณสามารถมองร่องรอยเป็นตัวจับเวลาได้
ดัชนี js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
คุณกำหนดการติดตามที่กำหนดเองสำเร็จแล้ว! หลังจากปรับใช้โค้ดของคุณแล้ว ระยะเวลาของการติดตามแบบกำหนดเองจะถูกบันทึกหากผู้ใช้ส่งข้อความรูปภาพ วิธีนี้จะช่วยให้คุณทราบว่าผู้ใช้ในชีวิตจริงต้องใช้เวลานานแค่ไหนในการส่งรูปภาพในแอปแชทของคุณ
7. เพิ่มตัวชี้วัดที่กำหนดเองให้กับแอปของคุณ
คุณยังกำหนด ค่าการติดตามที่กำหนดเอง เพิ่มเติมเพื่อบันทึกเมตริกที่กำหนดเองสำหรับเหตุการณ์ที่เกี่ยวข้องกับประสิทธิภาพที่เกิดขึ้นภายในขอบเขตได้ ตัวอย่างเช่น คุณสามารถใช้เมตริกเพื่อตรวจสอบว่าเวลาในการอัปโหลดได้รับผลกระทบจากขนาดของรูปภาพสำหรับการติดตามที่กำหนดเองที่เรากำหนดไว้ในขั้นตอนสุดท้ายหรือไม่
- ค้นหาการติดตามที่กำหนดเองจากขั้นตอนก่อนหน้า (กำหนดไว้ในไฟล์
src/index.js
) - เพิ่มบรรทัดต่อไปนี้ใต้
TODO
เพื่อบันทึกขนาดของภาพที่อัปโหลด
ดัชนี js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
ตัวชี้วัดนี้ช่วยให้สามารถติดตามประสิทธิภาพเพื่อบันทึกระยะเวลาการติดตามที่กำหนดเองตลอดจนขนาดภาพที่อัพโหลด
8. เพิ่มแอตทริบิวต์ที่กำหนดเองให้กับแอปของคุณ
จากขั้นตอนก่อนหน้านี้ คุณยังสามารถรวบรวม แอตทริบิวต์ที่กำหนดเอง ใน การติดตามที่กำหนดเอง ได้ แอตทริบิวต์ที่กำหนดเองสามารถช่วยในการแบ่งกลุ่มข้อมูลตามหมวดหมู่เฉพาะสำหรับแอปของคุณได้ ตัวอย่างเช่น คุณสามารถรวบรวมประเภท MIME ของไฟล์ภาพเพื่อตรวจสอบว่าประเภท MIME อาจส่งผลต่อประสิทธิภาพการทำงานอย่างไร
- ใช้การติดตามแบบกำหนดเองที่กำหนดไว้ในไฟล์
src/index.js
ของคุณ - เพิ่มบรรทัดต่อไปนี้ใต้
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
- ในไฟล์
public/index.html
ให้เพิ่มบรรทัดต่อไปนี้เพื่อทำเครื่องหมายจุดเริ่มต้นของการโหลดสคริปต์การจัดรูปแบบแอป
ดัชนี.html
<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
- เพิ่มบรรทัดต่อไปนี้เพื่อทำเครื่องหมายจุดสิ้นสุดของการโหลดสคริปต์การจัดรูปแบบแอป และเพื่อวัดระยะเวลาระหว่างจุดเริ่มต้นและจุดสิ้นสุด
ดัชนี.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:
- ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณเข้าถึงไดเรกทอรี
performance-monitoring-start
ในเครื่องของแอป - ปรับใช้ไฟล์ของคุณกับโปรเจ็กต์ Firebase ของคุณโดยรันคำสั่งต่อไปนี้:
firebase deploy
- คอนโซลควรแสดงสิ่งต่อไปนี้:
=== 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
- เยี่ยมชมแอปพลิเคชันเว็บของคุณที่ขณะนี้โฮสต์โดยสมบูรณ์โดยใช้โฮสติ้งของ Firebase ที่โดเมนย่อย Firebase สองโดเมนของคุณเอง:
https://<projectId>.firebaseapp.com
และhttps://<projectId>.web.app
ตรวจสอบว่าได้เปิดใช้งานการตรวจสอบประสิทธิภาพแล้ว
เปิด คอนโซล Firebase แล้วไปที่แท็บ ประสิทธิภาพ หากคุณเห็นข้อความต้อนรับที่แสดง "ตรวจพบ SDK" แสดงว่าคุณได้ผสานรวมกับการตรวจสอบประสิทธิภาพ Firebase สำเร็จแล้ว!
ส่งข้อความรูปภาพ
สร้างข้อมูลประสิทธิภาพโดยการส่งรูปภาพในแอปแชทของคุณ
- หลังจากลงชื่อเข้าใช้แอปแชทแล้ว ให้คลิกปุ่มอัปโหลดรูปภาพ .
- เลือกไฟล์รูปภาพโดยใช้ตัวเลือกไฟล์
- ลองส่งรูปภาพหลายรูป (ตัวอย่างบางส่วนจะถูกจัดเก็บไว้ใน
public/images/
) เพื่อให้คุณสามารถทดสอบการกระจายของเมตริกที่กำหนดเองและแอตทริบิวต์ที่กำหนดเองได้
ข้อความใหม่ควรแสดงใน UI ของแอปพร้อมกับรูปภาพที่คุณเลือก
11. ตรวจสอบแดชบอร์ด
หลังจากปรับใช้เว็บแอปของคุณและส่งข้อความรูปภาพในฐานะผู้ใช้ คุณสามารถตรวจสอบข้อมูลประสิทธิภาพได้ในแดชบอร์ดการตรวจสอบประสิทธิภาพ (ในคอนโซล Firebase)
เข้าถึงแดชบอร์ดของคุณ
- ใน คอนโซล Firebase ให้เลือกโปรเจ็กต์ที่มีแอป
Friendly Chat
ของคุณ - ในแผงด้านซ้าย ให้ค้นหาส่วน คุณภาพ แล้วคลิก ประสิทธิภาพ
ตรวจสอบข้อมูลในอุปกรณ์
หลังจากที่การตรวจสอบประสิทธิภาพประมวลผลข้อมูลแอปของคุณแล้ว คุณจะเห็นแท็บที่ด้านบนของแดชบอร์ด โปรดกลับมาตรวจสอบอีกครั้งในภายหลังหากคุณยังไม่เห็นข้อมูลหรือแท็บใดๆ
- คลิกแท็บ บนอุปกรณ์
- ตาราง การโหลดเพจ จะแสดงตัวชี้วัดประสิทธิภาพต่างๆ ที่การตรวจสอบประสิทธิภาพรวบรวมโดยอัตโนมัติในขณะที่เพจของคุณกำลังโหลด
- ตาราง ระยะเวลา แสดงการติดตามที่กำหนดเองที่คุณได้กำหนดไว้ในโค้ดของแอป
- คลิก saveImageMessage ในตาราง Durations เพื่อตรวจสอบเมตริกเฉพาะสำหรับการติดตาม
- คลิก รวม เพื่อตรวจสอบการกระจายของขนาดรูปภาพ คุณสามารถดูเมตริกที่คุณเพิ่มเพื่อวัดขนาดรูปภาพสำหรับการติดตามที่กำหนดเองนี้ได้
- คลิก ล่วงเวลา ซึ่งอยู่ถัดจาก รวม ในขั้นตอนก่อนหน้า คุณยังสามารถดู ระยะเวลา ของการติดตามแบบกำหนดเองได้ คลิก ดูเพิ่มเติม เพื่อตรวจสอบข้อมูลที่รวบรวมไว้โดยละเอียด
- ในหน้าที่เปิดขึ้น คุณสามารถแบ่งกลุ่มข้อมูลระยะเวลาตามประเภท MIME ของรูปภาพได้โดยการคลิก imageType ข้อมูลเฉพาะนี้ถูกบันทึกเนื่องจากแอตทริบิวต์ imageType ที่คุณเพิ่มลงในการติดตามที่กำหนดเอง
ตรวจสอบข้อมูลเครือข่าย
คำขอเครือข่าย HTTP/S คือรายงานที่บันทึกเวลาตอบสนองและขนาดเพย์โหลดของการโทรผ่านเครือข่าย
- กลับไปที่หน้าจอหลักของแดชบอร์ดการตรวจสอบประสิทธิภาพ
- คลิกแท็บ เครือข่าย เพื่อดูรายการคำขอเครือข่ายสำหรับเว็บแอปของคุณ
- เรียกดูสิ่งเหล่านี้เพื่อระบุคำขอที่ช้าและเริ่มดำเนินการแก้ไขเพื่อปรับปรุงประสิทธิภาพของแอปของคุณ!
12. ขอแสดงความยินดี!
คุณได้เปิดใช้งาน Firebase SDK สำหรับการตรวจสอบประสิทธิภาพและรวบรวมการติดตามอัตโนมัติและการติดตามที่กำหนดเองเพื่อวัดประสิทธิภาพในโลกแห่งความเป็นจริงของแอปแชทของคุณ!
สิ่งที่เราได้กล่าวถึง:
- การเพิ่ม SDK การตรวจสอบประสิทธิภาพ Firebase ให้กับเว็บแอปของคุณ
- การเพิ่มการติดตามที่กำหนดเองให้กับโค้ดของคุณ
- การบันทึกเมตริกที่กำหนดเองซึ่งเชื่อมโยงกับการติดตามที่กำหนดเอง
- การแบ่งกลุ่มข้อมูลประสิทธิภาพโดยใช้แอตทริบิวต์ที่กำหนดเอง
- ทำความเข้าใจวิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อรับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของแอปของคุณ