diff --git a/docs/api/node-events/preprocessors-api.mdx b/docs/api/node-events/preprocessors-api.mdx
index 7ca4209f85..23093b07b9 100644
--- a/docs/api/node-events/preprocessors-api.mdx
+++ b/docs/api/node-events/preprocessors-api.mdx
@@ -167,6 +167,10 @@ fs.watch(filePath, () => {
 })
 ```
 
+## Source maps
+
+<SourceMaps />
+
 ## Publishing
 
 Publish preprocessors to [npm](https://www.npmjs.com/) with the naming
diff --git a/docs/app/guides/debugging.mdx b/docs/app/guides/debugging.mdx
index 6748a4c3d5..43c1233236 100644
--- a/docs/app/guides/debugging.mdx
+++ b/docs/app/guides/debugging.mdx
@@ -198,35 +198,7 @@ application under test, so the test above will fail.
 
 ### Source maps
 
-Cypress utilizes source maps to enhance the error experience. Stack traces are
-translated so that your source files are shown instead of the generated file
-that is loaded by the browser. This also enables displaying code frames. Without
-inline source maps, you will not see code frames.
-
-By default, Cypress will include an inline source map in your spec file, so you
-will get the most out of the error experience. If you
-[modify the preprocessor](/api/node-events/preprocessors-api), ensure that inline
-source maps are enabled to get the same experience. Some examples of this include:
-
-- With webpack and the
-  [webpack preprocessor](https://github.com/cypress-io/cypress/tree/develop/npm/webpack-preprocessor), set
-  [the `devtool` option](https://webpack.js.org/configuration/devtool/) to
-  `inline-source-map`.
-- With esbuild and the
-  [esbuild preprocessor](https://github.com/bahmutov/cypress-esbuild-preprocessor/tree/main), set
-  [the `sourcemap` option](https://esbuild.github.io/api/#sourcemap) to `inline` when
-  [creating the bundler](https://github.com/bahmutov/cypress-esbuild-preprocessor#esbuild-options).
-- With cucumber and the
-  [cucumber preprocessor](https://github.com/badeball/cypress-cucumber-preprocessor/tree/master)
-  third party bundlers are used to bundle the code.
-  - For esbuild and the
-    [esbuild preprocessor](https://github.com/bahmutov/cypress-esbuild-preprocessor/tree/main),
-    set [the `sourcemap` option](https://esbuild.github.io/api/#sourcemap) to `inline` when
-    [creating the bundler](https://github.com/bahmutov/cypress-esbuild-preprocessor#esbuild-options).
-    Note: the cucumber preprocessor documentation for the esbuild bundler describes an experimental
-    option: `prettySourceMaps`, but this option is buggy and setting source maps on the esbuild
-    bundler directly works better.
-  - The other bundlers all default their source maps appropriately.
+<SourceMaps />
 
 ## Debugging flake
 
diff --git a/docs/partials/_source-maps.mdx b/docs/partials/_source-maps.mdx
new file mode 100644
index 0000000000..102c591deb
--- /dev/null
+++ b/docs/partials/_source-maps.mdx
@@ -0,0 +1,29 @@
+Cypress utilizes source maps to enhance the error experience. Stack traces are
+translated so that your source files are shown instead of the generated file
+that is loaded by the browser. This also enables displaying code frames. Without
+inline source maps, you will not see code frames.
+
+By default, Cypress will include an inline source map in your spec file, so you
+will get the most out of the error experience. If you
+[modify the preprocessor](/api/node-events/preprocessors-api#Usage), ensure that inline
+source maps are enabled to get the same experience. Some examples of this include:
+
+- With webpack and the
+  [webpack preprocessor](https://github.com/cypress-io/cypress/tree/develop/npm/webpack-preprocessor), set
+  [the `devtool` option](https://webpack.js.org/configuration/devtool/) to
+  `inline-source-map`.
+- With esbuild and the
+  [esbuild preprocessor](https://github.com/bahmutov/cypress-esbuild-preprocessor/tree/main), set
+  [the `sourcemap` option](https://esbuild.github.io/api/#sourcemap) to `inline` when
+  [creating the bundler](https://github.com/bahmutov/cypress-esbuild-preprocessor#esbuild-options).
+- With cucumber and the
+  [cucumber preprocessor](https://github.com/badeball/cypress-cucumber-preprocessor/tree/master)
+  third party bundlers are used to bundle the code.
+  - For esbuild and the
+    [esbuild preprocessor](https://github.com/bahmutov/cypress-esbuild-preprocessor/tree/main),
+    set [the `sourcemap` option](https://esbuild.github.io/api/#sourcemap) to `inline` when
+    [creating the bundler](https://github.com/bahmutov/cypress-esbuild-preprocessor#esbuild-options).
+    Note: the cucumber preprocessor documentation for the esbuild bundler describes an experimental
+    option: `prettySourceMaps`, but this option is buggy and setting source maps on the esbuild
+    bundler directly works better.
+  - The other bundlers all default their source maps appropriately.
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index 0e3ee1f5f0..588d27b29d 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -27,6 +27,7 @@ import Icon from "@site/src/components/icon";
 import ImportMountFunctions from "@site/docs/partials/_import-mount-functions.mdx";
 import IntellisenseCodeCompletion from "@site/docs/partials/_intellisense-code-completion.mdx";
 import ProductHeading from "@site/src/components/product-heading";
+import SourceMaps from "@site/docs/partials/_source-maps.mdx";
 import SupportFileConfiguration from "@site/docs/partials/_support-file-configuration.mdx";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
@@ -185,6 +186,7 @@ export default {
   ImportMountFunctions,
   IntellisenseCodeCompletion,
   ProductHeading,
+  SourceMaps,
   SupportFileConfiguration,
   Tabs,
   TabItem,