اشکال زدایی برنامه های وب پیشرفته

Kayce Basques

Sofia Emelianova

از پنل Application برای بازرسی، اصلاح و اشکال زدایی مانیفست های برنامه های وب، سرویس دهنده ها و حافظه های پنهان سرویس دهنده استفاده کنید.

برنامه های وب پیشرو (PWA) برنامه های مدرن و با کیفیتی هستند که با استفاده از فناوری وب ساخته شده اند. PWA ها قابلیت های مشابهی را برای برنامه های iOS، اندروید و دسکتاپ ارائه می دهند. آنها عبارتند از:

• قابل اعتماد حتی در شرایط شبکه ناپایدار.
• قابل نصب برای راه اندازی سطوح سیستم عامل، مانند پوشه برنامه ها در Mac OS X، منوی Start در ویندوز و صفحه اصلی در Android و iOS.
• در تعویض‌کننده‌های فعالیت، موتورهای جستجوی دستگاه مانند Spotlight، و در برگه‌های اشتراک‌گذاری محتوا نمایش داده می‌شوند.

این راهنما فقط ویژگی های برنامه وب پیشرفته پانل برنامه را مورد بحث قرار می دهد. اگر به دنبال کمک در سایر بخش‌ها هستید، آخرین بخش این راهنما، راهنمای پانل سایر برنامه‌ها را بررسی کنید.

خلاصه

• از تب Manifest برای بررسی مانیفست برنامه وب خود استفاده کنید.
• از برگه Service Workers برای طیف وسیعی از وظایف مربوط به سرویس‌کاران، مانند لغو ثبت یا به‌روزرسانی یک سرویس، شبیه‌سازی رویدادهای فشار، آفلاین شدن یا توقف یک سرویس‌کار استفاده کنید.
• کش سرویس کارمند خود را از برگه حافظه پنهان مشاهده کنید.
• یک سرویس‌کار را لغو ثبت کنید و با یک کلیک یک دکمه از برگه پاک کردن فضای ذخیره‌سازی، تمام فضای ذخیره‌سازی و حافظه‌های پنهان را پاک کنید.

مانیفست برنامه وب

اگر می‌خواهید کاربرانتان بتوانند برنامه‌تان را به پوشه برنامه‌ها در Mac OS X، منوی Start در ویندوز و صفحه اصلی در Android و iOS اضافه کنند، به یک مانیفست برنامه وب نیاز دارید. مانیفست نحوه نمایش برنامه در صفحه اصلی، نحوه هدایت کاربر هنگام راه‌اندازی از صفحه اصلی و ظاهر برنامه در هنگام راه‌اندازی را مشخص می‌کند.

هنگامی که مانیفست خود را تنظیم کردید، می توانید از تب Manifest در پنل برنامه برای بررسی آن استفاده کنید.

• برای مشاهده منبع مانیفست، روی پیوند زیر برچسب مانیفست برنامه ( manifest.webmanifest در تصویر بالا) کلیک کنید.
• بخش Identity و Presentation فقط فیلدهای منبع مانیفست را به روشی کاربرپسندتر نشان می دهد.
• بخش Protocol Handlers به ​​شما این امکان را می دهد تا با کلیک یک دکمه، ثبت نام کنترل کننده پروتکل URL PWA خود را آزمایش کنید. برای کسب اطلاعات بیشتر، به ثبت نام کنترل کننده پروتکل URL تست مراجعه کنید.
• بخش نمادها هر نمادی را که مشخص کرده اید نمایش می دهد و به شما امکان می دهد ماسک آنها را بررسی کنید.
• مجموعه بخش های میانبر #N اطلاعاتی را در مورد تمام اشیاء میانبر شما نمایش می دهد.
• مجموعه بخش Screenshot #N اسکرین‌شات‌ها را برای رابط کاربری نصب غنی‌تر برنامه شما نمایش می‌دهد.

علاوه بر این، اگر DevTools با خطایی مواجه شود، مانند نمادی که نمی‌تواند بارگیری شود، تب Manifest یک بخش Installability را نشان می‌دهد که خطا را توصیف می‌کند.

نمادهای ماسک پذیر را مشاهده و بررسی کنید

بخش نمادها در تب Manifest تمام نمادهای برنامه شما را نمایش می دهد. در این بخش، همچنین می‌توانید مناطق امن را برای آیکون‌های ماسک‌پذیر ، فرمت آیکون‌هایی که با پلتفرم‌ها سازگار هستند را بررسی کنید.

برای برش دادن نمادها به طوری که فقط حداقل منطقه امن قابل مشاهده باشد، بررسی کنید فقط حداقل منطقه امن را برای نمادهای قابل ماسک نشان دهید .

اگر کل لوگوی شما در منطقه امن قابل مشاهده است، شما آماده هستید.

نصب ماشه

Chrome این امکان را برای شما فراهم می کند که نصب PWA خود را مستقیماً در رابط کاربری آن فعال و ترویج کنید. با نحوه ارائه تجربه نصب درون برنامه ای خود آشنا شوید.

برای راه اندازی جریان نصب PWA:

1. صفحه فرود PWA را در کروم باز کنید.

2. در سمت راست نوار آدرس در بالا، کلیک کنید نصب کنید .

   

3. دستورالعمل های روی صفحه را دنبال کنید.

ویژگی برنامه نصب نمی تواند گردش کار را برای دستگاه های تلفن همراه شبیه سازی کند. توجه کنید که چگونه مرورگر کروم دسکتاپ دکمه نصب را در نوار آدرس نمایش می دهد، حتی اگر DevTools در حالت دستگاه است. با این حال، اگر بتوانید با موفقیت برنامه خود را به دسکتاپ خود اضافه کنید، برای موبایل نیز کار خواهد کرد.

اگر می‌خواهید تجربه واقعی تلفن همراه را آزمایش کنید، می‌توانید یک دستگاه تلفن همراه واقعی را از طریق اشکال‌زدایی از راه دور به DevTools متصل کنید. برای راه اندازی نصب در دستگاه تلفن همراه متصل، آن را باز کنید منوی سه نقطه و کلیک کنید برنامه را نصب کنید .

میانبرها را بررسی کنید

میانبرهای برنامه به شما این امکان را می دهد که دسترسی سریع به تعدادی از اقدامات معمولی که کاربران اغلب به آنها نیاز دارند را فراهم کنید.

برای بررسی میانبرهایی که در فایل مانیفست خود تعریف کرده اید، به بخش Shortcut #N در برگه Manifest بروید.

اسکرین شات ها را برای یک رابط کاربری نصب غنی تر بررسی کنید

وقتی توضیحات و مجموعه‌ای از اسکرین‌شات‌ها را به فایل مانیفست خود اضافه می‌کنید، برنامه شما گفتگوی نصب غنی‌تری دریافت می‌کند.

برای بررسی اسکرین شات ها، به بخش Screenshot #N در برگه Manifest بروید.

تست ثبت نام کنترل کننده پروتکل URL

PWA ها می توانند پیوندهایی را مدیریت کنند که از پروتکل خاصی برای تجربه یکپارچه تر استفاده می کنند. برای یادگیری نحوه ایجاد یک کنترل کننده، به ثبت نام کنترل کننده پروتکل URL برای PWA ها مراجعه کنید.

برای آزمایش کنترلر خود:

1. DevTools را در صفحه فرود PWA خود باز کنید . برای مثال، این دمو PWA را بررسی کنید.
2. از صفحه نمایشی، PWA را نصب کنید و پس از نصب برنامه را دوباره بارگیری کنید. مرورگر اکنون PWA را به عنوان یک کنترل کننده برای پروتکل web+coffee ثبت کرده است.
3. در بخش Application > Manifest > Protocol Handler ، URL مورد نظر را که می خواهید کنترل کننده آزمایش کند وارد کنید و روی Test protocol کلیک کنید. در این مثال، کنترل کننده می تواند americano ، chai و latte-macchiato را پردازش کند.
4. وقتی Chrome از شما می‌پرسد آیا می‌تواند برنامه را باز کند، با کلیک روی Open Protocol Handler تأیید کنید.
5. در گفتگوی بعدی، به برنامه اجازه دهید پیوندهای web+coffee را مدیریت کند.

اگر کنترل کننده پیوند را با موفقیت پردازش کند، تصویری از یک فنجان قهوه را در برنامه خواهید دید.

کارگران خدماتی

کارکنان خدمات یک فناوری اساسی در بستر وب آینده هستند. آنها اسکریپت هایی هستند که مرورگر در پس زمینه و جدا از یک صفحه وب اجرا می کند. این اسکریپت‌ها به شما امکان می‌دهند به ویژگی‌هایی دسترسی داشته باشید که نیازی به صفحه وب یا تعامل کاربر ندارند، مانند اعلان‌های فشار، همگام‌سازی پس‌زمینه، و تجربیات آفلاین.

راهنماهای مرتبط:

• معرفی کارکنان خدماتی
• اعلان‌های فشاری: به موقع، مرتبط و دقیق

برگه Service Workers در پنل Application محل اصلی در DevTools برای بازرسی و اشکال زدایی کارگران سرویس است.

• اگر یک سرویس‌کار در صفحه باز شده فعلی نصب شده باشد، آن را در این برگه مشاهده خواهید کرد. به عنوان مثال، در تصویر بالا یک سرویس دهنده برای حوزه https://airhorner.com/ نصب شده است.
• این چک باکس آفلاین DevTools را در حالت آفلاین قرار می دهد. این معادل حالت آفلاین است که از پنل شبکه یا گزینه Go offline در منوی فرمان در دسترس است.
• این چک باکس به‌روزرسانی در بارگذاری مجدد، سرویس‌کار را مجبور می‌کند در هر بارگذاری صفحه به‌روزرسانی شود.
• این کادر بررسی Bypass برای شبکه، سرویس‌کار را دور می‌زند و مرورگر را مجبور می‌کند تا برای منابع درخواستی به شبکه برود.
• پیوند درخواست‌های شبکه شما را به پانل شبکه با فهرستی از درخواست‌های رهگیری شده مربوط به سرویس‌گر ( is:service-worker-intercepted ) می‌برد.
• پیوند Update یک به‌روزرسانی یک‌باره سرویس‌کار مشخص شده را انجام می‌دهد.
• دکمه Push یک اعلان فشاری را بدون محموله تقلید می کند (که به عنوان غلغلک نیز شناخته می شود).
• دکمه همگام سازی یک رویداد همگام سازی پس زمینه را شبیه سازی می کند.
• پیوند Unregister سرویس کار مشخص شده را لغو ثبت می کند. برای یافتن راهی برای لغو ثبت نام یک سرویس‌دهنده و پاک کردن فضای ذخیره‌سازی و حافظه‌های پنهان تنها با یک کلیک، «پاک کردن فضای ذخیره‌سازی» را بررسی کنید.
• خط Source به شما می گوید چه زمانی سرویس کار در حال اجرا نصب شده است. پیوند نام فایل منبع سرویس دهنده است. با کلیک بر روی پیوند شما را به منبع سرویس دهنده ارسال می کند.
• خط وضعیت وضعیت کارمند سرویس را به شما می گوید. عدد روی این خط ( #16 در تصویر) نشان می‌دهد که چند بار سرویس‌کار به‌روزرسانی شده است. اگر فعال کنید به‌روزرسانی هنگام بارگذاری مجدد، متوجه خواهید شد که تعداد در هر بارگذاری صفحه افزایش می‌یابد. در کنار وضعیت، پیوند شروع (اگر سرویس‌کار متوقف شده باشد) یا پیوند توقف (اگر سرویس‌کار در حال اجرا باشد) مشاهده خواهید کرد. کارگران سرویس طوری طراحی شده اند که در هر زمان توسط مرورگر متوقف و راه اندازی شوند. توقف صریح کارمند خدماتی خود با استفاده از پیوند توقف می تواند آن را شبیه سازی کند. متوقف کردن سرویس‌دهنده یک راه عالی برای آزمایش نحوه عملکرد کد شما هنگام شروع مجدد پشتیبان‌گیری از سرویس‌کار است. اغلب اشکالات ناشی از فرضیات معیوب در مورد وضعیت جهانی پایدار را آشکار می کند.
• خط Clients به شما می‌گوید که منشأ سرویس‌کار به آن است. دکمه فوکوس بیشتر زمانی مفید است که چندین سرویس دهنده ثبت نام کرده باشید. اگر روی دکمه فوکوس در کنار یک سرویس دهنده که در برگه دیگری در حال اجرا است کلیک کنید، Chrome روی آن برگه تمرکز می کند.

• جدول چرخه به‌روزرسانی، فعالیت‌های کارگر سرویس و زمان‌های سپری شده آن‌ها مانند نصب، انتظار و فعال‌سازی را به شما نشان می‌دهد. برای دیدن مهر زمانی دقیق هر فعالیت، روی آن کلیک کنید دکمه ها را گسترش دهید .

  

  برای اطلاعات بیشتر، به چرخه عمر کارگر خدمات مراجعه کنید.

اگر سرویس‌کار خطایی ایجاد کند، تب Service Workers یک علامت را نشان می‌دهد نماد خطا با تعداد خطاها در کنار خط منبع . پیوند با شماره شما را با تمام خطاهای ثبت شده به کنسول می برد.

برای مشاهده اطلاعات مربوط به همه کارکنان خدمات، روی مشاهده همه ثبت نام ها در پایین برگه Service Workers کلیک کنید. این پیوند به chrome://serviceworker-internals/?devtools می‌رود که در آنجا می‌توانید سرویس‌دهندگان خود را بیشتر اشکال‌زدایی کنید.

کش های کارگر خدماتی

برگه حافظه پنهان فهرستی فقط خواندنی از منابعی را ارائه می دهد که با استفاده از (سرویس کار) Cache API ذخیره شده اند.

توجه داشته باشید که اولین باری که کش را باز می‌کنید و منبعی به آن اضافه می‌کنید، ممکن است DevTools تغییر را تشخیص ندهد. صفحه را دوباره بارگیری کنید و باید کش را ببینید.

اگر دو یا چند کش باز دارید، آن‌ها را در زیر منوی کشویی ذخیره‌سازی حافظه پنهان خواهید دید.

استفاده از سهمیه

برخی از پاسخ‌ها در برگه حافظه پنهان ممکن است به‌عنوان « مدر » علامت‌گذاری شوند. این به پاسخی اشاره دارد که از منبع دیگری بازیابی می شود، مانند یک CDN یا API راه دور، زمانی که CORS فعال نیست.

برای جلوگیری از نشت اطلاعات بین دامنه‌ای، به اندازه یک پاسخ غیرشفاف که برای محاسبه محدودیت‌های سهمیه ذخیره‌سازی استفاده می‌شود (یعنی آیا استثنا QuotaExceeded وجود دارد یا خیر) و توسط navigator.storage API گزارش می‌شود، بالشتک قابل توجهی اضافه شده است.

جزئیات این padding از مرورگری به مرورگر دیگر متفاوت است، اما برای Google Chrome، این بدان معنی است که حداقل اندازه ای که هر پاسخ غیرشفاف ذخیره شده در حافظه پنهان به استفاده کلی از فضای ذخیره سازی کمک می کند، تقریباً 7 مگابایت است. هنگام تعیین تعداد پاسخ‌های غیر شفافی که می‌خواهید در حافظه پنهان ذخیره کنید، باید این را در نظر داشته باشید، زیرا به راحتی می‌توانید از محدودیت‌های فضای ذخیره‌سازی خیلی زودتر از آنچه که در غیر این صورت بر اساس اندازه واقعی منابع غیرشفاف انتظار دارید، فراتر بروید.

راهنماهای مرتبط:

• سرریز پشته: چه محدودیت هایی برای پاسخ های غیر شفاف اعمال می شود؟
• Workbox: درک سهمیه فضای ذخیره سازی

ذخیره سازی را پاک کنید

برگه Clear Storage یک ویژگی بسیار مفید در هنگام توسعه برنامه های وب پیشرفته است. این برگه به ​​شما امکان می دهد ثبت نام کارکنان خدمات را لغو کنید و با یک کلیک همه حافظه های پنهان و فضای ذخیره سازی را پاک کنید. برای کسب اطلاعات بیشتر بخش زیر را بررسی کنید.

راهنماهای مرتبط:

• پاک کردن فضای ذخیره سازی

سایر راهنماهای پنل برنامه

برای راهنمایی بیشتر در مورد سایر بخش‌های پانل برنامه ، راهنماهای زیر را بررسی کنید.

راهنماهای مرتبط:

• منابع صفحه را بررسی کنید
• فضای ذخیره‌سازی و حافظه‌های پنهان محلی را بازرسی و مدیریت کنید