PWA（Progressive Web App）应用的出现，让用户可以在手机网页上享受到与原生应用相似的体验。现在，越来越多的网页应用在向PWA进行转换，为了保证 PWA 应用的正常运行，前端开发者需要在调试 PWA 应用时采用一些技巧。
本文将介绍一些 PWA 应用调试技巧，这些技巧从广义上讲适用于所有的网页应用。我们将首先介绍如何寻找和解决各种常见的技术问题，然后介绍一些工具和技术，它们对于调试 PWA 应用非常有用。
Debugging Tips
打印日志
在编写代码时，我们常常需要使用console.log()语句来调整代码。这个方法同样适用于PWA应用。打印日志是理解代码中发生的事情以及调试代码的好方法。
虽然这是一个基本的调试技巧，但是在调试PWA应用时被证明非常有用。当打印调试信息时，尽量提供足够的上下文信息，这样你会更容易识别问题的根本原因。
使用DevTools
使用DevTools可以快速识别和解决问题。通过打开DevTools，我们可以查找JavaScript错误、网络请求和调试JavaScript代码。
打开DevTools的方法因浏览器而异，但通常是通过选择浏览器菜单>工具>开发人员工具或使用键盘快捷键进行操作。我们可以通过在DevTools控制台中执行JavaScript代码来调试代码。
更新Service Worker
如果您的PWA应用程序不像您期望的那样工作，那么您的Service Worker可能需要更新。使用Chrome DevTools可以强制更新Service Worker。
在Chrome DevTools中，选择“应用程序”选项卡，然后展开带有版本详细信息的服务工作者列表。在更新位置，单击“更新”按钮。
更新Service Worker可能解决您的问题，但是如果您有其他问题，则可能需要使用其他调试技巧。
使用Lighthouse
Google的Lighthouse是一个免费工具，用于帮助您了解有关您的PWA应用程序的性能，辅助用户可访问性，可靠度和最佳实践的情况。
使用Lighthouse可以极大地提高您在调试PWA应用程序时的效率。它快速检测PWA应用程序中的问题，并提供详细的解决方案，以解决这些问题。
工具和技术
React Developer Tools
React Developer Tools是一种浏览器插件工具，它帮助您更方便地调试React应用程序。它不仅可以查看组件树、调查元素属性，还可以审查state和props。
在开发时，React Developer Tools可以节省大量时间，特别是当您正在调试一些棘手的问题时。
Redux DevTools
Redux DevTools是另一个有用的浏览器插件。与React Developer Tools一样，它可以快速查找Redux行为。Redux DevTools提供记录每个操作的简洁历史记录，以及回放和过滤行为的功能。
使用Redux DevTools可以追踪状态和操作，确保应用程序的单向数据流。如果您的PWA应用使用Redux管理状态，则Redux DevTools是一个必备的工具。
Chrome 开发人员工具
Chrome DevTools是一个强大的Web开发工具，可以在调试PWA应用时使用。
使用Chrome DevTools，您可以查看XHR和WebSocket请求，使用Network和Timeline选项卡进行性能分析，甚至可以使用Profiles选项卡查找代码问题。此外，Chrome DevTools还支持编辑网络操作，控制JavaScript执行速度，并使用分析器进行分析。
Service Worker Toolbox
Service Worker Toolbox是一个开源库，帮助应用程序管理Service Worker的缓存。
Service Worker Toolbox提供了完整的缓存方案，并为您的应用程序开发中的Service Worker提供了addEventListeners()。这个库拥有一系列小型库来处理插入、更新、匹配缓存并使用各种插件来完成常见任务，例如全页面缓存、缓存合并和资源优先级。
Service Worker Toolbox使缓存变得容易，只需为您的PWA应用程序添加Service Worker，然后使用此库进行管理即可。
结论
我们介绍了一些常见的调试技巧和工具，这些技巧和工具可以帮助您在调试PWA应用程序时更加成功。 您可以使用这些技巧，或使用它们提供的信息来指导您的调试过程。 祝您好运！
-- ------- ------ ----
----- --------- - -----
----- ----------- - -
-------------
-------------
-----------------
-------------
--
-------------------------------- - -- -
--------------- ------------
------------
------
----------------
----------- -- -
--------------- ----------
--------------------------
--
-------- -- -
-------------------
--
--
---
--------------------------------- - -- -
--------------- ------------
------------
---------------------------- -- -
------ ------------
---------------------- -- -
-- --------- --- ---------- -
--------------- -------- --------
------ ------------------------
-
--
--
--
--
---
------------------------------ - -- -
--------------- --------
--------------------------------------- -- --------------------------
---来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66ff6c01fa7ecd5fc317070a