# <center>Chrome DevTools</center> <center>Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.</center> --- ## [Reference](https://developers.google.com/web/tools/chrome-devtools/) --- ## Open DevTools On windows : `control+shit+i` On mac : `command+option+i` --- ## Progressive Web App + Use the Manifest pane to inspect your web app manifest and trigger Add to Homescreen events. + Use the Service Workers pane for a whole range of service-worker-related tasks, like unregistering or updating a service, emulating push events, going offline, or stopping a service worker. + View your service worker cache from the Cache Storage pane. + Unregister a service worker and clear all storage and caches with a single button click from the Clear storage pane. ### Web App Manifest If you want your users to be able to add your app to their mobile homescreens, you need a web app manifest. The manifest defines how the app appears on the homescreen, where to direct the user when launching from homescreen, and what the app looks like on launch. ### Service Workers Service workers are a fundamental technology in the future web platform. They are scripts that the browser runs in the background, separate from a web page. These scripts enable you to access features that don't need a web page or user interaction, like push notifications, background sync, and offline experiences. ### Service Workers Chaches The Cache Storage pane provides a read-only list of resources that have been cached using the (service worker) Cache API.