docs: add "Inspecting network requests" document (#6697)

packages/core/docs/.vuepress/config.js

@@ -110,7 +110,7 @@ module.exports = {
     sidebarDepth: 0,
     nav: [
       { text: 'Home', link: '/' },
-      { text: 'Demo', link: 'https://demo-ct.vuestorefront.io' }
+      { text: 'Demo', link: 'https://demo.vuestorefront.io/' }
     ],
     sidebar: [
       {
@@ -121,7 +121,7 @@ module.exports = {
           ['/general/installation', '💻 Installation'],
           ['/integrations/', '🔌 Integrations'],
           ['/general/enterprise', '🚀 Enterprise'],
-          ['/general/support', '🙋 Support'],
+          ['/general/support', '🙋 Support']
         ]
       },
       {
@@ -134,8 +134,7 @@ module.exports = {
           ['/getting-started/layouts-and-routing', 'Layouts and Routing'],
           ['/getting-started/theme', 'Theme'],
           ['/getting-started/internationalization', 'Internationalization'],
-          ['/getting-started/logging', 'Logging'],
-          // ['/', 'Glossary']
+          ['/getting-started/logging', 'Logging']
         ]
       },
       {
@@ -170,6 +169,13 @@ module.exports = {
           ['/integrate/cache-driver', 'Integrating cache driver']
         ]
       },
+      {
+        title: 'Troubleshooting',
+        collapsable: true,
+        children: [
+          ['/troubleshooting/inspecting-network-requests', 'Inspecting network requests']
+        ]
+      },
       {
         title: 'Performance',
         collapsable: true,
@@ -183,15 +189,6 @@ module.exports = {
           ['/performance/ssr-cache', 'SSR cache']
         ]
       },
-      // {
-      //   title: 'Deployment',
-      //   collapsable: true,
-      //   children: [
-      //     ['/', 'Deyploment basics'],
-      //     ['/', 'Continuous Integration (CI)'],
-      //     ['/', 'End-to-End testing (E2E)']
-      //   ]
-      // },
       {
         title: 'Reference',
         collapsable: true,
@@ -205,7 +202,7 @@ module.exports = {
         title: 'Community',
         collapsable: true,
         children: [
-          ['/community/sponsorship-program', '✍️ Sponsorship Program'],
+          ['/community/sponsorship-program', '✍️ Sponsorship Program']
         ]
       },
       {

packages/core/docs/troubleshooting/inspecting-network-requests.md

@@ -0,0 +1,42 @@
+# Inspecting network requests
+
+Although you can inspect the network request sent from the client (browser) to Server Middleware using built-in browser devtools, it is more complicated to inspect requests sent from the Server Middleware to external services. This document shows how to do it using a GUI tool called HTTP Toolkit.
+
+## Intercepting with HTTP Toolkit
+
+Go to the [HTTP Toolkit website](https://httptoolkit.tech/) and download a version for your operating system. The tool is available for Windows, Linux, and macOS.
+
+:::warning Using HTTP Toolkit on WSL2
+WSL2 on Windows 11 has native support for GUI applications, and there are no additional steps required.
+
+However, WSL2 on Windows 10 requires XServer to run applications with GUI.
+:::
+
+Once downloaded and installed, run the HTTP toolkit binary/exec file.
+
+```shell
+./httptoolkit
+```
+
+Then, open the "Intercept" tab in HTTP Toolkit, and select the "Existing Terminal" tab. It will download a script configuring the terminal session and instructing Node to send its traffic via proxy.
+
+<center>
+  <img
+    src="../images/httptoolkit.gif"
+    alt="Selecting Existing Terminal interception option"
+  />
+</center>
+
+Run the following command displayed after clicking on the "Existing Terminal" tab.
+
+```shell
+. <(curl -sS localhost:8001/setup)
+```
+
+Finally, start the application **in the same terminal window**.
+
+```shell
+yarn dev
+```
+
+If you open the page in the browser, HTTP Toolkit should intercept requests and show them in the "View" tab.