---
# System prepended metadata

title: <center>Chrome DevTools</center>

---

# <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.
