chore: update .gitignore, bump version to 0.2.8, and enhance Inspect iframe functionality

- Removed redundant entry from .gitignore.
- Updated package version to 0.2.8 in package.json.
- Refactored Inspect component to correctly load iframe source based on app root.
- Improved iframe theme styles for better visibility and user experience.

Author: JerryWu1234

.gitignore

@@ -69,4 +69,3 @@ qwik/*
 .cursor/skills/*
 related-folder/**
 **/.qwik-devtools/
-**/.qwik-devtools/

packages/devtools/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @qwik.dev/devtools
 
+## 0.2.8
+
+### Patch Changes
+
+- a337ab5: refactor: Update iframe theme styles and improve Inspect iframe source handling
+
 ## 0.2.7
 
 ### Patch Changes

packages/devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwik.dev/devtools",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "license": "MIT",
   "main": "./dist/plugin/index.mjs",
   "description": "Qwik devtools package",

packages/ui/src/features/Inspect/Inspect.tsx

@@ -1,12 +1,25 @@
-import { component$ } from '@qwik.dev/core';
+import { component$, isBrowser } from '@qwik.dev/core';
 import { inspectorLink } from './constant';
 import { setupIframeThemeSync } from './iframe-theme';
 
+/**
+ * Inspect iframe must load under app root (Vite `BASE_URL` + origin), not `location.pathname`,
+ * so deep routes do not produce `.../nested/route__inspect/`.
+ * SSR: no `location` — return empty until the client runs.
+ */
+function getInspectIframeSrc(): string {
+  if (!isBrowser) {
+    return '';
+  }
+  const base = new URL(import.meta.env.BASE_URL ?? '/', location.origin);
+  return new URL(inspectorLink, base).href;
+}
+
 export const Inspect = component$(() => {
   return (
     <div class="h-full w-full flex-1 overflow-hidden rounded-2xl border border-glass-border bg-card-item-bg">
       <iframe
-        src={`${location.href}${inspectorLink}`}
+        src={getInspectIframeSrc()}
         width={'100%'}
         height={'100%'}
         id="inspect_qwik"

packages/ui/src/features/Inspect/iframe-theme.ts

@@ -13,9 +13,9 @@ const GLASSMORPHISM_CSS = `
     --c-bg-base: transparent !important;
     --c-bg-nav: transparent !important;
     --c-bg-active: transparent !important;
-    --iframe-border: rgba(255, 255, 255, 0.08) !important;
-    --iframe-hover: rgba(255, 255, 255, 0.06) !important;
-    color-scheme: dark;
+    --iframe-border: rgba(0, 0, 0, 0.1) !important;
+    --iframe-hover: rgba(0, 0, 0, 0.04) !important;
+    color-scheme: light;
   }
   /* 仅针对主视图容器做透明处理，不再暴力让所有 div/section 变透明 */
   html, body, #app, main, header, nav, footer { background-color: transparent !important; }