1. ภาพรวม
ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้การตรวจสอบประสิทธิภาพของ Firebase เพื่อวัดประสิทธิภาพของเว็บแอปแชท ดูการสาธิตแบบสดได้ที่ https://fireperf-friendlychat.web.app/
สิ่งที่คุณจะได้เรียนรู้
- วิธีเพิ่มการตรวจสอบประสิทธิภาพของ Firebase ลงในเว็บแอปเพื่อดูเมตริกที่พร้อมใช้งานทันที (การโหลดหน้าเว็บและคำขอเครือข่าย)
- วิธีวัดส่วนของโค้ดที่เฉพาะเจาะจงด้วยการติดตามที่กำหนดเอง
- วิธีบันทึกเมตริกที่กําหนดเองเพิ่มเติมที่เชื่อมโยงกับการติดตามที่กําหนดเอง
- วิธีแบ่งกลุ่มข้อมูลประสิทธิภาพเพิ่มเติมด้วยแอตทริบิวต์ที่กำหนดเอง
- วิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อทำความเข้าใจประสิทธิภาพของเว็บแอป
สิ่งที่ต้องมี
2. รับโค้ดตัวอย่าง
โคลนที่เก็บ GitHub ของ Codelab จากบรรทัดคำสั่งดังนี้
git clone https://github.com/firebase/codelab-friendlychat-web
หรือหากยังไม่ได้ติดตั้ง git คุณสามารถดาวน์โหลดที่เก็บเป็นไฟล์ ZIP ได้
นำเข้าแอปเริ่มต้น
เมื่อใช้ IDE ให้เปิดหรือนำเข้าไดเรกทอรี 📁 performance-monitoring-start
จากที่เก็บที่โคลน ไดเรกทอรี 📁 performance-monitoring-start
นี้มีโค้ดเริ่มต้นสำหรับ Codelab ซึ่งเป็นเว็บแอปสำหรับแชท
3. สร้างและตั้งค่าโปรเจ็กต์ Firebase
สร้างโปรเจ็กต์ Firebase
- ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์
- ตั้งชื่อโปรเจ็กต์ Firebase ของคุณว่า
FriendlyChat
จำรหัสโปรเจ็กต์ของโปรเจ็กต์ Firebase
- คลิกสร้างโปรเจ็กต์
เพิ่มเว็บแอป Firebase ลงในโปรเจ็กต์
- คลิกไอคอนเว็บ เพื่อสร้างเว็บแอป Firebase ใหม่
- ลงทะเบียนแอปด้วยชื่อเล่น
Friendly Chat
จากนั้นเลือกช่องข้างตั้งค่าโฮสติ้งของ Firebase สำหรับแอปนี้ด้วย - คลิกลงทะเบียนแอป
- คลิกขั้นตอนที่เหลือ คุณไม่จำเป็นต้องทำตามวิธีการบนหน้าจอในตอนนี้ ซึ่งจะกล่าวถึงในขั้นตอนถัดไปของ Codelab นี้
เปิดใช้ Google Sign-In สำหรับการตรวจสอบสิทธิ์ Firebase
หากต้องการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปแชทด้วยบัญชี Google เราจะใช้วิธีการลงชื่อเข้าใช้ของ Google
คุณจะต้องเปิดใช้การลงชื่อเข้าใช้ Google โดยทำดังนี้
- ในคอนโซล Firebase ให้ค้นหาส่วน Develop ในแผงด้านซ้าย
- คลิกการตรวจสอบสิทธิ์ จากนั้นคลิกแท็บวิธีการลงชื่อเข้าใช้ ( ไปที่คอนโซล)
- เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ Google แล้วคลิกบันทึก
เปิดใช้ Cloud Firestore
เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่
คุณจะต้องเปิดใช้ Cloud Firestore
- ในส่วนพัฒนาของคอนโซล Firebase ให้คลิกฐานข้อมูล
- คลิกสร้างฐานข้อมูลในแผง Cloud Firestore
- เลือกตัวเลือกเริ่มในโหมดทดสอบ แล้วคลิกเปิดใช้หลังจากอ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัยแล้ว
โค้ดเริ่มต้นสำหรับ Codelab นี้มีกฎที่ปลอดภัยกว่า เราจะทำให้ใช้งานได้ในภายหลังใน Codelab
เปิดใช้ Cloud Storage
โดยเว็บแอปนี้ใช้ Cloud Storage for 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
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- นอกจากนี้ เรายังต้องเริ่มต้น Firebase SDK ด้วยออบเจ็กต์การกำหนดค่าที่มีข้อมูลเกี่ยวกับโปรเจ็กต์ Firebase และเว็บแอปที่ต้องการใช้ เนื่องจากเราใช้โฮสติ้งของ Firebase คุณจึงสามารถนำเข้าสคริปต์พิเศษที่จะทำการกำหนดค่านี้ให้คุณได้ สำหรับ Codelab นี้ เราได้เพิ่มบรรทัดต่อไปนี้ให้คุณแล้วที่ด้านล่างของไฟล์
public/index.html
แต่โปรดตรวจสอบอีกครั้งว่ามีบรรทัดดังกล่าวหรือไม่
index.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- ในไฟล์
src/index.js
ให้เพิ่มบรรทัดต่อไปนี้ใต้TODO
เพื่อเริ่มต้นการตรวจสอบประสิทธิภาพ
index.js
// TODO: Initialize Firebase Performance Monitoring.
getPerformance();
ต่อไปนี้การตรวจสอบประสิทธิภาพจะรวบรวมเมตริกการโหลดหน้าเว็บและคำขอเครือข่ายโดยอัตโนมัติเมื่อผู้ใช้ใช้งานเว็บไซต์ของคุณ ดูเอกสารประกอบเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตามการโหลดหน้าเว็บอัตโนมัติ
เพิ่มไลบรารี Polyfill ของความล่าช้าอินพุตแรก
ความล่าช้าในการป้อนข้อมูลครั้งแรกมีประโยชน์เนื่องจากเบราว์เซอร์ที่ตอบสนองต่อการโต้ตอบของผู้ใช้จะทำให้ผู้ใช้มีความประทับใจแรกเกี่ยวกับการตอบสนองของแอป
ความล่าช้าในการอินพุตครั้งแรกจะเริ่มขึ้นเมื่อผู้ใช้โต้ตอบกับองค์ประกอบใดๆ บนหน้าเว็บเป็นครั้งแรก เช่น การคลิกปุ่มหรือไฮเปอร์ลิงก์ โดยจะหยุดทันทีที่เบราว์เซอร์ตอบสนองต่ออินพุตได้ ซึ่งหมายความว่าเบราว์เซอร์จะไม่ยุ่งอยู่กับการโหลดหรือแยกวิเคราะห์เนื้อหาของคุณ
ไลบรารี Polyfill นี้ไม่บังคับสำหรับการผสานรวมการตรวจสอบประสิทธิภาพ
เปิดไฟล์ public/index.html
แล้วยกเลิกการแสดงความคิดเห็นบรรทัดต่อไปนี้
index.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 ในโค้ดเรียบร้อยแล้ว
ในขั้นตอนต่อไปนี้ คุณจะได้ทราบเกี่ยวกับการเพิ่มการติดตามที่กำหนดเองโดยใช้การตรวจสอบประสิทธิภาพของ Firebase หากต้องการรวบรวมการติดตามอัตโนมัติเท่านั้น ให้ไปที่ส่วน "ติดตั้งใช้งานและเริ่มส่งรูปภาพ"
6. เพิ่มการติดตามที่กำหนดเองลงในแอป
การตรวจสอบประสิทธิภาพช่วยให้คุณสร้างการติดตามที่กำหนดเองได้ การติดตามที่กำหนดเองคือรายงานที่เกิดขึ้นในช่วงเวลาที่มีการบล็อกการดำเนินการในแอป คุณกําหนดจุดเริ่มต้นและจุดสิ้นสุดของการติดตามที่กําหนดเองโดยใช้ API ที่ SDK มีให้
- ในไฟล์
src/index.js
ให้รับออบเจ็กต์ประสิทธิภาพ แล้วสร้างการติดตามที่กำหนดเองสำหรับการอัปโหลดข้อความรูปภาพ
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- หากต้องการบันทึกการติดตามที่กำหนดเอง คุณต้องระบุจุดเริ่มต้นและจุดสิ้นสุดสำหรับการติดตาม คุณอาจมองว่าการติดตามคือตัวจับเวลา
index.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
เพื่อบันทึกขนาดของรูปภาพที่อัปโหลด
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
เมตริกนี้ทำให้การตรวจสอบประสิทธิภาพบันทึกระยะเวลาการติดตามที่กำหนดเองและขนาดรูปภาพที่อัปโหลดได้
8. เพิ่มแอตทริบิวต์ที่กำหนดเองลงในแอป
คุณยังรวบรวมแอตทริบิวต์ที่กำหนดเองในการติดตามที่กำหนดเองจากขั้นตอนก่อนหน้านี้ได้อีกด้วย แอตทริบิวต์ที่กำหนดเองสามารถช่วยคุณในการแบ่งกลุ่มข้อมูลตามหมวดหมู่สำหรับแอปของคุณโดยเฉพาะ ตัวอย่างเช่น คุณสามารถรวบรวมประเภท MIME ของไฟล์ภาพเพื่อตรวจสอบว่าประเภท MIME อาจส่งผลต่อประสิทธิภาพอย่างไร
- ใช้การติดตามแบบกำหนดเองที่กำหนดไว้ในไฟล์
src/index.js
- เพิ่มบรรทัดต่อไปนี้ใต้
TODO
เพื่อบันทึกประเภท MIME ของรูปภาพที่อัปโหลด
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
แอตทริบิวต์นี้ช่วยให้การตรวจสอบประสิทธิภาพจัดหมวดหมู่ระยะเวลาการติดตามที่กำหนดเองตามประเภทรูปภาพที่อัปโหลดได้
9. [ขยาย] เพิ่มการติดตามที่กำหนดเองด้วย User Timing API
Firebase Performance Monitoring SDK ออกแบบมาเพื่อให้โหลดแบบไม่พร้อมกันได้ จึงไม่ส่งผลเสียต่อประสิทธิภาพของเว็บแอประหว่างการโหลดหน้าเว็บ Firebase Performance Monitoring API จะใช้งานไม่ได้ก่อนที่จะโหลด SDK ในสถานการณ์นี้ คุณจะยังเพิ่มการติดตามที่กําหนดเองได้โดยใช้ User Timing API Firebase Performance SDK จะเลือกระยะเวลาจาก measure() แล้วบันทึกเป็นการติดตามที่กำหนดเอง
เราจะวัดระยะเวลาในการโหลดสคริปต์การจัดรูปแบบแอปโดยใช้ User Timing API
- ในไฟล์
public/index.html
ให้เพิ่มบรรทัดต่อไปนี้เพื่อทำเครื่องหมายการเริ่มต้นโหลดสคริปต์การจัดรูปแบบแอป
index.html
<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
- เพิ่มบรรทัดต่อไปนี้เพื่อทำเครื่องหมายจุดสิ้นสุดของการโหลดสคริปต์การจัดรูปแบบแอป และวัดระยะเวลาระหว่างเวลาเริ่มต้นและสิ้นสุด
index.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 จะรวบรวมรายการที่คุณสร้างไว้ที่นี่โดยอัตโนมัติ คุณจะค้นหาการติดตามที่กําหนดเองที่ชื่อ loadStyling
ได้ในคอนโซลประสิทธิภาพของ Firebase ในภายหลัง
10. ทำให้ใช้งานได้และเริ่มส่งรูปภาพ
ทำให้ใช้งานได้กับโฮสติ้งของ Firebase
หลังจากที่เพิ่มการตรวจสอบประสิทธิภาพของ Firebase ลงในโค้ดแล้ว ให้ทำตามขั้นตอนต่อไปนี้เพื่อทำให้โค้ดใช้งานได้ในโฮสติ้งของ Firebase
- ตรวจสอบว่าบรรทัดคำสั่งกำลังเข้าถึงไดเรกทอรี
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 2 โดเมนคือ
https://<projectId>.firebaseapp.com
และhttps://<projectId>.web.app
ตรวจสอบว่าได้เปิดใช้การตรวจสอบประสิทธิภาพแล้ว
เปิดคอนโซล Firebase แล้วไปที่แท็บประสิทธิภาพ หากเห็นข้อความต้อนรับที่แสดงข้อความ "ตรวจพบ SDK" แสดงว่าคุณผสานรวมกับการตรวจสอบประสิทธิภาพของ Firebase เรียบร้อยแล้ว
ส่งข้อความรูปภาพ
สร้างข้อมูลประสิทธิภาพโดยส่งรูปภาพในแอปแชท
- หลังจากลงชื่อเข้าใช้แอปแชทแล้ว ให้คลิกปุ่มอัปโหลดรูปภาพ
- เลือกไฟล์ภาพโดยใช้เครื่องมือเลือกไฟล์
- ลองส่งรูปภาพหลายๆ รูป (ตัวอย่าง 2-3 ภาพจัดเก็บอยู่ใน
public/images/
) เพื่อให้คุณทดสอบการกระจายของเมตริกที่กำหนดเองและแอตทริบิวต์ที่กำหนดเองได้
ข้อความใหม่ควรแสดงใน UI ของแอปพร้อมกับรูปภาพที่คุณเลือก
11. ติดตามดูหน้าแดชบอร์ด
หลังจากทำให้เว็บแอปใช้งานได้และส่งข้อความรูปภาพในฐานะผู้ใช้ คุณจะตรวจสอบข้อมูลประสิทธิภาพได้ในแดชบอร์ดการตรวจสอบประสิทธิภาพ (ในคอนโซล Firebase)
เข้าถึงหน้าแดชบอร์ด
- ในคอนโซล Firebase ให้เลือกโปรเจ็กต์ที่มีแอป
Friendly Chat
- ในแผงด้านซ้าย ให้ค้นหาส่วนคุณภาพ แล้วคลิกประสิทธิภาพ
ตรวจสอบข้อมูลในอุปกรณ์
หลังจากการตรวจสอบประสิทธิภาพประมวลผลข้อมูลของแอปแล้ว คุณจะเห็นแท็บที่ด้านบนของแดชบอร์ด โปรดกลับมาตรวจสอบในภายหลังหากคุณยังไม่เห็นข้อมูลหรือแท็บใดๆ เลย
- คลิกแท็บในอุปกรณ์
- ตารางการโหลดหน้าเว็บจะแสดงเมตริกประสิทธิภาพต่างๆ ที่การตรวจสอบประสิทธิภาพรวบรวมโดยอัตโนมัติในขณะที่โหลดหน้าเว็บ
- ตารางระยะเวลาจะแสดงการติดตามที่กำหนดเองที่คุณได้กำหนดไว้ในโค้ดของแอป
- คลิก saveImageMessage ในตารางระยะเวลาเพื่อดูเมตริกเฉพาะสำหรับการติดตามนั้น
- คลิกรวมเพื่อตรวจสอบการกระจายของขนาดรูปภาพ คุณดูเมตริกที่เพิ่มไว้เพื่อวัดขนาดรูปภาพสำหรับการติดตามที่กำหนดเองนี้ได้
- คลิกตลอดช่วงเวลาซึ่งอยู่ถัดจากรวบรวมในขั้นตอนก่อนหน้า คุณจะดูระยะเวลาของการติดตามที่กำหนดเองได้ด้วย คลิกดูเพิ่มเติมเพื่อตรวจสอบข้อมูลที่รวบรวมมาอย่างละเอียด
- ในหน้าเว็บที่เปิดขึ้น คุณสามารถแบ่งกลุ่มข้อมูลระยะเวลาตามประเภท MIME ของรูปภาพโดยคลิก imageType ข้อมูลนี้ได้รับการบันทึกเนื่องจากแอตทริบิวต์ imageType ที่คุณเพิ่มลงในการติดตามที่กำหนดเอง
ตรวจสอบข้อมูลเครือข่าย
คำขอเครือข่าย HTTP/S คือรายงานที่บันทึกเวลาตอบสนองและขนาดเพย์โหลดของการเรียกใช้เครือข่าย
- กลับไปที่หน้าจอหลักของแดชบอร์ดการตรวจสอบประสิทธิภาพ
- คลิกแท็บเครือข่ายเพื่อดูรายการคำขอเครือข่ายสำหรับเว็บแอป
- เรียกดูส่วนดังกล่าวเพื่อระบุคำขอที่โหลดช้าและเริ่มดำเนินการแก้ไขเพื่อปรับปรุงประสิทธิภาพของแอป
12. ยินดีด้วย
คุณได้เปิดใช้ Firebase SDK เพื่อการตรวจสอบประสิทธิภาพและรวบรวมการติดตามอัตโนมัติและการติดตามที่กำหนดเองเพื่อวัดประสิทธิภาพจริงของแอปแชท
หัวข้อที่ครอบคลุมมีดังนี้
- การเพิ่ม Firebase Performance Monitoring SDK ลงในเว็บแอป
- การเพิ่มการติดตามที่กำหนดเองลงในโค้ด
- กำลังบันทึกเมตริกที่กำหนดเองซึ่งเชื่อมโยงกับการติดตามที่กำหนดเอง
- การแบ่งกลุ่มข้อมูลประสิทธิภาพโดยใช้แอตทริบิวต์ที่กำหนดเอง
- การทำความเข้าใจวิธีใช้หน้าแดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อรับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของแอป