Add documentation for the k6 DevTools Recorder

docs/sources/next/using-k6/test-authoring/create-tests-from-recordings/_index.md

@@ -12,9 +12,10 @@ You can use this recording to auto-generate your test logic.
 Testers commonly use recordings to avoid writing complex tests from scratch.
 For example, testing advanced scenarios on websites or mobile applications, such as end-to-end (E2E) tests with dozens or hundreds of requests.
 
-k6 provides two tools that can directly convert a recording into k6 script:
+k6 provides three tools that can directly convert a recording into k6 script:
 
 - [Browser recorder](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-browser-recorder) generates a k6 script from a browser session.
+- [DevTools recorder](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder) generates a k6 Browser script from user flows recorded in Chrome DevTools.
 - [HAR converter](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-har-converter) generates a k6 script from the requests included in a HAR file.
 
 ## Steps

docs/sources/next/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder.md

@@ -0,0 +1,29 @@
+---
+title: 'Using the DevTools recorder'
+description: 'The DevTools recorder allows exporting k6 browser scripts from the recorder panel in Chrome DevTools.'
+weight: 01
+---
+
+The DevTools recorder lets you record user journeys using Chrome DevTools and then export them as a k6 script.
+
+## Before you start
+
+Before you start, consider the following:
+
+- [Be sure to record realistically](/test-authoring/create-tests-from-recordings/#be-sure-to-record-realistically)
+- [A hybrid approach for load testing websites](/test-authoring/create-tests-from-recordings/#consider-hybrid-approach-for-load-testing-websites)
+
+{{< admonition type="note" >}}
+
+Note that the DevTools recorder **does not require a cloud account**.
+
+{{< /admonition >}}
+
+## How to record
+
+1. Install the [Chrome](https://chrome.google.com/webstore/detail/grafana-k6-browser-record/fbanjfonbcedhifbgikmjelkkckhhidl) extension.
+1. Record a session using the [Chrome DevTools Recorder](https://developer.chrome.com/docs/devtools/recorder).
+1. Choose k6 Browser when [exporting the user flow](https://developer.chrome.com/docs/devtools/recorder/reference#export-flows).
+1. Edit your script as necessary. Depending on the [type of test](https://grafana.com/docs/k6/<K6_VERSION>/testing-guides/test-types/), you might need to change different aspects of the script.
+   Typical changes are for [load options](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/k6-options) and to handle [correlation and dynamic data](https://grafana.com/docs/k6/<K6_VERSION>/examples/correlation-and-dynamic-data).
+1. Run the test from the CLI or Grafana Cloud k6. For more about running k6, refer to the [Running k6 guide](https://grafana.com/docs/k6/<K6_VERSION>/get-started/running-k6).

docs/sources/v0.51.x/using-k6/test-authoring/create-tests-from-recordings/_index.md

@@ -12,9 +12,10 @@ You can use this recording to auto-generate your test logic.
 Testers commonly use recordings to avoid writing complex tests from scratch.
 For example, testing advanced scenarios on websites or mobile applications, such as end-to-end (E2E) tests with dozens or hundreds of requests.
 
-k6 provides two tools that can directly convert a recording into k6 script:
+k6 provides three tools that can directly convert a recording into k6 script:
 
 - [Browser recorder](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-browser-recorder) generates a k6 script from a browser session.
+- [DevTools recorder](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder) generates a k6 Browser script from user flows recorded in Chrome DevTools.
 - [HAR converter](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-har-converter) generates a k6 script from the requests included in a HAR file.
 
 ## Steps

docs/sources/v0.51.x/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder.md

@@ -0,0 +1,29 @@
+---
+title: 'Using the DevTools recorder'
+description: 'The DevTools recorder allows exporting k6 browser scripts from the recorder panel in Chrome DevTools.'
+weight: 01
+---
+
+The DevTools recorder lets you record user journeys using Chrome DevTools and then export them as a k6 script.
+
+## Before you start
+
+Before you start, consider the following:
+
+- [Be sure to record realistically](/test-authoring/create-tests-from-recordings/#be-sure-to-record-realistically)
+- [A hybrid approach for load testing websites](/test-authoring/create-tests-from-recordings/#consider-hybrid-approach-for-load-testing-websites)
+
+{{< admonition type="note" >}}
+
+Note that the DevTools recorder **does not require a cloud account**.
+
+{{< /admonition >}}
+
+## How to record
+
+1. Install the [Chrome](https://chrome.google.com/webstore/detail/grafana-k6-browser-record/fbanjfonbcedhifbgikmjelkkckhhidl) extension.
+1. Record a session using the [Chrome DevTools Recorder](https://developer.chrome.com/docs/devtools/recorder).
+1. Choose k6 Browser when [exporting the user flow](https://developer.chrome.com/docs/devtools/recorder/reference#export-flows).
+1. Edit your script as necessary. Depending on the [type of test](https://grafana.com/docs/k6/<K6_VERSION>/testing-guides/test-types/), you might need to change different aspects of the script.
+   Typical changes are for [load options](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/k6-options) and to handle [correlation and dynamic data](https://grafana.com/docs/k6/<K6_VERSION>/examples/correlation-and-dynamic-data).
+1. Run the test from the CLI or Grafana Cloud k6. For more about running k6, refer to the [Running k6 guide](https://grafana.com/docs/k6/<K6_VERSION>/get-started/running-k6).

docs/sources/v0.52.x/using-k6/test-authoring/create-tests-from-recordings/_index.md

@@ -12,9 +12,10 @@ You can use this recording to auto-generate your test logic.
 Testers commonly use recordings to avoid writing complex tests from scratch.
 For example, testing advanced scenarios on websites or mobile applications, such as end-to-end (E2E) tests with dozens or hundreds of requests.
 
-k6 provides two tools that can directly convert a recording into k6 script:
+k6 provides three tools that can directly convert a recording into k6 script:
 
 - [Browser recorder](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-browser-recorder) generates a k6 script from a browser session.
+- [DevTools recorder](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder) generates a k6 Browser script from user flows recorded in Chrome DevTools.
 - [HAR converter](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-har-converter) generates a k6 script from the requests included in a HAR file.
 
 ## Steps

docs/sources/v0.52.x/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder.md

@@ -0,0 +1,29 @@
+---
+title: 'Using the DevTools recorder'
+description: 'The DevTools recorder allows exporting k6 browser scripts from the recorder panel in Chrome DevTools.'
+weight: 01
+---
+
+The DevTools recorder lets you record user journeys using Chrome DevTools and then export them as a k6 script.
+
+## Before you start
+
+Before you start, consider the following:
+
+- [Be sure to record realistically](/test-authoring/create-tests-from-recordings/#be-sure-to-record-realistically)
+- [A hybrid approach for load testing websites](/test-authoring/create-tests-from-recordings/#consider-hybrid-approach-for-load-testing-websites)
+
+{{< admonition type="note" >}}
+
+Note that the DevTools recorder **does not require a cloud account**.
+
+{{< /admonition >}}
+
+## How to record
+
+1. Install the [Chrome](https://chrome.google.com/webstore/detail/grafana-k6-browser-record/fbanjfonbcedhifbgikmjelkkckhhidl) extension.
+1. Record a session using the [Chrome DevTools Recorder](https://developer.chrome.com/docs/devtools/recorder).
+1. Choose k6 Browser when [exporting the user flow](https://developer.chrome.com/docs/devtools/recorder/reference#export-flows).
+1. Edit your script as necessary. Depending on the [type of test](https://grafana.com/docs/k6/<K6_VERSION>/testing-guides/test-types/), you might need to change different aspects of the script.
+   Typical changes are for [load options](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/k6-options) and to handle [correlation and dynamic data](https://grafana.com/docs/k6/<K6_VERSION>/examples/correlation-and-dynamic-data).
+1. Run the test from the CLI or Grafana Cloud k6. For more about running k6, refer to the [Running k6 guide](https://grafana.com/docs/k6/<K6_VERSION>/get-started/running-k6).