Steps to generate JSON added in markdown

README.md

@@ -22,6 +22,35 @@ node index.js sample-recordings/simple-recorder.json
 
 ![Screenshots of Script](/assets/images/wpt-recorder-script.png)
 Paste this script into WPT custom script and see the magic happening
+<br></br>
+
+## Steps to obtain Chrome user flow recordings
+
+Refer to [Recorder docs](https://developer.chrome.com/docs/devtools/recorder/) for more information on Chrome Recorder
+
+<h3>#Open the Recorder panel</h3>
+
+- Open DevTools.
+- Click on More options --> More tools > Recorder.
+
+![Screenshots of Script](/assets/images/open_dev-1.png)
+
+<h3>#Export the JSON</h3>
+
+---
+**NOTE**
+- At the moment, Only Chrome v101 and above i.e. Google Chrome Developer and Google Chrome Canary exports these json scripts.
+- Make sure that your recording plays back correctly in Chrome before feeding it into The Recorder Script (To obtain the expected outcome)
+
+---
+
+After you are done with the recording
+
+- Click on export icon and select "Export as a JSON file"
+
+![Screenshots of Script](/assets/images/export-json.png)
+
+Once that is done, feed the JSON into the recorder script to generate the [WPT custom script](#usage)
 
 
 ## Currently Supported Recorder Commands
@@ -39,15 +68,9 @@ Paste this script into WPT custom script and see the magic happening
 
 ---
 **NOTE**
-
-<ul>
-<li>At the moment, only Google Chrome Developer and Google Chrome Canary exports these json scripts.</li>
-<li>There are some websites having issues with chrome recorder, this issue will be resolved with time as Google developers improve Chrome</li>
-</ul>
-
-
-
-
+- At the moment, Only Chrome v101 and above i.e. Google Chrome Developer and Google Chrome Canary exports these json scripts.
+- There are some websites having issues with chrome recorder, this issue will be resolved with time as Google developers improve Chrome
+
 ---