docs: add debugging tips page 🐯 (#7790)

gioboa · web-flow · commit 3d48145af45b · 2025-08-08T13:06:00.000+02:00
diff --git a/packages/docs/src/routes/docs/(qwikcity)/guides/debugging/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/guides/debugging/index.mdx
@@ -0,0 +1,21 @@
+---
+title: Debugging | Introduction
+description: Learn a few debugging tips to streamline your journey with Qwik.
+contributors:
+  - gioboa
+updated_at: '2025-08-08T00:00:00Z'
+created_at: '2025-08-08T00:00:00Z'
+---
+# Debugging
+
+## ✨ Save yourself a bit of time with 'click to source'
+
+During development, you can quickly access the source code of any element on a webpage by holding Option (⌥) or Alt key,
+click on whatever you're curious about, and Qwik will immediately open your source code right on top of that element.
+Seriously, any component, link, header - you name it, you can peek at its code.
+
+Qwik tries to guess what code editor you like to use.
+If it guesses wrong, no biggie! Just give Qwik a hint by setting the `LAUNCH_EDITOR` environment variable.
+For example, if you're on a Mac and use VS Code, you'd type `export LAUNCH_EDITOR=code` in your terminal.
+
+Under the hood [launch-editor library](https://github.com/yyx990803/launch-editor/tree/master) is used, here are the [supported editors](https://github.com/yyx990803/launch-editor/tree/master?tab=readme-ov-file#supported-editors)
diff --git a/packages/docs/src/routes/docs/menu.md b/packages/docs/src/routes/docs/menu.md
@@ -110,6 +110,7 @@
 - [SSG](</docs/(qwikcity)/guides/static-site-generation/index.mdx>)
 - [Qwik Native Apps](</docs/(qwikcity)/guides/capacitor/index.mdx>)
 - [React Cheat Sheet](</docs/(qwikcity)/guides/react-cheat-sheet/index.mdx>)
+- [Debugging](</docs/(qwikcity)/guides/debugging/index.mdx>)
 - [Best Practices](</docs/(qwikcity)/guides/best-practices/index.mdx>)
 - [Bundle Optimization](</docs/(qwikcity)/guides/bundle/index.mdx>)
 - [Env variables](</docs/(qwikcity)/guides/env-variables/index.mdx>)
