web应用调试工具

Interested in learning JavaScript? Get my ebook at jshandbook.com

有兴趣学习JavaScript吗？ 在jshandbook.com上获取我的电子书

This tutorial explains what tools the Chrome and Firefox Dev Tools display that help you debug a Progressive Web App.

本教程介绍了Chrome和Firefox开发工具显示的哪些工具，这些工具可帮助您调试Progressive Web App。

There’s a lot to learn about this topic and the new browser APIs. I publish a lot of related content on my blog about frontend development, don’t miss it! ?

关于此主题和新的浏览器API，有很多知识要学习。 我在我的博客上发布了许多有关前端开发的相关内容，请不要错过！ ？

什么是渐进式Web应用程序？ (What is a Progressive Web App?)

First things first. A Progressive Web App (PWA) is an app that can provide extra features based on the device support, such as:

首先是第一件事。 渐进式Web应用程序 (PWA)是一种可以基于设备支持提供额外功能的应用程序，例如：

• The ability to work offline离线工作能力
• Push notifications推送通知
• An almost native app look and speed几乎原生的应用外观和速度
• Local caching of resources本地资源缓存

But it still works fine as a normal website on devices that do not support the latest tech.

但是，在不支持最新技术的设备上，它仍可以作为普通网站正常运行。

Chrome开发者工具简要概述 (A brief Chrome Developer Tools overview)

Let’s start with Chrome. Once you open the DevTools, you see several panels. You might be familiar with many of those panels, like Console, Elements or Network. You use these daily when building web sites or web applications.

让我们从Chrome开始。 打开DevTools后 ，您将看到几个面板。 您可能熟悉其中的许多面板，例如控制台，元素或网络。 在构建网站或Web应用程序时，您每天都会使用它们。

The Application panel is recent, but contains some familiar tools. In summer 2016, the Resources tab was renamed “Application.” This grouped all the features together that usually distinguish web applications from web pages. We’ll examine it in detail soon.

“ 应用程序”面板是最新的，但是包含一些熟悉的工具。 2016年夏季，“资源”选项卡重命名为“应用程序”。 这将通常将Web应用程序与Web页面区分开的所有功能归为一组。 我们将尽快对其进行详细研究。

一个真实的例子 (A real world example)

This tutorial walks through an exploration of the Progressive Web App available at https://events.google.com/io2016/. You can open Chrome and do the exact same steps detailed here, without having to setup anything locally.

本教程分步浏览了渐进式Web应用程序， 网址为https://events.google.com/io2016/ 。 您可以打开Chrome并执行此处详细介绍的相同步骤，而无需在本地进行任何设置。

模拟设备 (Simulate a device)

Let’s first enable the Chrome DevTools Device Mode. This gives you the option to emulate a device in your browser. We choose an Android device, because currently PWAs only show their full potential on Android. Safari beginning work on supporting Service Workers seems a step in the right direction for iOS and Safari Desktop support.

首先，启用Chrome DevTools 设备模式 。 这使您可以选择在浏览器中模拟设备。 我们选择Android设备，因为当前PWA仅在Android上显示其全部潜力。 Safari开始支持Service Workers的工作似乎朝着iOS和Safari Desktop支持的正确方向迈出了一步。

“应用程序”面板的详细信息 (The Application panel in details)

The Application Panel groups many elements which are key to Progressive Web Apps.

“应用程序面板”对许多元素进行了分组，这些元素是渐进式Web应用程序的关键。

表现 (Manifest)

The manifest unlocks the ability to offer users the Add to home screen option. It provides a series of details about how the app should behave once installed on the device. If there’s anything wrong with how you defined the manifest, it will report the issue.

清单可解锁向用户提供“ 添加到主屏幕”选项的功能。 它提供了有关该应用程序在设备上安装后的行为的一系列详细信息。 如果您定义清单的方式有任何问题，它将报告该问题。

There you see the name of the App, a short name for the home screen, icons preview, and some details about the presentation:

在这里，您可以看到应用程序的名称，主屏幕的缩写，图标预览以及有关演示的一些详细信息：

• Start URL: the URL that the device will load when the user launches the web app from the home screen. You can add a campaign identifier to segment the PWA accesses in the analytics.

  起始URL ：用户从主屏幕启动Web应用程序时设备将加载的URL。 您可以添加广告系列标识符以在分析中细分PWA访问。

• Theme color: indicates a theme for your site. Chrome uses it to color some browser UI elements, such as the address bar. This can be customized per-page using the meta tag <meta name="theme-color">, but specifying it in the manifest provides a site-wide theme color when the app is launched from the home screen.

  主题颜色 ：表示您网站的主题。 Chrome使用它为某些浏览器用户界面元素(例如地址栏)上色。 可以使用元标记<meta name="theme-colo r”>每页自定义该<meta name="theme-colo ，但是当从主屏幕启动该应用程序时，在清单中指定它可以提供整个站点的主题颜色。

• Background color: specifying the background color of your web app in the manifest allows the browser to show this color in the loading screen before the CSS is even available. This produces a nicer experience for the user. As soon as the CSS is available, this value is overwritten by the actual web app styling.

  背景颜色 ：在清单中指定Web应用程序的背景颜色，使浏览器甚至可以在CSS可用之前在加载屏幕上显示该颜色。 这为用户带来了更好的体验。 CSS可用后，此值将被实际的Web应用程序样式覆盖。

• Orientation: specifies the default orientation, and can be any value in any , natural , landscape , portrait and other options detailed in the Screen Orientation API Working Draft.

  方向 ：指定默认方向，并且可以是Screen Orientation API Working Draft中详细说明的any ， natural ， landscape ， portrait和其他选项中的任何值。

• Display: defines how the app is presented. Valid values are fullscreen which open the app in the entire display size. standalone shows the device standard status bar and the system back button. minimal-ui provides the user at least the back, forward, and reload buttons. And browser shows the normal browser UI which includes the address bar.

  显示 ：定义如何显示应用程序。 有效值为fullscreen显示，可在整个显示尺寸下打开应用程序。 standalone显示设备标准状态栏和系统后退按钮。 minimal-ui为用户提供至少后退，前进和重新加载按钮。 browser显示正常的浏览器UI，其中包括地址栏。

At the top of the Manifest tab, clicking the manifest.json link brings us to the Sources panel, with the full source of the manifest.

在“清单”选项卡的顶部，单击manifest.json链接会将我们带到“ manifest.json ” 面板 ，其中包含清单的完整来源。

The Manifest allows you to define many other fields. I suggest looking at the Web App Manifest Working Draft directly to know more.

清单允许您定义许多其他字段。 我建议直接查看Web App Manifest工作草案以了解更多信息。

The last thing on this screen, which is quite important, is the Add to home screen link. On the Chrome Desktop, it triggers the browser to add the app to the shelf. On mobile, it prompts to install the app (add the icon to the home screen):

该屏幕上最重要的最后一件事是“ 添加到主屏幕”链接。 在Chrome桌面上，它会触发浏览器将应用添加到架子。 在移动设备上，它提示安装应用程序(将图标添加到主屏幕)：

服务人员 (Service Workers)

Next up in the list there’s the Service Workers tab. Service Workers are the technology that enables a PWA to work offline. They allow you to intercept network requests and to use the Cache API to store resources locally.

列表的下一个是“服务人员”选项卡。 服务工作者是使PWA脱机工作的技术。 它们允许您拦截网络请求并使用Cache API在本地存储资源。

From this screen you can force offline mode in the tab by enabling the Offline checkbox:

在此屏幕上，您可以通过启用离线复选框来在选项卡中强制离线模式 ：

Offline can also be forced in the Device Mode screen, in addition to network throttling.

除了网络限制外，还可以在设备模式屏幕中强制脱机。

Update on reload is very useful when debugging. Service Workers are installed on the device when they are first loaded. They are not updated until the Service Worker code changes, so they are not like regular resources.

调试时，重载更新非常有用。 已安装服务人员 首次加载时在设备上显示。 在Service Worker代码更改之前，它们不会更新，因此它们与常规资源不同。

But even if you update the service worker, it won’t be used by the web page until the old service worker can be removed — that is, until the user closes all the tabs that point to the web app. This checkbox forces the update.

但 即使您更新了service worker，在删除旧的service worker之前，即直到用户关闭指向Web应用程序的所有选项卡之前，网页都不会使用它。 此复选框强制更新。

Bypass for network allows you to completely turn off the caching enabled by the Service Worker. This prevents the app from using cached resources when you want a direct access from the network. Again, very useful when debugging.

网络绕过允许您完全关闭Service Worker启用的缓存。 当您想直接从网络访问时，这可以防止应用程序使用缓存的资源。 同样，在调试时非常有用。

Show all is an option that enables quick access to all the Service Workers installed on the device.

全部显示是一个选项，可用于快速访问设备上安装的所有 Service Worker。

Each Service Worker is listed with a status indicator which you can stop and restart. By clicking the filename, you can inspect the source and hook into it using the built-in JavaScript debugger:

列出了每个Service Worker的状态指示器，您可以停止并重新启动它。 通过单击文件名，您可以检查源代码并使用内置JavaScript调试器将其挂钩：

The thing you’ll likely use the most is the Service Worker Lifecycle Events simulation. You can force the following events:

您最可能使用的东西是服务人员生命周期事件模拟。 您可以强制执行以下事件：

• Update will force an update of the Service Worker

  更新将强制更新服务人员

• Push emulates a push event

  推模拟推事件

• Sync emulates a background sync event, which allows the user to perform actions offline and communicate them to the server once online

  同步模拟后台同步事件，该事件使用户可以脱机执行操作，并在联机后将其传达给服务器

• Unregister unregisters the Service Worker, so you can start with a clean state

  取消注册将注销Service Worker，以便您可以从干净状态开始

清除存储 (Clear storage)

The Clear storage tab shows you the total storage size used by your web app, how much storage you have left, and allows you to cherry-pick which storage to clear.

“清除存储空间”选项卡显示您的Web应用程序使用的总存储空间大小，剩余的存储空间，并允许您选择要清除的存储空间。

存储 (Storage)

The Storage tab contains tools to interact with the usual storage options like Local/Session Storage, IndexedDB and Cookies. It is not unique to Service Workers, so I won’t get into the details of it here.

“存储”选项卡包含用于与通常交互的工具 存储选项，例如本地/会话存储 ， IndexedDB和Cookies 。 它不是Service Worker所独有的，因此在此不再详细介绍。

快取 (Cache)

Ignoring the Application Cache tab — which is a deprecated tech — the Cache Storage tab is key to Service Workers. It shows the content of resources stored using the Cache API, part of the Service Workers spec. It’s not limited to use by Service Workers.

忽略“应用程序缓存”选项卡(这是一项已过时的技术)，“ 缓存存储”选项卡是Service Workers的关键。 它显示了服务工作者规范中使用Cache API存储的资源的内容。 它不限于由Service Workers使用。

The Google Chrome Cache Storage Demo is a good way to see what happens when you add an item to the cache.

Google Chrome缓存存储演示是查看将项目添加到缓存时会发生什么情况的好方法。

At first, the cache is not used at all:

最初，根本不使用缓存：

Pressing the Create WNDT62 cache button triggers the creation of the cache:

按创建WNDT62缓存 按钮触发缓存的创建：

Then Create RESOURCE_A in WNDT62 adds an item into the cache:

然后在WNDT62中创建RESOURCE_A将一个项目添加到缓存中：

Pressing Update RESOURCE_A increments the body value, which we can inspect using:

按更新RESOURCE_A 增加主体值，我们可以使用以下方法检查该值：

caches.open('WNDT62').then(function(cache) {  return cache.match('RESOURCE_A').then((res) => {    res.text().then(body => console.log(body));  })})

Every time you press Update RESOURCE_A, the value returned is incremented.

每次按Update RESOURCE_A，返回的值都会递增。

Pressing Delete WNDT62 removes the cache, frees the space that was taken by the resources, and restores the initial state of the app.

按下Delete WNDT62 删除缓存，释放资源占用的空间，并恢复应用程序的初始状态。

When loading resources cached by Service Workers using the Cache API, the Network Panel of the DevTools shows it as coming from Service Workers:

当使用Cache API加载由Service Workers缓存的资源时，DevTools的网络面板将其显示为来自Service Workers：

Firefox呢？ (What about Firefox?)

Firefox has great support for Progressive Web Apps as well as Service Workers. But its developer tools do not display them as prominently as the Chrome dev tools do. Still, they are there, under the Tools |> Web Developer |> Service Workers menu.

Firefox对渐进式Web应用程序以及服务工作者提供了强大的支持。 但是它的开发人员工具并没有像Chrome开发人员工具那样突出显示它们。 它们仍然在那里，在“ Tools |> Web Developer |> Service W工作者”菜单下。

From here you can unregister any Service Worker, and open the worker code in the debugger for any kind of worker (Web Workers as well). You can also trigger a Push API push event to debug Push events.

在这里，您可以注销任何Service Worker，然后在调试器中为任何类型的工作程序(以及Web Workers)打开工作程序代码。 您还可以触发Push API push事件来调试Push事件。

You cannot simulate events or force updating or bypassing Service Workers like in Chrome. I hope this will be possible in Firefox soon for an easier testing experience.

您无法像在Chrome中那样模拟事件或强制更新或绕过Service Worker。 我希望这将很快在Firefox中实现，以提供更轻松的测试体验。

Like in Chrome, when a resource is cached by Service Workers in the Network panel of the Developer Tools using the Cache API, it lists service worker under the Transferred column:

就像在Chrome中一样，当服务工作者使用“ 缓存API ”在开发人员工具的“网络”面板中缓存资源时，该资源会在“已转移”列下列出service worker ：

结语 (Wrapping up)

Progressive Web Apps are one of the turning points for making the Web better on Mobile and providing users with a good experience outside native apps.

渐进式Web应用程序是使移动设备上的Web更好并为用户提供本机应用程序之外的良好体验的转折点之一。

Browsers, especially Chrome, provide good tooling around them.

浏览器，尤其是Chrome，提供了围绕它们的良好工具。

Google also provides Lighthouse as part of its browser tooling, which can be installed separately in the Chrome DevTools. It provides automatic checks to ensure that your web app is optimally built, and includes support for Service Workers. An incredibly useful tool, don’t miss it.

Google还提供Lighthouse作为其浏览器工具的一部分，可以单独安装在Chrome DevTools中。 它提供自动检查以确保您的Web应用程序以最佳方式构建，并包括对Service Workers的支持。 一个非常有用的工具，请不要错过它。

If you’ve enjoyed this article, please give me some claps so more people see it. Thanks!

如果您喜欢这篇文章，请给我一些鼓掌，以便更多的人看到它。 谢谢！

Interested in learning JavaScript? Get my ebook at jshandbook.com

有兴趣学习JavaScript吗？ 在jshandbook.com上获取我的电子书

翻译自: https://www.freecodecamp.org/news/how-to-debug-progressive-web-apps-using-browser-developer-tools-bad1cd3db784/

web应用调试工具