From 48d4cdbe838568ee54291f9008078028dd08f335 Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Mon, 16 May 2022 13:43:24 -0700 Subject: [PATCH 1/4] docs(user-flows): add instructions for DevTools --- docs/user-flows.md | 73 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 68 insertions(+), 5 deletions(-) diff --git a/docs/user-flows.md b/docs/user-flows.md index af142c779011..e58ed16d7a3d 100644 --- a/docs/user-flows.md +++ b/docs/user-flows.md @@ -42,7 +42,24 @@ Instead of providing a URL to navigate to, you can provide a callback function. This callback function _must_ perform an action that will trigger a navigation. Any interactions completed before the callback promise resolves will be captured by the navigation. -#### Code +#### How to Use + +
+ +DevTools + + +1. Go to the page you want to test +2. Select "Navigation (Default)" as your mode +3. Click "Analyze page load". + +> Note: DevTools only generates a report for a standalone navigation, it cannot be combined with other steps in a user flow report. + +![Lighthouse DevTools panel in navigation mode](https://user-images.githubusercontent.com/6752989/168673207-1e901e72-3461-4bae-a581-e80963beea54.png) +
+ +
+Node API ```js import {writeFileSync} from 'fs'; @@ -69,6 +86,8 @@ async function main() { main(); ``` +
+
### Timespan @@ -90,7 +109,26 @@ Timespan reports analyze an arbitrary period of time, typically containing user - Measure layout shifts and JavaScript execution time on a series of interactions. - Discover performance opportunities to improve the experience for long-lived pages and SPAs. -#### Code +#### How to use + +
+ +DevTools + + +1. Go to the page you want to test +2. Select "Timespan" as your mode +3. Click "Start timespan" +4. Interact with the page +5. Click "End timespan" + +> Note: DevTools only generates a report for a standalone timespan, it cannot be combined with other steps in a user flow report. + +![Lighthouse DevTools panel in timespan mode](https://user-images.githubusercontent.com/6752989/168679184-b7eff86a-a141-414d-b76a-4da78a165aa8.png) +
+ +
+Node API ```js import {writeFileSync} from 'fs'; @@ -117,6 +155,8 @@ async function main() { main(); ``` +
+
### Snapshot @@ -136,7 +176,25 @@ Snapshot reports analyze the page in a particular state, typically after the use - Find accessibility issues in single page applications or complex forms. - Evaluate best practices of menus and UI elements hidden behind interaction. -#### Code +#### How to use + +
+ +DevTools + + +1. Go to the page you want to test +2. Interact with the page so it's in a state you want to test +3. Select "Snapshot" as your mode +4. Click "Analyze page state". + +> Note: DevTools only generates a report for a standalone snapshot, it cannot be combined with other steps in a user flow report. + +Screen Shot 2022-05-16 at 1 30 08 PM +
+ +
+Node API ```js import {writeFileSync} from 'fs'; @@ -159,6 +217,8 @@ async function main() { main(); ``` +
+
## Creating a Flow @@ -188,8 +248,7 @@ When mapping a user flow onto the Lighthouse modes, strive for each report to ha The below example codifies a user flow for an ecommerce site where the user navigates to the homepage, searches for a product, and clicks on the detail link. -![Lighthouse User Flows Diagram](https://user-images.githubusercontent.com/2301202/135164371-20cc5c8c-e876-467f-985c-f85683afa8ee.png) - +![Lighthouse User Flows Diagram](https://user-images.githubusercontent.com/6752989/168678568-69aaa82f-0459-4c2a-8f46-467d7f06d237.png) ### Code @@ -247,6 +306,10 @@ async function main() { main(); ``` +## DevTools Panel + +The Lighthouse DevTools panel can be used to get navigation, timespan and snapshot reports. Select the mode you want + ## Tips and Tricks - Keep timespan recordings _short_ and focused on a single interaction sequence or page transition. From c1b6cbb397e8fbdd2a81fc15ae663d3051a14687 Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Mon, 16 May 2022 13:44:10 -0700 Subject: [PATCH 2/4] heading --- docs/user-flows.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/user-flows.md b/docs/user-flows.md index e58ed16d7a3d..f5726a3a28bf 100644 --- a/docs/user-flows.md +++ b/docs/user-flows.md @@ -250,7 +250,7 @@ The below example codifies a user flow for an ecommerce site where the user navi ![Lighthouse User Flows Diagram](https://user-images.githubusercontent.com/6752989/168678568-69aaa82f-0459-4c2a-8f46-467d7f06d237.png) -### Code +### Complete user Flow Code ```js import {writeFileSync} from 'fs'; From 4897fdfa137f8df9b591887e3c63bffcb3d7fc21 Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Mon, 16 May 2022 13:45:41 -0700 Subject: [PATCH 3/4] period --- docs/user-flows.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/user-flows.md b/docs/user-flows.md index f5726a3a28bf..0afc4a7d73e3 100644 --- a/docs/user-flows.md +++ b/docs/user-flows.md @@ -51,7 +51,7 @@ DevTools 1. Go to the page you want to test 2. Select "Navigation (Default)" as your mode -3. Click "Analyze page load". +3. Click "Analyze page load" > Note: DevTools only generates a report for a standalone navigation, it cannot be combined with other steps in a user flow report. From ef9c8d23f5180fe0b98ba7e1fe6de7bee327ec82 Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Mon, 16 May 2022 13:51:09 -0700 Subject: [PATCH 4/4] npte --- docs/user-flows.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/user-flows.md b/docs/user-flows.md index 0afc4a7d73e3..7695638c4a56 100644 --- a/docs/user-flows.md +++ b/docs/user-flows.md @@ -306,10 +306,6 @@ async function main() { main(); ``` -## DevTools Panel - -The Lighthouse DevTools panel can be used to get navigation, timespan and snapshot reports. Select the mode you want - ## Tips and Tricks - Keep timespan recordings _short_ and focused on a single interaction sequence or page transition.