diff --git a/.semgrepignore b/.semgrepignore
index 3031b723ab1..5b3c586139a 100644
--- a/.semgrepignore
+++ b/.semgrepignore
@@ -11,3 +11,4 @@ dist/
# custom paths
__tests__/
./docs/source/data/subscriptions.mdx
+./docs/source/development-testing/developer-tooling.mdx
\ No newline at end of file
diff --git a/docs/source/assets/devtools/vscode-panel.png b/docs/source/assets/devtools/vscode-panel.png
new file mode 100644
index 00000000000..d330d1e74a3
Binary files /dev/null and b/docs/source/assets/devtools/vscode-panel.png differ
diff --git a/docs/source/assets/devtools/vscode-setting.png b/docs/source/assets/devtools/vscode-setting.png
new file mode 100644
index 00000000000..1d2db0fc272
Binary files /dev/null and b/docs/source/assets/devtools/vscode-setting.png differ
diff --git a/docs/source/development-testing/developer-tooling.md b/docs/source/development-testing/developer-tooling.mdx
similarity index 60%
rename from docs/source/development-testing/developer-tooling.md
rename to docs/source/development-testing/developer-tooling.mdx
index 913da807ee8..11e30ddfe8a 100644
--- a/docs/source/development-testing/developer-tooling.md
+++ b/docs/source/development-testing/developer-tooling.mdx
@@ -40,3 +40,38 @@ You can install the extension via the webstores for [Chrome](https://chrome.goog
While your app is in dev mode, the Apollo Client Devtools will appear as an "Apollo" tab in your web browser inspector. To enable the devtools in your app in production, pass `connectToDevTools: true` to the `ApolloClient` constructor in your app. Pass `connectToDevTools: false` if want to manually disable this functionality.
Find more information about contributing and debugging on the [Apollo Client Devtools GitHub page](https://github.com/apollographql/apollo-client-devtools).
+
+## Apollo Client Devtools in VS Code
+
+The Apollo VSCode extension ships with an instance of the Apollo Client Devtools.
+You can use it to remotely debug your client, which makes it possible to also debug React Native and node applications.
+
+The following sections walk through how to install and integrate with the extension.
+
+
+This feature is currently released as "experimental" - please try it out and give us feedback in our [GitHub issues](https://github.com/apollographql/vscode-graphql/issues)!
+
+
+* Install the Apollo VS Code extension: [start installation](vscode:extension/apollographql.vscode-apollo) | [marketplace page](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo)
+* Set the "Apollographql > Dev Tools: Show Panel" setting to "detect" or "always" in the VS code settings dialog.
+
+* In your code base, install the `@apollo/client-devtools-vscode` package:
+```sh
+npm install @apollo/client-devtools-vscode
+```
+* After initializing your `ApolloClient` instance, call `registerClient` with your client instance.
+```js
+import { registerClient } from "@apollo/client-devtools-vscode";
+
+const client = new ApolloClient({ /* ... */ });
+
+// we recommend wrapping this statement in a check for e.g. process.env.NODE_ENV === "development"
+const devtoolsRegistration = registerClient(
+ client,
+ // the default port of the VSCode DevTools is 7095
+ "ws://localhost:7095",
+);
+```
+* Open the "Apollo Client DevTools" panel in VS Code.
+* Start your application. It should automatically connect to the DevTools.
+