diff --git a/README.md b/README.md
index 8fe6b27..d7cbcc2 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,8 @@
> [!WARNING]
-> The Chrome team has been working hard to bring the best of the Web Vitals extension directly into the DevTools Performance panel. As of Chrome version 132, which became stable on January 7, 2025, we have finally ended support for the extension and encourage all users to switch to DevTools. Be aware that extension updates will stop and features may break without notice. [Learn more](https://developer.chrome.com/blog/web-vitals-extension)
+> The Chrome team has been working hard to bring the best of the Web Vitals extension directly into the DevTools Performance panel. As of Chrome version 132, which became stable on January 7, 2025, we have finally ended support for the extension and encourage all users to [switch to DevTools](#devtools). Be aware that extension updates will stop and features may break without notice. [Learn more](https://developer.chrome.com/blog/web-vitals-extension)
# Web Vitals Chrome Extension
*A Chrome extension to measure metrics for a healthy site*
-[Install now](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)
@@ -19,20 +18,98 @@ It also supports the diagnostic metrics:
* [Time to First Byte](https://web.dev/articles/ttfb)
* [First Contentful Paint](https://web.dev/articles/fcp)
-Installation Instructions
+
-The Web Vitals Chrome Extenstion can be installed from the [Chrome Web Store](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma).
+Now that the Web Vitals extension has reached "end of life" stage, the Chrome team has stopped maintaining it. All users are strongly encouraged to start using the comparable functionality built into the DevTools Performance panel instead.
-If you are looking for a more bleeding-edge build, you can also install the version of the extension from master.
+The Performance panel is a much more powerful debugging tool than the extension alone. That said, there may be some functional or ergonomic features of the extensions still missing from DevTools. If there's a critical feature of the extension blocking your migration to DevTools, please +1 the relevant feature request in the [hotlist](https://goo.gle/devtools-live-cwv-hotlist) or [file a new issue](https://issues.chromium.org/issues/new?component=1457310&template=1946799&type=feature_request&priority=P2&pli=1&title=Live%20Metrics) to help get it prioritized.
-Install from master
+
+
+Refer to the [official DevTools Performance panel documentation](https://developer.chrome.com/docs/devtools/performance/overview) for information about using each feature. As of Chrome 132 in January 2025, here is a quick summary of the extension features supported by DevTools:
+
+#### Live metrics
+
+When you open the Performance panel, the view defaults to showing a live look at your local Core Web Vitals metrics.
+
+
+
+#### Field data
+
+Use the "Field data" configuration flow to show field data from CrUX next to your local metrics. URL and origin-level data is available for both desktop and mobile.
+
+
+
+#### LCP element attribution
+
+You can find a reference to the element responsible for the LCP metric at the bottom of the LCP section.
+
+
+
+#### LCP phases
+
+Hover over the LCP metric values to display a card with more information about your local and field LCP performance, including a breakdown of your local LCP phases: TTFB, load delay, load duration, and render delay.
+
+
+
+#### Interaction log
+
+Every interaction that get counted towards the INP metric will be added to the interaction log at the bottom of the panel.
+
+
+
+#### Interaction phases
+
+Phases for each interaction (including the one responsible for INP) are available by expanding the entry in the interaction log. Supports input delay, processing duration, and presentation delay.
+
+
+
+#### LoAF attribution
+
+From the expanded interaction log, the "Local duration (ms)" heading will be clickable if there is LoAF attribution data available. Clicking it will log the data to the Console panel.
+
+
+
+#### Layout shift log
+
+Adjacent to the interaction log is the layout shift log, which groups coincidental layout shifts into clusters and assigns a score to the cluster. The worst cluster corresponding to the page's CLS score is linked from the CLS section.
+
+
+
+#### TTFB
+
+TTFB is available as a phase of LCP on the live metrics view as well as the trace view under the "LCP by phase" insight.
+
+
+
+#### FCP
+
+FCP is shown as a marker in the trace view.
+
+
+
+⚠️ Self-maintenance instructions
+
+If you're unable to migrate your workflow to DevTools for any reason, please let us know by following the instructions in the previous section to file an issue. Until your issue gets resolved, you may prefer to continue using the extension using a local copy.
+
+To get started, follow the instructions below to [install the extension from source](#install-master).
+
+To continue using field data powered by the CrUX API, you'll need to provision a new API key tied to a personal Google Cloud project. You can acquire a new key by visiting the [CrUX API docs](https://developer.chrome.com/docs/crux/api#APIKey). It doesn't cost anything to use the API, but rate limiting restrictions will apply.
+
+To stay up to date with the [web-vitals.js library](https://github.com/GoogleChrome/web-vitals), periodically run the following command:
+
+```sh
+npm update web-vitals --save
+```
+
+Install from main
**Google Chrome**
-1. Download this repo as a [ZIP file from GitHub](https://github.com/googlechrome/web-vitals-extension/archive/master.zip).
-1. Unzip the file and you should have a folder named `web-vitals-extension-master`.
+1. Download this repo as a [ZIP file from GitHub](https://github.com/googlechrome/web-vitals-extension/archive/main.zip).
+1. Unzip the file and you should have a folder named `web-vitals-extension-main`.
1. In Chrome go to the extensions page (`chrome://extensions`).
1. Enable Developer Mode.
-1. Drag the `web-vitals-extension-master` folder anywhere on the page to import it (do not delete the folder afterwards).
+1. Drag the `web-vitals-extension-main` folder anywhere on the page to import it (do not delete the folder afterwards).
## Usage
diff --git a/media/devtools-fcp.png b/media/devtools-fcp.png
new file mode 100644
index 0000000..0d792b8
Binary files /dev/null and b/media/devtools-fcp.png differ
diff --git a/media/devtools-field-data.png b/media/devtools-field-data.png
new file mode 100644
index 0000000..9ab2333
Binary files /dev/null and b/media/devtools-field-data.png differ
diff --git a/media/devtools-interaction-log.png b/media/devtools-interaction-log.png
new file mode 100644
index 0000000..8aadd8c
Binary files /dev/null and b/media/devtools-interaction-log.png differ
diff --git a/media/devtools-interaction-phases.png b/media/devtools-interaction-phases.png
new file mode 100644
index 0000000..8fb9da8
Binary files /dev/null and b/media/devtools-interaction-phases.png differ
diff --git a/media/devtools-layout-shift-log.png b/media/devtools-layout-shift-log.png
new file mode 100644
index 0000000..4e869b2
Binary files /dev/null and b/media/devtools-layout-shift-log.png differ
diff --git a/media/devtools-lcp-attribution.png b/media/devtools-lcp-attribution.png
new file mode 100644
index 0000000..9dc9eb0
Binary files /dev/null and b/media/devtools-lcp-attribution.png differ
diff --git a/media/devtools-lcp-phases.png b/media/devtools-lcp-phases.png
new file mode 100644
index 0000000..572e384
Binary files /dev/null and b/media/devtools-lcp-phases.png differ
diff --git a/media/devtools-live-metrics.png b/media/devtools-live-metrics.png
new file mode 100644
index 0000000..5f9042b
Binary files /dev/null and b/media/devtools-live-metrics.png differ
diff --git a/media/devtools-loaf-attribution.png b/media/devtools-loaf-attribution.png
new file mode 100644
index 0000000..f6d7f0c
Binary files /dev/null and b/media/devtools-loaf-attribution.png differ
diff --git a/media/devtools-panel.png b/media/devtools-panel.png
new file mode 100644
index 0000000..fff0918
Binary files /dev/null and b/media/devtools-panel.png differ
diff --git a/media/devtools-ttfb.png b/media/devtools-ttfb.png
new file mode 100644
index 0000000..2ba6e44
Binary files /dev/null and b/media/devtools-ttfb.png differ
diff --git a/package-lock.json b/package-lock.json
index c61f3b3..9873287 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "web-vitals-extension",
- "version": "1.5.1",
+ "version": "1.6.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "web-vitals-extension",
- "version": "1.5.1",
+ "version": "1.6.0",
"license": "Apache-2.0",
"dependencies": {
"web-vitals": "^4.2.3"
@@ -1685,8 +1685,7 @@
"node_modules/web-vitals": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.3.tgz",
- "integrity": "sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q==",
- "license": "Apache-2.0"
+ "integrity": "sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q=="
},
"node_modules/which": {
"version": "1.3.1",