Add section for jetbrains webstorm debugging (#24556)

* Add section for jetbrains webstorm debugging

I learnt of the solution [here](https://stackoverflow.com/questions/54354389/how-does-one-debug-nextjs-react-apps-with-webstorm) after spending more than a hour trying to find a solution. I think it would be a nice addition to the docs.

* update test

Co-authored-by: JJ Kasper <jj@jjsweb.site>

docs/advanced-features/debugging.md

@@ -48,6 +48,10 @@ Create a file named `.vscode/launch.json` at the root of your project with the f
 
 Now go to the Debug panel (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> on Windows/Linux, <kbd>⇧</kbd>+<kbd>⌘</kbd>+<kbd>D</kbd> on macOS), select a launch configuration, then press <kbd>F5</kbd> or select **Debug: Start Debugging** from the Command Palette to start your debugging session.
 
+## Using the Debugger in Jetbrains WebStorm
+
+Click the drop down menu listing the runtime configuration, and click `Edit Configurations...`. Create a `Javascript Debug` debug configuration with `http://localhost:3000` as the URL. Customize to your liking (e.g. Browser for debugging, store as project file), and click `OK`. Run this debug configuration, and the selected browser should automatically open. At this point, you should have 2 applications in debug mode: the NextJS node application, and the client/ browser application.
+
 ## Debugging with Chrome DevTools
 
 ### Client-side code

test/e2e/reload-scroll-backforward-restoration/index.test.ts

@@ -3,6 +3,7 @@ import { NextInstance } from 'test/lib/next-modes/base'
 import { check } from 'next-test-utils'
 import { join } from 'path'
 import webdriver from 'next-webdriver'
+import assert from 'assert'
 
 describe('reload-scroll-back-restoration', () => {
   let next: NextInstance
@@ -53,12 +54,17 @@ describe('reload-scroll-back-restoration', () => {
       /routeChangeComplete/
     )
 
-    expect(scrollPositionMemories[1].x).toBe(
-      Math.floor(await browser.eval(() => window.scrollX))
-    )
-    expect(scrollPositionMemories[1].y).toBe(
-      Math.floor(await browser.eval(() => window.scrollY))
-    )
+    await check(async () => {
+      assert.equal(
+        scrollPositionMemories[1].x,
+        Math.floor(await browser.eval(() => window.scrollX))
+      )
+      assert.equal(
+        scrollPositionMemories[1].y,
+        Math.floor(await browser.eval(() => window.scrollY))
+      )
+      return 'success'
+    }, 'success')
 
     await browser.refresh()
 
@@ -69,12 +75,17 @@ describe('reload-scroll-back-restoration', () => {
       /routeChangeComplete/
     )
 
-    expect(scrollPositionMemories[0].x).toBe(
-      Math.floor(await browser.eval(() => window.scrollX))
-    )
-    expect(scrollPositionMemories[0].y).toBe(
-      Math.floor(await browser.eval(() => window.scrollY))
-    )
+    await check(async () => {
+      assert.equal(
+        scrollPositionMemories[0].x,
+        Math.floor(await browser.eval(() => window.scrollX))
+      )
+      assert.equal(
+        scrollPositionMemories[0].y,
+        Math.floor(await browser.eval(() => window.scrollY))
+      )
+      return 'success'
+    }, 'success')
   })
 
   it('should restore the scroll position on navigating forward', async () => {
@@ -119,12 +130,17 @@ describe('reload-scroll-back-restoration', () => {
       /routeChangeComplete/
     )
 
-    expect(scrollPositionMemories[1].x).toBe(
-      Math.floor(await browser.eval(() => window.scrollX))
-    )
-    expect(scrollPositionMemories[1].y).toBe(
-      Math.floor(await browser.eval(() => window.scrollY))
-    )
+    await check(async () => {
+      assert.equal(
+        scrollPositionMemories[1].x,
+        Math.floor(await browser.eval(() => window.scrollX))
+      )
+      assert.equal(
+        scrollPositionMemories[1].y,
+        Math.floor(await browser.eval(() => window.scrollY))
+      )
+      return 'success'
+    }, 'success')
 
     await browser.refresh()
 
@@ -135,11 +151,16 @@ describe('reload-scroll-back-restoration', () => {
       /routeChangeComplete/
     )
 
-    expect(scrollPositionMemories[2].x).toBe(
-      Math.floor(await browser.eval(() => window.scrollX))
-    )
-    expect(scrollPositionMemories[2].y).toBe(
-      Math.floor(await browser.eval(() => window.scrollY))
-    )
+    await check(async () => {
+      assert.equal(
+        scrollPositionMemories[2].x,
+        Math.floor(await browser.eval(() => window.scrollX))
+      )
+      assert.equal(
+        scrollPositionMemories[2].y,
+        Math.floor(await browser.eval(() => window.scrollY))
+      )
+      return 'success'
+    }, 'success')
   })
 })