Update dev-tools.js

dev-tools.js

@@ -17,142 +17,104 @@
   let refreshElementsPanel = null;
   let vitalsMeasurementStarted = false;
 
-  // Web Vitalsスクリプトを動的に読み込み
-  const loadWebVitals = () => {
-    return new Promise((resolve) => {
-      if (window.webVitals) {
-        resolve();
-        return;
-      }
-      
-      const webVitalsScript = document.createElement('script');
-      webVitalsScript.src = 'https://unpkg.com/[email protected]/dist/web-vitals.iife.js';
-      webVitalsScript.onload = resolve;
-      document.head.appendChild(webVitalsScript);
-    });
-  };
-
-  // DOM変更を監視するMutationObserver
-  const setupMutationObserver = () => {
-    observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          mutation.addedNodes.forEach((node) => {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-              highlightNode(node);
-            }
-          });
-        }
-      });
-      if (refreshElementsPanel) {
-        refreshElementsPanel();
-      }
-    });
-
-    observer.observe(document.documentElement, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      characterData: true
-    });
-  };
+  // スタイルの追加
   const style = document.createElement('style');
   style.textContent = `
-:root {
-  --bg-color: #1e1e1e;
-  --panel-bg: #252526;
-  --border-color: #3c3c3c;
-  --text-color: #e0e0e0;
-  --text-muted: #a0a0a0;
-  --primary-color: #007acc;
-  --primary-hover: #3e9fda;
-  --success-color: #4caf50;
-  --error-color: #f44336;
-  --warning-color: #ff9800;
-  --info-color: #2196f3;
-  --highlight-bg: rgba(0, 122, 204, 0.2);
-  --tab-bg: #2d2d2d;
-  --tab-active-bg: #1e1e1e;
-  --console-log-color: #e0e0e0;
-  --console-error-color: #f44336;
-  --console-warn-color: #ff9800;
-  --console-info-color: #4fc3f7;
-  --json-key: #9cdcfe;
-  --json-string: #ce9178;
-  --json-number: #b5cea8;
-  --json-boolean: #569cd6;
-  --json-null: #569cd6;
-  --dom-tag: #569cd6;
-  --dom-attr: #9cdcfe;
-  --dom-text: #d4d4d4;
-}
-
-.devtools-container {
+.dt-root {
+  --dt-bg-color: #1e1e1e;
+  --dt-panel-bg: #252526;
+  --dt-border-color: #3c3c3c;
+  --dt-text-color: #e0e0e0;
+  --dt-text-muted: #a0a0a0;
+  --dt-primary-color: #007acc;
+  --dt-primary-hover: #3e9fda;
+  --dt-success-color: #4caf50;
+  --dt-error-color: #f44336;
+  --dt-warning-color: #ff9800;
+  --dt-info-color: #2196f3;
+  --dt-highlight-bg: rgba(0, 122, 204, 0.2);
+  --dt-tab-bg: #2d2d2d;
+  --dt-tab-active-bg: #1e1e1e;
+  --dt-console-log-color: #e0e0e0;
+  --dt-console-error-color: #f44336;
+  --dt-console-warn-color: #ff9800;
+  --dt-console-info-color: #4fc3f7;
+  --dt-json-key: #9cdcfe;
+  --dt-json-string: #ce9178;
+  --dt-json-number: #b5cea8;
+  --dt-json-boolean: #569cd6;
+  --dt-json-null: #569cd6;
+  --dt-dom-tag: #569cd6;
+  --dt-dom-attr: #9cdcfe;
+  --dt-dom-text: #d4d4d4;
+}
+
+.dt-devtools-container {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 300px;
-  background-color: var(--panel-bg);
-  border-top: 1px solid var(--border-color);
+  background-color: var(--dt-panel-bg);
+  border-top: 1px solid var(--dt-border-color);
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
   z-index: 9999;
   display: flex;
   flex-direction: column;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  color: var(--text-color);
+  color: var(--dt-text-color);
 }
 
-.devtools-header {
+.dt-devtools-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 5px 10px;
-  background-color: var(--tab-bg);
-  border-bottom: 1px solid var(--border-color);
+  background-color: var(--dt-tab-bg);
+  border-bottom: 1px solid var(--dt-border-color);
 }
 
-.devtools-tabs {
+.dt-devtools-tabs {
   display: flex;
   gap: 5px;
 }
 
-.devtools-tab {
+.dt-devtools-tab {
   padding: 5px 10px;
   cursor: pointer;
   border-radius: 3px 3px 0 0;
-  background-color: var(--tab-bg);
-  border: 1px solid var(--border-color);
+  background-color: var(--dt-tab-bg);
+  border: 1px solid var(--dt-border-color);
   border-bottom: none;
   font-size: 12px;
-  color: var(--text-muted);
+  color: var(--dt-text-muted);
 }
 
-.devtools-tab.active {
-  background-color: var(--tab-active-bg);
-  color: var(--text-color);
-  border-bottom: 1px solid var(--tab-active-bg);
+.dt-devtools-tab.active {
+  background-color: var(--dt-tab-active-bg);
+  color: var(--dt-text-color);
+  border-bottom: 1px solid var(--dt-tab-active-bg);
   margin-bottom: -1px;
   font-weight: bold;
 }
 
-.devtools-close {
+.dt-devtools-close {
   background: none;
   border: none;
   font-size: 16px;
   cursor: pointer;
   padding: 0 5px;
-  color: var(--text-color);
+  color: var(--dt-text-color);
 }
 
-.devtools-content {
+.dt-devtools-content {
   flex: 1;
   overflow: auto;
   position: relative;
-  background-color: var(--panel-bg);
+  background-color: var(--dt-panel-bg);
 }
 
-.devtools-panel {
+.dt-devtools-panel {
   position: absolute;
   top: 0;
   left: 0;
@@ -161,45 +123,45 @@
   padding: 10px;
   overflow: auto;
   display: none;
-  background-color: var(--panel-bg);
+  background-color: var(--dt-panel-bg);
 }
 
-.devtools-panel.active {
+.dt-devtools-panel.active {
   display: block;
 }
 
 /* Console スタイル */
-#console-log {
+#dt-console-log {
   white-space: pre-wrap;
   margin: 0;
   line-height: 1.4;
   flex: 1;
-  color: var(--console-log-color);
+  color: var(--dt-console-log-color);
   font-family: 'Consolas', 'Monaco', monospace;
   font-size: 13px;
 }
 
-.console-log {
-  color: var(--console-log-color);
+.dt-console-log {
+  color: var(--dt-console-log-color);
 }
 
-.console-error {
-  color: var(--console-error-color);
+.dt-console-error {
+  color: var(--dt-console-error-color);
 }
 
-.console-warn {
-  color: var(--console-warn-color);
+.dt-console-warn {
+  color: var(--dt-console-warn-color);
 }
 
-.console-info {
-  color: var(--console-info-color);
+.dt-console-info {
+  color: var(--dt-console-info-color);
 }
 
-.console-input {
+.dt-console-input {
   width: calc(100% - 16px);
-  background: var(--tab-bg);
-  border: 1px solid var(--border-color);
-  color: var(--text-color);
+  background: var(--dt-tab-bg);
+  border: 1px solid var(--dt-border-color);
+  color: var(--dt-text-color);
   padding: 8px;
   margin-top: 10px;
   font-family: monospace;
@@ -207,117 +169,117 @@
 }
 
 /* Elements スタイル */
-.elements-container {
+.dt-elements-container {
   display: flex;
   flex: 1;
   overflow: hidden;
 }
 
-.dom-tree {
+.dt-dom-tree {
   font-family: 'Consolas', 'Monaco', monospace;
   flex: 1;
   overflow: auto;
-  border-right: 1px solid var(--border-color);
+  border-right: 1px solid var(--dt-border-color);
   padding-right: 10px;
-  color: var(--dom-text);
+  color: var(--dt-dom-text);
   font-size: 13px;
 }
 
-.dom-node {
+.dt-dom-node {
   margin-left: 15px;
   position: relative;
   line-height: 1.4;
   transition: background-color 0.3s;
 }
 
-.dom-node.selected {
-  background: var(--highlight-bg);
+.dt-dom-node.selected {
+  background: var(--dt-highlight-bg);
 }
 
-.dom-node.highlight {
-  animation: highlight-fade 1.5s;
+.dt-dom-node.highlight {
+  animation: dt-highlight-fade 1.5s;
 }
 
-@keyframes highlight-fade {
+@keyframes dt-highlight-fade {
   0% { background-color: rgba(79, 195, 247, 0.5); }
   100% { background-color: transparent; }
 }
 
-.dom-tag {
-  color: var(--dom-tag);
+.dt-dom-tag {
+  color: var(--dt-dom-tag);
   font-weight: bold;
 }
 
-.dom-attr {
-  color: var(--dom-attr);
+.dt-dom-attr {
+  color: var(--dt-dom-attr);
 }
 
-.dom-attr.editable:hover {
+.dt-dom-attr.editable:hover {
   text-decoration: underline;
   cursor: pointer;
 }
 
-.dom-text {
-  color: var(--dom-text);
+.dt-dom-text {
+  color: var(--dt-dom-text);
 }
 
-.dom-edit-input {
-  background: var(--panel-bg);
-  border: 1px solid var(--primary-color);
+.dt-dom-edit-input {
+  background: var(--dt-panel-bg);
+  border: 1px solid var(--dt-primary-color);
   padding: 0 2px;
   margin: -1px 0;
   font-family: monospace;
   min-width: 50px;
-  color: var(--text-color);
+  color: var(--dt-text-color);
 }
 
-.css-panel {
+.dt-css-panel {
   flex: 1;
   overflow: auto;
   padding-left: 10px;
   font-size: 13px;
 }
 
-.css-rule {
+.dt-css-rule {
   margin-bottom: 15px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--dt-border-color);
   padding: 8px;
-  background-color: var(--tab-bg);
+  background-color: var(--dt-tab-bg);
   border-radius: 3px;
 }
 
-.css-selector {
-  color: var(--primary-color);
+.dt-css-selector {
+  color: var(--dt-primary-color);
   margin-bottom: 5px;
   font-weight: bold;
 }
 
-.css-property {
+.dt-css-property {
   display: flex;
   margin-bottom: 3px;
 }
 
-.css-property-name {
-  color: var(--dom-attr);
+.dt-css-property-name {
+  color: var(--dt-dom-attr);
   min-width: 120px;
 }
 
-.css-property-value {
-  color: var(--dom-text);
+.dt-css-property-value {
+  color: var(--dt-dom-text);
   flex: 1;
 }
 
-.css-toggle {
+.dt-css-toggle {
   margin-left: 10px;
-  color: var(--error-color);
+  color: var(--dt-error-color);
   cursor: pointer;
 }
 
 /* Context Menu */
-.context-menu {
+.dt-context-menu {
   position: absolute;
-  background: var(--panel-bg);
-  border: 1px solid var(--border-color);
+  background: var(--dt-panel-bg);
+  border: 1px solid var(--dt-border-color);
   z-index: 10000;
   min-width: 200px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
@@ -326,43 +288,43 @@
   overflow: hidden;
 }
 
-.context-menu-item {
+.dt-context-menu-item {
   padding: 8px 15px;
   cursor: pointer;
-  color: var(--text-color);
+  color: var(--dt-text-color);
   font-size: 13px;
 }
 
-.context-menu-item:hover {
-  background: var(--primary-color);
+.dt-context-menu-item:hover {
+  background: var(--dt-primary-color);
   color: #000;
 }
 
 /* Storage スタイル */
-.storage-table {
+.dt-storage-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 10px;
   font-size: 13px;
 }
 
-.storage-table th, .storage-table td {
-  border: 1px solid var(--border-color);
+.dt-storage-table th, .dt-storage-table td {
+  border: 1px solid var(--dt-border-color);
   padding: 5px;
   text-align: left;
 }
 
-.storage-table th {
-  background: var(--tab-bg);
+.dt-storage-table th {
+  background: var(--dt-tab-bg);
 }
 
-.storage-actions {
+.dt-storage-actions {
   display: flex;
   gap: 5px;
 }
 
-.storage-btn {
-  background: var(--primary-color);
+.dt-storage-btn {
+  background: var(--dt-primary-color);
   border: none;
   padding: 2px 5px;
   cursor: pointer;
@@ -371,18 +333,18 @@
   font-size: 12px;
 }
 
-.editable {
+.dt-editable {
   cursor: pointer;
   padding: 2px 5px;
   border: 1px dashed transparent;
 }
 
-.editable:hover {
-  border-color: var(--primary-color);
+.dt-editable:hover {
+  border-color: var(--dt-primary-color);
 }
 
-.add-btn {
-  background: var(--primary-color);
+.dt-add-btn {
+  background: var(--dt-primary-color);
   color: #000;
   border: none;
   padding: 5px 10px;
@@ -392,47 +354,47 @@
   font-size: 13px;
 }
 
-.add-btn:hover {
-  background: var(--primary-hover);
+.dt-add-btn:hover {
+  background: var(--dt-primary-hover);
 }
 
 /* Network スタイル */
-.network-container {
+.dt-network-container {
   display: flex;
   height: 100%;
   overflow: hidden;
 }
 
-.network-requests {
+.dt-network-requests {
   width: 40%;
   overflow-y: auto;
-  border-right: 1px solid var(--border-color);
+  border-right: 1px solid var(--dt-border-color);
   font-size: 13px;
 }
 
-.network-details {
+.dt-network-details {
   width: 60%;
   overflow-y: auto;
   padding-left: 10px;
 }
 
-.network-request {
+.dt-network-request {
   padding: 8px;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--dt-border-color);
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 
-.network-request:hover {
+.dt-network-request:hover {
   background-color: rgba(0, 122, 204, 0.1);
 }
 
-.network-request.selected {
-  background-color: var(--highlight-bg);
+.dt-network-request.selected {
+  background-color: var(--dt-highlight-bg);
 }
 
-.network-status {
+.dt-network-status {
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -443,51 +405,51 @@
   flex-shrink: 0;
 }
 
-.network-status.success {
-  background-color: var(--success-color);
+.dt-network-status.success {
+  background-color: var(--dt-success-color);
   color: white;
 }
 
-.network-status.error {
-  background-color: var(--error-color);
+.dt-network-status.error {
+  background-color: var(--dt-error-color);
   color: white;
 }
 
-.network-method {
+.dt-network-method {
   font-weight: bold;
   margin-right: 8px;
-  color: var(--primary-color);
+  color: var(--dt-primary-color);
   min-width: 40px;
 }
 
-.network-url {
+.dt-network-url {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.network-time {
-  color: var(--text-muted);
+.dt-network-time {
+  color: var(--dt-text-muted);
   font-size: 11px;
   margin-left: 8px;
 }
 
-.network-detail-section {
+.dt-network-detail-section {
   margin-bottom: 15px;
 }
 
-.network-detail-title {
+.dt-network-detail-title {
   font-weight: bold;
   margin-bottom: 5px;
-  color: var(--primary-color);
+  color: var(--dt-primary-color);
 }
 
-.network-detail-content {
-  background: var(--tab-bg);
+.dt-network-detail-content {
+  background: var(--dt-tab-bg);
   padding: 8px;
   border-radius: 3px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--dt-border-color);
   font-family: monospace;
   white-space: pre-wrap;
   font-size: 12px;
@@ -496,141 +458,175 @@
 }
 
 /* Web Vitals スタイル */
-.vitals-container {
+.dt-vitals-container {
   display: flex;
   flex-direction: column;
   gap: 15px;
 }
 
-.vital-card {
-  background: var(--tab-bg);
-  border: 1px solid var(--border-color);
+.dt-vital-card {
+  background: var(--dt-tab-bg);
+  border: 1px solid var(--dt-border-color);
   border-radius: 5px;
   padding: 15px;
 }
 
-.vital-title {
+.dt-vital-title {
   font-weight: bold;
   margin-bottom: 10px;
-  color: var(--primary-color);
+  color: var(--dt-primary-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.vital-value {
+.dt-vital-value {
   font-size: 24px;
   font-weight: bold;
   margin: 10px 0;
 }
 
-.vital-good {
-  color: var(--success-color);
+.dt-vital-good {
+  color: var(--dt-success-color);
 }
 
-.vital-needs-improvement {
-  color: var(--warning-color);
+.dt-vital-needs-improvement {
+  color: var(--dt-warning-color);
 }
 
-.vital-poor {
-  color: var(--error-color);
+.dt-vital-poor {
+  color: var(--dt-error-color);
 }
 
-.vital-description {
+.dt-vital-description {
   font-size: 13px;
-  color: var(--text-muted);
+  color: var(--dt-text-muted);
 }
 
-.vital-thresholds {
+.dt-vital-thresholds {
   display: flex;
   margin-top: 10px;
   font-size: 12px;
 }
 
-.vital-threshold {
+.dt-vital-threshold {
   flex: 1;
   text-align: center;
   padding: 5px;
   border-radius: 3px;
 }
 
-.vital-threshold.active {
+.dt-vital-threshold.active {
   background: rgba(0, 122, 204, 0.2);
 }
 
 /* DOM Tree Toggle */
-.dom-toggle {
+.dt-dom-toggle {
   position: absolute;
   left: -12px;
   top: 2px;
   width: 10px;
   height: 10px;
   cursor: pointer;
-  background-color: var(--text-muted);
+  background-color: var(--dt-text-muted);
   clip-path: polygon(0 0, 100% 50%, 0 100%);
   transition: transform 0.2s;
 }
 
-.dom-toggle.collapsed {
+.dt-dom-toggle.collapsed {
   transform: rotate(-90deg);
 }
 
-.dom-children {
+.dt-dom-children {
   overflow: hidden;
   transition: max-height 0.3s ease-out;
 }
 
 /* JSON スタイル */
-.json-key {
-  color: var(--json-key);
+.dt-json-key {
+  color: var(--dt-json-key);
 }
 
-.json-string {
-  color: var(--json-string);
+.dt-json-string {
+  color: var(--dt-json-string);
 }
 
-.json-number {
-  color: var(--json-number);
+.dt-json-number {
+  color: var(--dt-json-number);
 }
 
-.json-boolean {
-  color: var(--json-boolean);
+.dt-json-boolean {
+  color: var(--dt-json-boolean);
 }
 
-.json-null {
-  color: var(--json-null);
+.dt-json-null {
+  color: var(--dt-json-null);
 }
   `;
   document.head.appendChild(style);
+
   // ノードをハイライト表示
   function highlightNode(node) {
     const elementId = node.id || Math.random().toString(36).substr(2, 9);
-    node.setAttribute('data-element-id', elementId);
+    node.setAttribute('data-dt-element-id', elementId);
     
     setTimeout(() => {
-      const domNode = document.querySelector(`[data-element-id="${elementId}"]`);
+      const domNode = document.querySelector(`[data-dt-element-id="${elementId}"]`);
       if (domNode) {
-        domNode.classList.add('highlight');
+        domNode.classList.add('dt-highlight');
         setTimeout(() => {
-          domNode.classList.remove('highlight');
+          domNode.classList.remove('dt-highlight');
         }, 1500);
       }
     }, 100);
   }
 
+  // Web Vitalsスクリプトを動的に読み込み
+  const loadWebVitals = () => {
+    return new Promise((resolve) => {
+      if (window.webVitals) {
+        resolve();
+        return;
+      }
+      
+      const webVitalsScript = document.createElement('script');
+      webVitalsScript.src = 'https://unpkg.com/[email protected]/dist/web-vitals.iife.js';
+      webVitalsScript.onload = resolve;
+      document.head.appendChild(webVitalsScript);
+    });
+  };
+
+  // DOM変更を監視するMutationObserver
+  const setupMutationObserver = () => {
+    if (observer) observer.disconnect();
+    
+    observer = new MutationObserver((mutations) => {
+      if (refreshElementsPanel) {
+        refreshElementsPanel();
+      }
+    });
+
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: false,
+      characterData: false
+    });
+  };
+
   // 開発者ツールのメイン関数
   const createDevTools = () => {
     const container = document.createElement('div');
-    container.className = 'devtools-container';
-    container.id = 'devtools-container';
+    container.className = 'dt-devtools-container';
+    container.id = 'dt-devtools-container';
     container.style.display = 'none';
 
     // ヘッダー部分
     const header = document.createElement('div');
-    header.className = 'devtools-header';
+    header.className = 'dt-devtools-header';
 
     const tabs = document.createElement('div');
-    tabs.className = 'devtools-tabs';
+    tabs.className = 'dt-devtools-tabs';
 
     const consoleTab = createTab('Console', 'console');
     const elementsTab = createTab('Elements', 'elements');
@@ -645,7 +641,7 @@
     tabs.appendChild(vitalsTab);
 
     const closeBtn = document.createElement('button');
-    closeBtn.className = 'devtools-close';
+    closeBtn.className = 'dt-devtools-close';
     closeBtn.textContent = '×';
     closeBtn.onclick = toggleDevTools;
 
@@ -654,7 +650,7 @@
 
     // コンテンツ部分
     const content = document.createElement('div');
-    content.className = 'devtools-content';
+    content.className = 'dt-devtools-content';
 
     const consolePanel = createConsolePanel();
     const elementsPanel = createElementsPanel();
@@ -679,11 +675,11 @@
     // タブ切り替え機能
     function createTab(name, panelId) {
       const tab = document.createElement('div');
-      tab.className = 'devtools-tab';
+      tab.className = 'dt-devtools-tab';
       tab.textContent = name;
       tab.onclick = () => {
-        document.querySelectorAll('.devtools-tab').forEach(t => t.classList.remove('active'));
-        document.querySelectorAll('.devtools-panel').forEach(p => p.classList.remove('active'));
+        document.querySelectorAll('.dt-devtools-tab').forEach(t => t.classList.remove('active'));
+        document.querySelectorAll('.dt-devtools-panel').forEach(p => p.classList.remove('active'));
         tab.classList.add('active');
         document.getElementById(panelId + '-panel').classList.add('active');
         
@@ -700,86 +696,86 @@
   // Web Vitalsパネル作成
   function createVitalsPanel() {
     const panel = document.createElement('div');
-    panel.className = 'devtools-panel';
+    panel.className = 'dt-devtools-panel';
     panel.id = 'vitals-panel';
 
     const container = document.createElement('div');
-    container.className = 'vitals-container';
+    container.className = 'dt-vitals-container';
     panel.appendChild(container);
 
     // 測定開始ボタン
     const startButton = document.createElement('button');
-    startButton.className = 'add-btn';
+    startButton.className = 'dt-add-btn';
     startButton.textContent = '測定を開始';
     startButton.onclick = startVitalsMeasurement;
     container.appendChild(startButton);
 
     // CLS (Cumulative Layout Shift)
     const clsCard = document.createElement('div');
-    clsCard.className = 'vital-card';
+    clsCard.className = 'dt-vital-card';
     clsCard.innerHTML = `
-      <div class="vital-title">CLS (Cumulative Layout Shift) <span class="vital-description">視覚的な安定性</span></div>
-      <div class="vital-value" id="cls-value">-</div>
-      <div class="vital-thresholds">
-        <div class="vital-threshold">Good: &lt; 0.1</div>
-        <div class="vital-threshold">Needs Improvement: &lt; 0.25</div>
-        <div class="vital-threshold">Poor: ≥ 0.25</div>
+      <div class="dt-vital-title">CLS (Cumulative Layout Shift) <span class="dt-vital-description">視覚的な安定性</span></div>
+      <div class="dt-vital-value" id="dt-cls-value">-</div>
+      <div class="dt-vital-thresholds">
+        <div class="dt-vital-threshold">Good: &lt; 0.1</div>
+        <div class="dt-vital-threshold">Needs Improvement: &lt; 0.25</div>
+        <div class="dt-vital-threshold">Poor: ≥ 0.25</div>
       </div>
     `;
     container.appendChild(clsCard);
 
     // FCP (First Contentful Paint)
     const fcpCard = document.createElement('div');
-    fcpCard.className = 'vital-card';
+    fcpCard.className = 'dt-vital-card';
     fcpCard.innerHTML = `
-      <div class="vital-title">FCP (First Contentful Paint) <span class="vital-description">最初のコンテンツ表示</span></div>
-      <div class="vital-value" id="fcp-value">-</div>
-      <div class="vital-thresholds">
-        <div class="vital-threshold">Good: &lt; 1.8s</div>
-        <div class="vital-threshold">Needs Improvement: &lt; 3s</div>
-        <div class="vital-threshold">Poor: ≥ 3s</div>
+      <div class="dt-vital-title">FCP (First Contentful Paint) <span class="dt-vital-description">最初のコンテンツ表示</span></div>
+      <div class="dt-vital-value" id="dt-fcp-value">-</div>
+      <div class="dt-vital-thresholds">
+        <div class="dt-vital-threshold">Good: &lt; 1.8s</div>
+        <div class="dt-vital-threshold">Needs Improvement: &lt; 3s</div>
+        <div class="dt-vital-threshold">Poor: ≥ 3s</div>
       </div>
     `;
     container.appendChild(fcpCard);
 
     // FID (First Input Delay)
     const fidCard = document.createElement('div');
-    fidCard.className = 'vital-card';
+    fidCard.className = 'dt-vital-card';
     fidCard.innerHTML = `
-      <div class="vital-title">FID (First Input Delay) <span class="vital-description">最初の入力遅延</span></div>
-      <div class="vital-value" id="fid-value">-</div>
-      <div class="vital-thresholds">
-        <div class="vital-threshold">Good: &lt; 100ms</div>
-        <div class="vital-threshold">Needs Improvement: &lt; 300ms</div>
-        <div class="vital-threshold">Poor: ≥ 300ms</div>
+      <div class="dt-vital-title">FID (First Input Delay) <span class="dt-vital-description">最初の入力遅延</span></div>
+      <div class="dt-vital-value" id="dt-fid-value">-</div>
+      <div class="dt-vital-thresholds">
+        <div class="dt-vital-threshold">Good: &lt; 100ms</div>
+        <div class="dt-vital-threshold">Needs Improvement: &lt; 300ms</div>
+        <div class="dt-vital-threshold">Poor: ≥ 300ms</div>
       </div>
     `;
     container.appendChild(fidCard);
 
     // LCP (Largest Contentful Paint)
     const lcpCard = document.createElement('div');
-    lcpCard.className = 'vital-card';
+    lcpCard.className = 'dt-vital-card';
     lcpCard.innerHTML = `
-      <div class="vital-title">LCP (Largest Contentful Paint) <span class="vital-description">最大のコンテンツ表示</span></div>
-      <div class="vital-value" id="lcp-value">-</div>
-      <div class="vital-thresholds">
-        <div class="vital-threshold">Good: &lt; 2.5s</div>
-        <div class="vital-threshold">Needs Improvement: &lt; 4s</div>
-        <div class="vital-threshold">Poor: ≥ 4s</div>
+      <div class="dt-vital-title">LCP (Largest Contentful Paint) <span class="dt-vital-description">最大のコンテンツ表示</span></div>
+      <div class="dt-vital-value" id="dt-lcp-value">-</div>
+      <div class="dt-vital-thresholds">
+        <div class="dt-vital-threshold">Good: &lt; 2.5s</div>
+        <div class="dt-vital-threshold">Needs Improvement: &lt; 4s</div>
+        <div class="dt-vital-threshold">Poor: ≥ 4s</div>
       </div>
     `;
     container.appendChild(lcpCard);
 
     // TTFB (Time to First Byte)
     const ttfbCard = document.createElement('div');
-    ttfbCard.className = 'vital-card';
+    ttfbCard.className = 'dt-vital-card';
     ttfbCard.innerHTML = `
-      <div class="vital-title">TTFB (Time to First Byte) <span class="vital-description">最初のバイト到達時間</span></div>
-      <div class="vital-value" id="ttfb-value">-</div>
-      <div class="vital-thresholds">
-        <div class="vital-threshold">Good: &lt; 800ms</div>
-        <div class="vital-threshold">Needs Improvement: &lt; 1.8s</div>
-        <div class="vital-threshold">Poor: ≥ 1.8s</div>
+      <div class="dt-vital-title">TTFB (Time to First Byte) <span class="dt-vital-description">最初のバイト到達時間</span></div>
+      <div class="dt-vital-value" id="dt-ttfb-value">-</div>
+      <div class="dt-vital-thresholds">
+        <div class="dt-vital-threshold">Good: &lt; 800ms</div>
+        <div class="dt-vital-threshold">Needs Improvement: &lt; 1.8s</div>
+        <div class="dt-vital-threshold">Poor: ≥ 1.8s</div>
       </div>
     `;
     container.appendChild(ttfbCard);
@@ -805,9 +801,9 @@
               vitals.onLCP(updateLCP);
               vitals.onTTFB(updateTTFB);
             }
-            alert('Web Vitalsの測定を開始しました');
+            logMessage('Web Vitalsの測定を開始しました', 'dt-console-info');
           } catch (e) {
-            console.error('Web Vitals error:', e);
+            logMessage('Web Vitals error: ' + e.message, 'dt-console-error');
           }
         }
       });
@@ -839,7 +835,7 @@
     }
 
     function updateVitalDisplay(id, value, goodThreshold, needsImprovementThreshold) {
-      const element = document.getElementById(`${id}-value`);
+      const element = document.getElementById(`dt-${id}-value`);
       if (!element) return;
       
       const displayValue = id === 'ttfb' ? 
@@ -848,16 +844,16 @@
       
       element.textContent = displayValue;
       
-      element.className = 'vital-value';
+      element.className = 'dt-vital-value';
       if (value <= goodThreshold) {
-        element.classList.add('vital-good');
+        element.classList.add('dt-vital-good');
       } else if (value <= needsImprovementThreshold) {
-        element.classList.add('vital-needs-improvement');
+        element.classList.add('dt-vital-needs-improvement');
       } else {
-        element.classList.add('vital-poor');
+        element.classList.add('dt-vital-poor');
       }
       
-      const thresholds = element.parentElement.querySelectorAll('.vital-threshold');
+      const thresholds = element.parentElement.querySelectorAll('.dt-vital-threshold');
       thresholds.forEach((threshold, index) => {
         threshold.classList.remove('active');
         if (
@@ -876,21 +872,21 @@
   // ネットワークパネル作成
   function createNetworkPanel() {
     const panel = document.createElement('div');
-    panel.className = 'devtools-panel';
+    panel.className = 'dt-devtools-panel';
     panel.id = 'network-panel';
 
     const container = document.createElement('div');
-    container.className = 'network-container';
+    container.className = 'dt-network-container';
     panel.appendChild(container);
 
     // リクエストリスト
     const requestsList = document.createElement('div');
-    requestsList.className = 'network-requests';
+    requestsList.className = 'dt-network-requests';
     container.appendChild(requestsList);
 
     // 詳細パネル
     const detailsPanel = document.createElement('div');
-    detailsPanel.className = 'network-details';
+    detailsPanel.className = 'dt-network-details';
     container.appendChild(detailsPanel);
 
     // ネットワークリクエストを監視
@@ -1051,14 +1047,14 @@
     const panel = document.getElementById('network-panel');
     if (!panel || !panel.classList.contains('active')) return;
 
-    const requestsList = panel.querySelector('.network-requests');
-    const detailsPanel = panel.querySelector('.network-details');
+    const requestsList = panel.querySelector('.dt-network-requests');
+    const detailsPanel = panel.querySelector('.dt-network-details');
 
     requestsList.innerHTML = '';
     
     networkRequests.forEach(request => {
       const requestElement = document.createElement('div');
-      requestElement.className = 'network-request';
+      requestElement.className = 'dt-network-request';
       if (selectedRequest && selectedRequest.id === request.id) {
         requestElement.classList.add('selected');
       }
@@ -1070,19 +1066,19 @@
       };
       
       const statusElement = document.createElement('div');
-      statusElement.className = `network-status ${request.status}`;
+      statusElement.className = `dt-network-status ${request.status}`;
       statusElement.textContent = request.status === 'success' ? '✓' : '✕';
       
       const methodElement = document.createElement('div');
-      methodElement.className = 'network-method';
+      methodElement.className = 'dt-network-method';
       methodElement.textContent = request.method;
       
       const urlElement = document.createElement('div');
-      urlElement.className = 'network-url';
+      urlElement.className = 'dt-network-url';
       urlElement.textContent = request.url;
       
       const timeElement = document.createElement('div');
-      timeElement.className = 'network-time';
+      timeElement.className = 'dt-network-time';
       timeElement.textContent = request.duration ? `${Math.round(request.duration)}ms` : '';
       
       requestElement.appendChild(statusElement);
@@ -1099,15 +1095,15 @@
     const panel = document.getElementById('network-panel');
     if (!panel || !selectedRequest) return;
 
-    const detailsPanel = panel.querySelector('.network-details');
+    const detailsPanel = panel.querySelector('.dt-network-details');
     detailsPanel.innerHTML = '';
 
     // 一般情報
     const generalSection = document.createElement('div');
-    generalSection.className = 'network-detail-section';
+    generalSection.className = 'dt-network-detail-section';
     generalSection.innerHTML = `
-      <div class="network-detail-title">一般</div>
-      <div class="network-detail-content">
+      <div class="dt-network-detail-title">一般</div>
+      <div class="dt-network-detail-content">
         <strong>URL:</strong> ${selectedRequest.url}<br>
         <strong>メソッド:</strong> ${selectedRequest.method}<br>
         <strong>ステータス:</strong> ${selectedRequest.response ? selectedRequest.response.status : '-'}<br>
@@ -1119,14 +1115,14 @@
     // リクエストヘッダー
     if (selectedRequest.requestHeaders) {
       const headersSection = document.createElement('div');
-      headersSection.className = 'network-detail-section';
+      headersSection.className = 'dt-network-detail-section';
       
       const headersTitle = document.createElement('div');
-      headersTitle.className = 'network-detail-title';
+      headersTitle.className = 'dt-network-detail-title';
       headersTitle.textContent = 'リクエストヘッダー';
       
       const headersContent = document.createElement('div');
-      headersContent.className = 'network-detail-content';
+      headersContent.className = 'dt-network-detail-content';
       
       if (typeof selectedRequest.requestHeaders === 'object' && !(selectedRequest.requestHeaders instanceof Headers)) {
         Object.entries(selectedRequest.requestHeaders).forEach(([key, value]) => {
@@ -1146,14 +1142,14 @@
     // リクエストボディ
     if (selectedRequest.requestBody) {
       const bodySection = document.createElement('div');
-      bodySection.className = 'network-detail-section';
+      bodySection.className = 'dt-network-detail-section';
       
       const bodyTitle = document.createElement('div');
-      bodyTitle.className = 'network-detail-title';
+      bodyTitle.className = 'dt-network-detail-title';
       bodyTitle.textContent = 'リクエストボディ';
       
       const bodyContent = document.createElement('div');
-      bodyContent.className = 'network-detail-content';
+      bodyContent.className = 'dt-network-detail-content';
       
       try {
         if (typeof selectedRequest.requestBody === 'string') {
@@ -1173,14 +1169,14 @@
     // レスポンス
     if (selectedRequest.response) {
       const responseSection = document.createElement('div');
-      responseSection.className = 'network-detail-section';
+      responseSection.className = 'dt-network-detail-section';
       
       const responseTitle = document.createElement('div');
-      responseTitle.className = 'network-detail-title';
+      responseTitle.className = 'dt-network-detail-title';
       responseTitle.textContent = 'レスポンス';
       
       const responseContent = document.createElement('div');
-      responseContent.className = 'network-detail-content';
+      responseContent.className = 'dt-network-detail-content';
       
       if (selectedRequest.response.body) {
         if (typeof selectedRequest.response.body === 'object') {
@@ -1200,14 +1196,14 @@
     // エラー
     if (selectedRequest.error) {
       const errorSection = document.createElement('div');
-      errorSection.className = 'network-detail-section';
+      errorSection.className = 'dt-network-detail-section';
       
       const errorTitle = document.createElement('div');
-      errorTitle.className = 'network-detail-title';
+      errorTitle.className = 'dt-network-detail-title';
       errorTitle.textContent = 'エラー';
       
       const errorContent = document.createElement('div');
-      errorContent.className = 'network-detail-content';
+      errorContent.className = 'dt-network-detail-content';
       errorContent.textContent = `${selectedRequest.error.name}: ${selectedRequest.error.message}`;
       
       if (selectedRequest.error.stack) {
@@ -1223,20 +1219,20 @@
   // コンテキストメニュー作成
   function createContextMenu() {
     contextMenu = document.createElement('div');
-    contextMenu.className = 'context-menu';
+    contextMenu.className = 'dt-context-menu';
     contextMenu.innerHTML = `
-      <div class="context-menu-item" data-action="edit-html">HTMLとして編集</div>
-      <div class="context-menu-item" data-action="edit-whole-html">HTML全体を編集</div>
-      <div class="context-menu-item" data-action="add-attribute">属性を追加</div>
-      <div class="context-menu-item" data-action="edit-element">要素を編集</div>
-      <div class="context-menu-item" data-action="duplicate">要素を複製</div>
-      <div class="context-menu-item" data-action="remove">要素を削除</div>
-      <div class="context-menu-item" data-action="toggle-visibility">要素を非表示</div>
-      <div class="context-menu-item" data-action="force-state">状態を強制</div>
+      <div class="dt-context-menu-item" data-action="edit-html">HTMLとして編集</div>
+      <div class="dt-context-menu-item" data-action="edit-whole-html">HTML全体を編集</div>
+      <div class="dt-context-menu-item" data-action="add-attribute">属性を追加</div>
+      <div class="dt-context-menu-item" data-action="edit-element">要素を編集</div>
+      <div class="dt-context-menu-item" data-action="duplicate">要素を複製</div>
+      <div class="dt-context-menu-item" data-action="remove">要素を削除</div>
+      <div class="dt-context-menu-item" data-action="toggle-visibility">要素を非表示</div>
+      <div class="dt-context-menu-item" data-action="force-state">状態を強制</div>
     `;
     document.body.appendChild(contextMenu);
 
-    contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
+    contextMenu.querySelectorAll('.dt-context-menu-item').forEach(item => {
       item.addEventListener('click', (e) => {
         const action = e.target.getAttribute('data-action');
         handleContextMenuAction(action);
@@ -1254,7 +1250,7 @@
   // Storageパネル作成
   function createStoragePanel() {
     const panel = document.createElement('div');
-    panel.className = 'devtools-panel';
+    panel.className = 'dt-devtools-panel';
     panel.id = 'storage-panel';
 
     // LocalStorage表示
@@ -1263,11 +1259,11 @@
     panel.appendChild(localStorageTitle);
 
     const localStorageTable = document.createElement('table');
-    localStorageTable.className = 'storage-table';
+    localStorageTable.className = 'dt-storage-table';
     panel.appendChild(localStorageTable);
 
     const addLocalStorageBtn = document.createElement('button');
-    addLocalStorageBtn.className = 'add-btn';
+    addLocalStorageBtn.className = 'dt-add-btn';
     addLocalStorageBtn.textContent = '+ Local Storageに追加';
     addLocalStorageBtn.onclick = () => {
       const key = prompt('キー名を入力');
@@ -1286,11 +1282,11 @@
     panel.appendChild(sessionStorageTitle);
 
     const sessionStorageTable = document.createElement('table');
-    sessionStorageTable.className = 'storage-table';
+    sessionStorageTable.className = 'dt-storage-table';
     panel.appendChild(sessionStorageTable);
 
     const addSessionStorageBtn = document.createElement('button');
-    addSessionStorageBtn.className = 'add-btn';
+    addSessionStorageBtn.className = 'dt-add-btn';
     addSessionStorageBtn.textContent = '+ Session Storageに追加';
     addSessionStorageBtn.onclick = () => {
       const key = prompt('キー名を入力');
@@ -1309,11 +1305,11 @@
     panel.appendChild(cookiesTitle);
 
     const cookiesTable = document.createElement('table');
-    cookiesTable.className = 'storage-table';
+    cookiesTable.className = 'dt-storage-table';
     panel.appendChild(cookiesTable);
 
     const addCookieBtn = document.createElement('button');
-    addCookieBtn.className = 'add-btn';
+    addCookieBtn.className = 'dt-add-btn';
     addCookieBtn.textContent = '+ Cookieに追加';
     addCookieBtn.onclick = () => {
       const name = prompt('Cookie名を入力');
@@ -1354,7 +1350,7 @@
         
         const keyCell = document.createElement('td');
         const keySpan = document.createElement('span');
-        keySpan.className = 'editable';
+        keySpan.className = 'dt-editable';
         keySpan.textContent = key;
         keySpan.onclick = () => {
           const newKey = prompt('新しいキー名を入力', key);
@@ -1368,7 +1364,7 @@
         
         const valueCell = document.createElement('td');
         const valueSpan = document.createElement('span');
-        valueSpan.className = 'editable';
+        valueSpan.className = 'dt-editable';
         valueSpan.textContent = value;
         valueSpan.onclick = () => {
           const newValue = prompt('新しい値を入力', value);
@@ -1380,10 +1376,10 @@
         valueCell.appendChild(valueSpan);
         
         const actionsCell = document.createElement('td');
-        actionsCell.className = 'storage-actions';
+        actionsCell.className = 'dt-storage-actions';
         
         const deleteBtn = document.createElement('button');
-        deleteBtn.className = 'storage-btn';
+        deleteBtn.className = 'dt-storage-btn';
         deleteBtn.textContent = 'Delete';
         deleteBtn.onclick = () => {
           storage.removeItem(key);
@@ -1425,7 +1421,7 @@
         
         const nameCell = document.createElement('td');
         const nameSpan = document.createElement('span');
-        nameSpan.className = 'editable';
+        nameSpan.className = 'dt-editable';
         nameSpan.textContent = decodedName;
         nameSpan.onclick = () => {
           const newName = prompt('新しい名前を入力', decodedName);
@@ -1442,7 +1438,7 @@
         
         const valueCell = document.createElement('td');
         const valueSpan = document.createElement('span');
-        valueSpan.className = 'editable';
+        valueSpan.className = 'dt-editable';
         valueSpan.textContent = decodeURIComponent(value);
         valueSpan.onclick = () => {
           const newValue = prompt('新しい値を入力', decodeURIComponent(value));
@@ -1454,10 +1450,10 @@
         valueCell.appendChild(valueSpan);
         
         const actionsCell = document.createElement('td');
-        actionsCell.className = 'storage-actions';
+        actionsCell.className = 'dt-storage-actions';
         
         const deleteBtn = document.createElement('button');
-        deleteBtn.className = 'storage-btn';
+        deleteBtn.className = 'dt-storage-btn';
         deleteBtn.textContent = 'Delete';
         deleteBtn.onclick = () => {
           document.cookie = `${name.trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
@@ -1559,7 +1555,7 @@
         }
         break;
       case 'edit-element':
-        startInlineEdit(selectedDOMNode.querySelector('.dom-tag'), selectedElement.tagName.toLowerCase(), (newValue) => {
+        startInlineEdit(selectedDOMNode.querySelector('.dt-dom-tag'), selectedElement.tagName.toLowerCase(), (newValue) => {
           const newElement = document.createElement(newValue);
           Array.from(selectedElement.attributes).forEach(attr => {
             newElement.setAttribute(attr.name, attr.value);
@@ -1609,7 +1605,7 @@
     const rect = element.getBoundingClientRect();
     
     const input = document.createElement('input');
-    input.className = 'dom-edit-input';
+    input.className = 'dt-dom-edit-input';
     input.value = initialValue || originalValue;
     input.style.position = 'absolute';
     input.style.left = `${rect.left}px`;
@@ -1670,25 +1666,25 @@
   // Consoleパネル作成
   function createConsolePanel() {
     const panel = document.createElement('div');
-    panel.className = 'devtools-panel';
+    panel.className = 'dt-devtools-panel';
     panel.id = 'console-panel';
 
     const log = document.createElement('div');
-    log.id = 'console-log';
+    log.id = 'dt-console-log';
 
     const input = document.createElement('input');
-    input.className = 'console-input';
+    input.className = 'dt-console-input';
     input.placeholder = 'ここにJavaScriptを入力... (Enterで実行)';
     input.onkeypress = (e) => {
       if (e.key === 'Enter') {
         try {
           const result = eval(e.target.value);
           if (result !== undefined) {
-            logMessage('> ' + e.target.value, 'console-log');
-            logMessage('← ' + formatOutput(result), 'console-log');
+            logMessage('> ' + e.target.value, 'dt-console-log');
+            logMessage('← ' + formatOutput(result), 'dt-console-log');
           }
         } catch (err) {
-          logMessage(err.message, 'console-error');
+          logMessage(err.message, 'dt-console-error');
         }
         e.target.value = '';
       }
@@ -1707,22 +1703,22 @@
 
     console.log = (...args) => {
       originalConsole.log.apply(console, args);
-      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'console-log');
+      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'dt-console-log');
     };
 
     console.error = (...args) => {
       originalConsole.error.apply(console, args);
-      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'console-error');
+      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'dt-console-error');
     };
 
     console.warn = (...args) => {
       originalConsole.warn.apply(console, args);
-      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'console-warn');
+      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'dt-console-warn');
     };
 
     console.info = (...args) => {
       originalConsole.info.apply(console, args);
-      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'console-info');
+      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'dt-console-info');
     };
 
     function logMessage(message, className) {
@@ -1734,23 +1730,23 @@
     }
 
     function formatOutput(output) {
-      if (output === null) return '<span class="json-null">null</span>';
-      if (output === undefined) return '<span class="json-null">undefined</span>';
-      if (typeof output === 'boolean') return `<span class="json-boolean">${output}</span>`;
-      if (typeof output === 'number') return `<span class="json-number">${output}</span>`;
-      if (typeof output === 'string') return `<span class="json-string">"${output}"</span>`;
-      if (typeof output === 'function') return `<span class="json-object">function ${output.name}() { ... }</span>`;
-      if (Array.isArray(output)) return `<span class="json-object">[${output.map(formatOutput).join(', ')}]</span>`;
+      if (output === null) return '<span class="dt-json-null">null</span>';
+      if (output === undefined) return '<span class="dt-json-null">undefined</span>';
+      if (typeof output === 'boolean') return `<span class="dt-json-boolean">${output}</span>`;
+      if (typeof output === 'number') return `<span class="dt-json-number">${output}</span>`;
+      if (typeof output === 'string') return `<span class="dt-json-string">"${output}"</span>`;
+      if (typeof output === 'function') return `<span class="dt-json-object">function ${output.name}() { ... }</span>`;
+      if (Array.isArray(output)) return `<span class="dt-json-object">[${output.map(formatOutput).join(', ')}]</span>`;
       if (typeof output === 'object') {
         try {
-          return `<span class="json-object">${JSON.stringify(output, null, 2)
-            .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
-            .replace(/"([^"]+)"/g, '<span class="json-string">"$1"</span>')
-            .replace(/\b(true|false)\b/g, '<span class="json-boolean">$1</span>')
-            .replace(/\b(null)\b/g, '<span class="json-null">$1</span>')
-            .replace(/\b(\d+)\b/g, '<span class="json-number">$1</span>')}</span>`;
+          return `<span class="dt-json-object">${JSON.stringify(output, null, 2)
+            .replace(/"([^"]+)":/g, '<span class="dt-json-key">"$1"</span>:')
+            .replace(/"([^"]+)"/g, '<span class="dt-json-string">"$1"</span>')
+            .replace(/\b(true|false)\b/g, '<span class="dt-json-boolean">$1</span>')
+            .replace(/\b(null)\b/g, '<span class="dt-json-null">$1</span>')
+            .replace(/\b(\d+)\b/g, '<span class="dt-json-number">$1</span>')}</span>`;
         } catch (e) {
-          return `<span class="json-object">${output.toString()}</span>`;
+          return `<span class="dt-json-object">${output.toString()}</span>`;
         }
       }
       return output;
@@ -1762,19 +1758,19 @@
   // Elementsパネル作成
   function createElementsPanel() {
     const panel = document.createElement('div');
-    panel.className = 'devtools-panel';
+    panel.className = 'dt-devtools-panel';
     panel.id = 'elements-panel';
 
     const container = document.createElement('div');
-    container.className = 'elements-container';
+    container.className = 'dt-elements-container';
 
     const tree = document.createElement('div');
-    tree.className = 'dom-tree';
-    tree.id = 'dom-tree';
+    tree.className = 'dt-dom-tree';
+    tree.id = 'dt-dom-tree';
 
     const cssPanel = document.createElement('div');
-    cssPanel.className = 'css-panel';
-    cssPanel.id = 'css-panel';
+    cssPanel.className = 'dt-css-panel';
+    cssPanel.id = 'dt-css-panel';
 
     container.appendChild(tree);
     container.appendChild(cssPanel);
@@ -1782,17 +1778,17 @@
 
     // CSSパネル更新関数
     function updateCSSPanel(element) {
-      const cssPanel = document.getElementById('css-panel');
+      const cssPanel = document.getElementById('dt-css-panel');
       cssPanel.innerHTML = '';
       
       if (!element) return;
       
       if (element.style.length > 0) {
         const inlineRule = document.createElement('div');
-        inlineRule.className = 'css-rule';
+        inlineRule.className = 'dt-css-rule';
         
         const selector = document.createElement('div');
-        selector.className = 'css-selector';
+        selector.className = 'dt-css-selector';
         selector.textContent = 'インラインスタイル';
         inlineRule.appendChild(selector);
         
@@ -1801,20 +1797,20 @@
           const propValue = element.style[propName];
           
           const propDiv = document.createElement('div');
-          propDiv.className = 'css-property';
+          propDiv.className = 'dt-css-property';
           
           const nameSpan = document.createElement('span');
-          nameSpan.className = 'css-property-name editable';
+          nameSpan.className = 'dt-css-property-name dt-editable';
           nameSpan.textContent = propName;
           nameSpan.onclick = () => editCSSProperty(element, propName, 'style');
           
           const valueSpan = document.createElement('span');
-          valueSpan.className = 'css-property-value editable';
+          valueSpan.className = 'dt-css-property-value dt-editable';
           valueSpan.textContent = propValue;
           valueSpan.onclick = () => editCSSProperty(element, propName, 'style');
           
           const toggleSpan = document.createElement('span');
-          toggleSpan.className = 'css-toggle';
+          toggleSpan.className = 'dt-css-toggle';
           toggleSpan.textContent = '×';
           toggleSpan.title = 'プロパティを無効化';
           toggleSpan.onclick = () => {
@@ -1833,10 +1829,10 @@
       
       const computedStyles = window.getComputedStyle(element);
       const computedRule = document.createElement('div');
-      computedRule.className = 'css-rule';
+      computedRule.className = 'dt-css-rule';
       
       const computedSelector = document.createElement('div');
-      computedSelector.className = 'css-selector';
+      computedSelector.className = 'dt-css-selector';
       computedSelector.textContent = '計算されたスタイル';
       computedRule.appendChild(computedSelector);
       
@@ -1849,14 +1845,14 @@
         const value = computedStyles[prop];
         
         const propDiv = document.createElement('div');
-        propDiv.className = 'css-property';
+        propDiv.className = 'dt-css-property';
         
         const nameSpan = document.createElement('span');
-        nameSpan.className = 'css-property-name';
+        nameSpan.className = 'dt-css-property-name';
         nameSpan.textContent = prop;
         
         const valueSpan = document.createElement('span');
-        valueSpan.className = 'css-property-value';
+        valueSpan.className = 'dt-css-property-value';
         valueSpan.textContent = value;
         
         propDiv.appendChild(nameSpan);
@@ -1871,9 +1867,9 @@
     function buildDOMTree(node, parentElement, depth = 0, isRoot = false) {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = document.createElement('div');
-        element.className = 'dom-node';
+        element.className = 'dt-dom-node';
         element.style.marginLeft = `${depth * 15}px`;
-        element.dataset.elementId = node.id || Math.random().toString(36).substr(2, 9);
+        element.dataset.dtElementId = node.id || Math.random().toString(36).substr(2, 9);
 
         // 右クリックイベント
         element.oncontextmenu = (e) => {
@@ -1881,7 +1877,7 @@
           selectedElement = node;
           selectedDOMNode = element;
           
-          document.querySelectorAll('.dom-node').forEach(el => el.classList.remove('selected'));
+          document.querySelectorAll('.dt-dom-node').forEach(el => el.classList.remove('selected'));
           element.classList.add('selected');
           
           if (node !== document.documentElement) {
@@ -1895,13 +1891,13 @@
 
         // 左クリックで選択
         element.onclick = (e) => {
-          if (e.target.classList.contains('dom-toggle')) return;
+          if (e.target.classList.contains('dt-dom-toggle')) return;
           
           e.stopPropagation();
           selectedElement = node;
           selectedDOMNode = element;
           
-          document.querySelectorAll('.dom-node').forEach(el => el.classList.remove('selected'));
+          document.querySelectorAll('.dt-dom-node').forEach(el => el.classList.remove('selected'));
           element.classList.add('selected');
           
           updateCSSPanel(node);
@@ -1913,10 +1909,10 @@
         
         if (hasChildren) {
           const toggle = document.createElement('div');
-          toggle.className = 'dom-toggle';
+          toggle.className = 'dt-dom-toggle';
           toggle.onclick = (e) => {
             e.stopPropagation();
-            const children = element.querySelector('.dom-children');
+            const children = element.querySelector('.dt-dom-children');
             if (children) {
               if (children.style.maxHeight === '0px') {
                 children.style.maxHeight = children.scrollHeight + 'px';
@@ -1932,11 +1928,11 @@
 
         // タグ名（HTML要素は編集不可）
         const tag = document.createElement('span');
-        tag.className = 'dom-tag';
+        tag.className = 'dt-dom-tag';
         tag.textContent = `<${node.tagName.toLowerCase()}`;
         
         if (node !== document.documentElement) {
-          tag.classList.add('editable');
+          tag.classList.add('dt-editable');
           tag.onclick = (e) => {
             e.stopPropagation();
             startInlineEdit(tag, node.tagName.toLowerCase(), (newValue) => {
@@ -1957,11 +1953,11 @@
         // 属性（HTML要素は編集不可）
         Array.from(node.attributes).forEach(attr => {
           const attrSpan = document.createElement('span');
-          attrSpan.className = 'dom-attr';
+          attrSpan.className = 'dt-dom-attr';
           attrSpan.textContent = ` ${attr.name}="${attr.value}"`;
           
           if (node !== document.documentElement) {
-            attrSpan.classList.add('editable');
+            attrSpan.classList.add('dt-editable');
             attrSpan.onclick = (e) => {
               e.stopPropagation();
               startInlineEdit(attrSpan, attr.value, (newValue) => {
@@ -1978,7 +1974,7 @@
 
         if (hasChildren) {
           const childrenContainer = document.createElement('div');
-          childrenContainer.className = 'dom-children';
+          childrenContainer.className = 'dt-dom-children';
           childrenContainer.style.maxHeight = isRoot ? 'none' : '0px';
           
           node.childNodes.forEach(child => {
@@ -1988,7 +1984,7 @@
           if (node.tagName.toLowerCase() !== 'br') {
             const closeTag = document.createElement('div');
             closeTag.style.marginLeft = `${depth * 15}px`;
-            closeTag.innerHTML = `<span class="dom-tag">&lt;/${node.tagName.toLowerCase()}&gt;</span>`;
+            closeTag.innerHTML = `<span class="dt-dom-tag">&lt;/${node.tagName.toLowerCase()}&gt;</span>`;
             childrenContainer.appendChild(closeTag);
           }
           
@@ -1999,7 +1995,7 @@
       } else if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
         const text = document.createElement('div');
         text.style.marginLeft = `${depth * 15}px`;
-        text.className = 'dom-text editable';
+        text.className = 'dt-dom-text dt-editable';
         text.textContent = `"${node.textContent.trim()}"`;
         text.onclick = (e) => {
           e.stopPropagation();
@@ -2034,17 +2030,17 @@
 
     // refreshElementsPanel関数の定義
     refreshElementsPanel = function() {
-      let tree = document.getElementById('dom-tree');
+      let tree = document.getElementById('dt-dom-tree');
       
       if (!tree) {
         const panel = document.getElementById('elements-panel');
         if (panel) {
-          const container = panel.querySelector('.elements-container');
+          const container = panel.querySelector('.dt-elements-container');
           if (container) {
             tree = document.createElement('div');
-            tree.className = 'dom-tree';
-            tree.id = 'dom-tree';
-            container.insertBefore(tree, container.querySelector('.css-panel'));
+            tree.className = 'dt-dom-tree';
+            tree.id = 'dt-dom-tree';
+            container.insertBefore(tree, container.querySelector('.dt-css-panel'));
           }
         }
       }
@@ -2056,10 +2052,10 @@
       
       if (selectedElement) {
         const elementId = selectedElement.id || Array.from(selectedElement.attributes)
-          .find(attr => attr.name.startsWith('data-element-id'))?.value;
+          .find(attr => attr.name.startsWith('data-dt-element-id'))?.value;
         
         if (elementId) {
-          const node = document.querySelector(`[data-element-id="${elementId}"]`);
+          const node = document.querySelector(`[data-dt-element-id="${elementId}"]`);
           if (node) {
             node.classList.add('selected');
             updateCSSPanel(selectedElement);
@@ -2081,7 +2077,7 @@
 
   // 開発者ツール表示/非表示
   function toggleDevTools() {
-    const container = document.getElementById('devtools-container');
+    const container = document.getElementById('dt-devtools-container');
     if (container.style.display === 'none') {
       container.style.display = 'flex';
     } else {
@@ -2092,13 +2088,13 @@
   // 開くボタン作成
   function createOpenButton() {
     const button = document.createElement('button');
-    button.id = 'open-devtools-btn';
+    button.id = 'dt-open-devtools-btn';
     button.textContent = '開発者ツールを開く';
     button.style.position = 'fixed';
     button.style.bottom = '10px';
     button.style.right = '10px';
     button.style.padding = '8px 16px';
-    button.style.background = 'var(--primary-color)';
+    button.style.background = 'var(--dt-primary-color)';
     button.style.color = '#000';
     button.style.border = 'none';
     button.style.borderRadius = '4px';
@@ -2111,9 +2107,26 @@
 
   // 初期化
   document.addEventListener('DOMContentLoaded', function() {
-    createDevTools();
+    // 最小限のUIだけ先に表示
     createOpenButton();
-    console.log('開発者ツールが初期化されました');
-    console.log('このコンソールでJavaScriptを実行できます');
+    
+    // メインのツールは遅延読み込み
+    setTimeout(() => {
+      createDevTools();
+      logMessage('開発者ツールが初期化されました', 'dt-console-info');
+      logMessage('このコンソールでJavaScriptを実行できます', 'dt-console-info');
+    }, 1000);
   });
+
+  // ログメッセージ用ヘルパー関数
+  function logMessage(message, className) {
+    const log = document.getElementById('dt-console-log');
+    if (!log) return;
+    
+    const line = document.createElement('div');
+    line.className = className;
+    line.innerHTML = message;
+    log.appendChild(line);
+    log.scrollTop = log.scrollHeight;
+  }
 })();