۱. مرور کلی
در این آزمایشگاه کد، یاد خواهید گرفت که چگونه از Firebase Performance Monitoring برای اندازهگیری عملکرد یک برنامه وب چت استفاده کنید. برای دیدن نسخه آزمایشی زنده به https://fireperf-friendlychat.web.app/ مراجعه کنید.
آنچه یاد خواهید گرفت
- نحوه اضافه کردن Firebase Performance Monitoring به برنامه وب خود برای دریافت معیارهای آماده (بارگذاری صفحه و درخواستهای شبکه).
- نحوه اندازهگیری یک قطعه کد خاص با ردیابیهای سفارشی.
- نحوه ثبت معیارهای اضافی و سفارشی مرتبط با یک ردیابی سفارشی.
- چگونه دادههای عملکرد خود را با ویژگیهای سفارشی، بیشتر بخشبندی کنید.
- نحوه استفاده از داشبورد نظارت بر عملکرد برای درک عملکرد برنامه وب شما.
آنچه نیاز دارید
۲. کد نمونه را دریافت کنید
مخزن گیتهاب codelab را از خط فرمان کلون کنید:
git clone https://github.com/firebase/codelab-friendlychat-web
از طرف دیگر، اگر گیت را نصب ندارید، میتوانید مخزن را به صورت یک فایل زیپ دانلود کنید .
برنامه شروع کننده را وارد کنید
با استفاده از IDE خود، پوشه 📁 performance-monitoring-start را از مخزن کلون شده باز یا وارد کنید. این پوشه 📁 performance-monitoring-start شامل کد شروع codelab است که یک برنامه وب چت است.
۳. ایجاد و راهاندازی یک پروژه Firebase
ایجاد یک پروژه فایربیس
- با استفاده از حساب گوگل خود وارد کنسول فایربیس شوید.
- برای ایجاد یک پروژه جدید، روی دکمه کلیک کنید و سپس نام پروژه را وارد کنید (برای مثال،
FriendlyChat). - روی ادامه کلیک کنید.
- در صورت درخواست، شرایط Firebase را مرور و قبول کنید و سپس روی ادامه کلیک کنید.
- (اختیاری) دستیار هوش مصنوعی را در کنسول Firebase (با نام "Gemini در Firebase") فعال کنید.
- برای این codelab، به گوگل آنالیتیکس نیاز ندارید ، بنابراین گزینه گوگل آنالیتیکس را غیرفعال کنید .
- روی ایجاد پروژه کلیک کنید، منتظر بمانید تا پروژه شما آماده شود و سپس روی ادامه کلیک کنید.
طرح قیمتگذاری فایربیس خود را ارتقا دهید
برای استفاده از فضای ذخیرهسازی ابری برای فایربیس، پروژه فایربیس شما باید در طرح قیمتگذاری پرداخت در محل (Blaze) باشد، به این معنی که به یک حساب پرداخت ابری متصل باشد.
- یک حساب Cloud Billing به یک روش پرداخت، مانند کارت اعتباری، نیاز دارد.
- اگر در استفاده از فایربیس و گوگل کلود تازهکار هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار ۳۰۰ دلاری و یک حساب کاربری رایگان ابری هستید یا خیر.
- اگر این codelab را به عنوان بخشی از یک رویداد انجام میدهید، از برگزارکننده خود بپرسید که آیا امکان استفاده از فضای ابری (Cloud credits) وجود دارد یا خیر.
برای ارتقاء پروژه خود به طرح Blaze، مراحل زیر را دنبال کنید:
- در کنسول Firebase، گزینه ارتقاء پلن خود را انتخاب کنید.
- طرح Blaze را انتخاب کنید. دستورالعملهای روی صفحه را دنبال کنید تا یک حساب Cloud Billing به پروژه شما متصل شود.
اگر به عنوان بخشی از این ارتقا نیاز به ایجاد یک حساب Cloud Billing داشتید، ممکن است لازم باشد برای تکمیل ارتقا، به روند ارتقا در کنسول Firebase برگردید.
یک برنامه وب Firebase به پروژه اضافه کنید
- روی آیکون وب کلیک کنید
برای ایجاد یک برنامه وب جدید Firebase. - برنامه را با نام مستعار
Friendly Chatثبت کنید و سپس کادر کنار گزینه Also set up Firebase Hosting for this app را علامت بزنید. - روی ثبت برنامه کلیک کنید.
- مراحل باقیمانده را کلیک کنید. اکنون نیازی به دنبال کردن دستورالعملهای روی صفحه ندارید؛ این موارد در مراحل بعدی این آزمایشگاه کد پوشش داده خواهند شد.
ورود به سیستم گوگل را برای احراز هویت فایربیس فعال کنید
برای اینکه کاربران بتوانند با حسابهای گوگل خود وارد برنامه چت شوند، از متد ورود به سیستم گوگل استفاده خواهیم کرد.
شما باید ورود به سیستم گوگل را فعال کنید:
- در کنسول Firebase، بخش Develop را در پنل سمت چپ پیدا کنید.
- روی «احراز هویت» کلیک کنید، سپس روی برگه «روش ورود» کلیک کنید ( به کنسول بروید ).
- ارائه دهنده ورود به سیستم گوگل را فعال کنید و سپس روی ذخیره کلیک کنید.
راه اندازی کلود فایر استور
برنامه وب از Cloud Firestore برای ذخیره پیامهای چت و دریافت پیامهای چت جدید استفاده میکند.
در اینجا نحوه تنظیم Cloud Firestore در پروژه Firebase شما آورده شده است:
- در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Firestore database را انتخاب کنید.
- روی ایجاد پایگاه داده کلیک کنید.
- شناسه پایگاه داده را روی
(default)تنظیم کنید. - مکانی را برای پایگاه داده خود انتخاب کنید، سپس روی Next کلیک کنید.
برای یک اپلیکیشن واقعی، شما میخواهید مکانی را انتخاب کنید که به کاربرانتان نزدیک باشد. - روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
بعداً در این آزمایشگاه کد، قوانین امنیتی را برای ایمنسازی دادههای خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای پایگاه داده خود، برنامه را به صورت عمومی توزیع یا افشا نکنید . - روی ایجاد کلیک کنید.
راهاندازی فضای ذخیرهسازی ابری برای فایربیس
این برنامه وب از فضای ذخیرهسازی ابری برای فایربیس جهت ذخیره، آپلود و اشتراکگذاری تصاویر استفاده میکند.
در اینجا نحوه تنظیم فضای ذخیرهسازی ابری برای فایربیس در پروژه فایربیس شما آورده شده است:
- در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Storage را انتخاب کنید.
- روی شروع به کار کلیک کنید.
- مکانی را برای سطل ذخیرهسازی پیشفرض خود انتخاب کنید.
کاربران درUS-WEST1،US-CENTRAL1وUS-EAST1میتوانند از ردیف «همیشه رایگان» برای Google Cloud Storage بهرهمند شوند. کاربران در سایر مناطق ، از قیمتها و میزان استفاده از Google Cloud Storage پیروی میکنند. - روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
بعداً در این آزمایشگاه کد، قوانین امنیتی را برای ایمنسازی دادههای خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای مخزن ذخیرهسازی خود، برنامه را به صورت عمومی توزیع یا در معرض نمایش قرار ندهید . - روی ایجاد کلیک کنید.
۴. رابط خط فرمان Firebase را نصب کنید
رابط خط فرمان (CLI) فایربیس به شما امکان میدهد از میزبانی فایربیس برای ارائه برنامه وب خود به صورت محلی و همچنین استقرار برنامه وب خود در پروژه فایربیس خود استفاده کنید.
- با دنبال کردن این دستورالعملها در مستندات Firebase، رابط خط فرمان (CLI) را نصب کنید.
- با اجرای دستور زیر در ترمینال، تأیید کنید که CLI به درستی نصب شده است:
firebase --version
مطمئن شوید که نسخه Firebase CLI شما نسخه ۸.۰.۰ یا بالاتر است.
- با اجرای دستور زیر، Firebase CLI را مجاز کنید:
firebase login
ما قالب برنامه وب را طوری تنظیم کردهایم که پیکربندی برنامه شما را برای Firebase Hosting از دایرکتوری محلی برنامهتان (مخزن کدی که قبلاً در codelab کپی کردهاید) دریافت کند. اما برای دریافت پیکربندی، باید برنامه شما را با پروژه Firebase شما مرتبط کنیم.
- مطمئن شوید که خط فرمان شما به دایرکتوری محلی
performance-monitoring-startبرنامهتان دسترسی دارد. - با اجرای دستور زیر، برنامه خود را با پروژه Firebase خود مرتبط کنید:
firebase use --add
- وقتی از شما خواسته شد، شناسه پروژه خود را انتخاب کنید و سپس به پروژه Firebase خود یک نام مستعار بدهید.
اگر چندین محیط (محیط تولید، محیط مرحلهبندی و غیره) دارید، یک نام مستعار مفید است. با این حال، برای این آزمایشگاه کد، بیایید فقط از نام مستعار default استفاده کنیم.
- دستورالعملهای باقیمانده را در خط فرمان خود دنبال کنید.
۵. ادغام با نظارت بر عملکرد فایربیس
روشهای مختلفی برای ادغام با SDK نظارت بر عملکرد Firebase برای وب وجود دارد (برای جزئیات بیشتر به مستندات مراجعه کنید). در این آزمایشگاه کد، نظارت بر عملکرد را از طریق Hosting URLs فعال خواهیم کرد.
نظارت بر عملکرد را اضافه کنید و Firebase را مقداردهی اولیه کنید
- فایل
src/index.jsرا باز کنید، سپس خط زیر را زیرTODOاضافه کنید تا SDK نظارت بر عملکرد Firebase را شامل شود.
ایندکس.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();
اکنون، «نظارت بر عملکرد» بهطور خودکار، هنگام استفاده کاربران از سایت شما، معیارهای بارگذاری صفحه و درخواست شبکه را برای شما جمعآوری میکند! برای کسب اطلاعات بیشتر در مورد ردیابی خودکار بارگذاری صفحه، به مستندات مراجعه کنید .
اولین کتابخانه چندپر کردن تأخیر ورودی را اضافه کنید
تأخیر در اولین ورودی مفید است، زیرا مرورگر با پاسخ به تعامل کاربر، اولین برداشت کاربران را در مورد واکنشگرایی برنامه شما ارائه میدهد.
تأخیر اولین ورودی زمانی شروع میشود که کاربر برای اولین بار با یک عنصر در صفحه تعامل میکند، مانند کلیک روی یک دکمه یا لینک. این تأخیر بلافاصله پس از اینکه مرورگر قادر به پاسخ به ورودی باشد، متوقف میشود، به این معنی که مرورگر مشغول بارگذاری یا تجزیه محتوای شما نیست.
این کتابخانهی چندمنظوره برای یکپارچهسازی نظارت بر عملکرد اختیاری است.
فایل 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 را خواهید آموخت. اگر فقط میخواهید ردپاهای خودکار را جمعآوری کنید، به بخش «استقرار و شروع ارسال تصاویر» بروید.
۶. یک مسیر سفارشی به برنامه خود اضافه کنید
نظارت بر عملکرد به شما امکان میدهد تا ردیابیهای سفارشی ایجاد کنید. ردیابی سفارشی، گزارشی برای مدت زمان یک بلوک اجرایی در برنامه شما است. شما شروع و پایان ردیابی سفارشی را با استفاده از API های ارائه شده توسط SDK تعریف میکنید.
- در فایل
src/index.js، یک شیء performance دریافت کنید، سپس یک trace سفارشی برای آپلود یک پیام تصویری ایجاد کنید.
ایندکس.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();
شما با موفقیت یک مسیر سفارشی تعریف کردید! پس از استقرار کد خود، اگر کاربری یک پیام تصویری ارسال کند، مدت زمان مسیر سفارشی ثبت خواهد شد. این به شما ایدهای میدهد که چقدر طول میکشد تا کاربران دنیای واقعی تصاویر را در برنامه چت شما ارسال کنند.
۷. یک معیار سفارشی به برنامه خود اضافه کنید.
شما میتوانید یک ردیابی سفارشی را برای ثبت معیارهای سفارشی برای رویدادهای مرتبط با عملکرد که در محدوده آن رخ میدهند، پیکربندی کنید. به عنوان مثال، میتوانید از یک معیار برای بررسی اینکه آیا زمان آپلود تحت تأثیر اندازه یک تصویر برای ردیابی سفارشی که در مرحله قبل تعریف کردیم، قرار میگیرد یا خیر، استفاده کنید.
- مسیر سفارشی از مرحله قبل (که در فایل
src/index.jsشما تعریف شده است) را پیدا کنید. - برای ثبت اندازه تصویر آپلود شده، خط زیر را زیر
TODOاضافه کنید.
ایندکس.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
این معیار، نظارت بر عملکرد را قادر میسازد تا مدت زمان ردیابی سفارشی و همچنین اندازه تصویر آپلود شده را ثبت کند.
۸. یک ویژگی سفارشی به برنامه خود اضافه کنید
با تکیه بر مراحل قبلی، میتوانید ویژگیهای سفارشی را نیز در ردپاهای سفارشی خود جمعآوری کنید. ویژگیهای سفارشی میتوانند به تقسیمبندی دادهها بر اساس دستهبندیهای خاص برنامه شما کمک کنند. به عنوان مثال، میتوانید نوع MIME فایل تصویر را جمعآوری کنید تا بررسی کنید که چگونه نوع MIME ممکن است بر عملکرد تأثیر بگذارد.
- از ردیابی سفارشی تعریف شده در فایل
src/index.jsخود استفاده کنید. - خط زیر را زیر
TODOاضافه کنید تا نوع MIME تصویر آپلود شده را ثبت کند.
ایندکس.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
این ویژگی، نظارت بر عملکرد را قادر میسازد تا مدت زمان ردیابی سفارشی را بر اساس نوع تصویر آپلود شده دستهبندی کند.
۹. [گسترش] اضافه کردن یک مسیر سفارشی با رابط برنامهنویسی زمانبندی کاربر
کیت توسعه نرمافزاری مانیتورینگ عملکرد فایربیس (Firebase Performance Monitoring SDK) به گونهای طراحی شده است که بتواند به صورت غیرهمزمان بارگذاری شود و بنابراین تأثیر منفی بر عملکرد برنامههای وب در هنگام بارگذاری صفحه نداشته باشد. قبل از بارگذاری SDK، API مانیتورینگ عملکرد فایربیس در دسترس نیست. در این سناریو، شما همچنان میتوانید با استفاده از API زمانبندی کاربر (User Timing API) ردیابیهای سفارشی اضافه کنید. کیت توسعه نرمافزاری مانیتورینگ عملکرد فایربیس (Firebase performance SDK) مدت زمانها را از measure() دریافت کرده و آنها را به عنوان ردیابیهای سفارشی ثبت میکند.
ما قصد داریم مدت زمان بارگذاری اسکریپتهای استایلدهی برنامه را با استفاده از 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 پیدا کنید.
۱۰. استقرار و شروع ارسال تصاویر
استقرار در میزبانی فایربیس
پس از افزودن Firebase Performance Monitoring به کد خود، این مراحل را برای استقرار کد خود در 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.firebasestorage.app
✔ 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 Hosting در دو زیر دامنه Firebase خود میزبانی میشود، بازدید کنید:
https://<projectId>.firebaseapp.comوhttps://<projectId>.web.app.
تأیید کنید که نظارت بر عملکرد فعال است
کنسول فایربیس را باز کنید و به تب Performance بروید. اگر پیام خوشامدگویی با عنوان "SDK detected" (شناسایی SDK) را مشاهده کردید، پس با موفقیت با Firebase Performance Monitoring (نظارت بر عملکرد فایربیس) ادغام شدهاید!
ارسال پیام تصویری
با ارسال تصاویر در برنامه چت خود، دادههای عملکردی ایجاد کنید.
- پس از ورود به برنامه چت خود، روی دکمه آپلود تصویر کلیک کنید
. - با استفاده از انتخابگر فایل، یک فایل تصویری انتخاب کنید.
- سعی کنید چندین تصویر ارسال کنید (چند نمونه در
public/images/ذخیره شدهاند) تا بتوانید توزیع معیارها و ویژگیهای سفارشی را آزمایش کنید.
پیامهای جدید باید به همراه تصاویر انتخابی شما در رابط کاربری برنامه نمایش داده شوند.
۱۱. داشبورد را زیر نظر داشته باشید
پس از استقرار برنامه وب خود و ارسال پیامهای تصویری به عنوان کاربر، میتوانید دادههای عملکرد را در داشبورد نظارت بر عملکرد (در کنسول Firebase) بررسی کنید.
به داشبورد خود دسترسی پیدا کنید
- در کنسول Firebase ، پروژهای را که برنامه
Friendly Chatشما روی آن قرار دارد، انتخاب کنید. - در پنل سمت چپ، بخش کیفیت (Quality) را پیدا کنید و روی عملکرد (Performance) کلیک کنید.
بررسی دادههای روی دستگاه
پس از اینکه نظارت بر عملکرد، دادههای برنامه شما را پردازش کرد، تبهایی را در بالای داشبورد مشاهده خواهید کرد. اگر هنوز هیچ داده یا تبی نمیبینید، حتماً بعداً دوباره بررسی کنید.
- روی برگه «روشن کردن دستگاه» کلیک کنید.
- جدول بارگذاری صفحات ، معیارهای عملکردی مختلفی را نشان میدهد که نظارت بر عملکرد بهطور خودکار هنگام بارگذاری صفحه شما جمعآوری میکند.
- جدول Durations هرگونه ردپای سفارشی را که در کد برنامه خود تعریف کردهاید، نشان میدهد.
- برای بررسی معیارهای خاص برای ردیابی، روی saveImageMessage در جدول Durations کلیک کنید.
- برای بررسی توزیع اندازه تصاویر، روی Aggregate کلیک کنید. میتوانید معیاری را که برای اندازهگیری اندازه تصویر برای این ردیابی سفارشی اضافه کردهاید، مشاهده کنید.
- روی «گذشت زمان» که در مرحله قبل کنار «جمعبندی» است کلیک کنید. همچنین میتوانید مدت زمان ردیابی سفارشی را مشاهده کنید. برای بررسی دقیقتر دادههای جمعآوریشده، روی «مشاهده بیشتر» کلیک کنید.
- در صفحهای که باز میشود، میتوانید با کلیک روی imageType، دادههای مدت زمان را بر اساس نوع MIME تصویر تقسیمبندی کنید. این دادههای خاص به دلیل ویژگی imageType که به ردیابی سفارشی خود اضافه کردهاید، ثبت شدهاند.
بررسی دادههای شبکه
درخواست شبکه HTTP/S گزارشی است که زمان پاسخ و اندازه بار مفید (payload) فراخوانیهای شبکه را ثبت میکند.
- به صفحه اصلی داشبورد نظارت بر عملکرد برگردید.
- برای مشاهده فهرستی از درخواستهای شبکه برای برنامه وب خود، روی برگه شبکه کلیک کنید.
- آنها را مرور کنید تا درخواستهای کند را شناسایی کنید و برای بهبود عملکرد برنامه خود، روی رفع آنها کار کنید!
۱۲. تبریک میگویم!
شما Firebase SDK را برای نظارت بر عملکرد فعال کردهاید و ردیابیهای خودکار و ردیابیهای سفارشی را برای اندازهگیری عملکرد واقعی برنامه چت خود جمعآوری کردهاید!
آنچه ما پوشش دادهایم:
- افزودن SDK نظارت بر عملکرد Firebase به برنامه وب شما.
- اضافه کردن ردپاهای سفارشی به کد شما.
- ثبت معیارهای سفارشی مرتبط با ردیابی سفارشی.
- بخشبندی دادههای عملکرد با استفاده از ویژگیهای سفارشی
- درک نحوه استفاده از داشبورد نظارت بر عملکرد برای کسب بینش در مورد عملکرد برنامه شما.