diff --git a/ping-viewer-next-frontend/src/App.vue b/ping-viewer-next-frontend/src/App.vue
index 0a6ed2c7..182d2d7b 100644
--- a/ping-viewer-next-frontend/src/App.vue
+++ b/ping-viewer-next-frontend/src/App.vue
@@ -21,7 +21,9 @@ import MainView from './views/Main.vue';
 import '@/styles/main.css';
 
 const route = useRoute();
-const isWidgetRoute = computed(() => route.path.startsWith('/addons/widget/'));
+const isWidgetRoute = computed(
+  () => route.path.startsWith('/addons/widget/') || route.path.startsWith('/addons/debug/')
+);
 const theme = useTheme();
 
 watchEffect(() => {
diff --git a/ping-viewer-next-frontend/src/components/views/WebsocketAnalysisView.vue b/ping-viewer-next-frontend/src/components/views/WebsocketAnalysisView.vue
index ea4652fb..19ca8d6f 100644
--- a/ping-viewer-next-frontend/src/components/views/WebsocketAnalysisView.vue
+++ b/ping-viewer-next-frontend/src/components/views/WebsocketAnalysisView.vue
@@ -109,8 +109,20 @@ export default {
     const autoScroll = ref(true);
     const maxMessages = 1000;
 
+    const buildWebSocketUrl = (baseUrl, path) => {
+      try {
+        const urlObj = new URL(baseUrl);
+        const wsProtocol = urlObj.protocol === 'https:' ? 'wss:' : 'ws:';
+        return `${wsProtocol}//${urlObj.host}${path}`;
+      } catch {
+        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        return `${wsProtocol}//${baseUrl}${path}`;
+      }
+    };
+
     const connectWebSocket = () => {
-      socket.value = new WebSocket(`ws://${new URL(props.serverUrl).host}/ws`);
+      const wsUrl = buildWebSocketUrl(props.serverUrl, '/ws');
+      socket.value = new WebSocket(wsUrl);
 
       socket.value.onopen = () => {
         status.value = 'Connected';
diff --git a/ping-viewer-next-frontend/src/pages/addons/debug/index.vue b/ping-viewer-next-frontend/src/pages/addons/debug/index.vue
new file mode 100644
index 00000000..733ad757
--- /dev/null
+++ b/ping-viewer-next-frontend/src/pages/addons/debug/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <WebsocketAnalysisView :serverUrl="serverUrl" />
+</template>
+
+<script setup>
+import WebsocketAnalysisView from '@/components/views/WebsocketAnalysisView.vue';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const serverUrl = computed(() => {
+  const q = route.query?.server;
+  if (typeof q === 'string' && q.length > 0) return q;
+  if (Array.isArray(q) && q.length > 0) return q[0];
+  return window.location.origin;
+});
+</script>