Update dev-tools.js

dev-tools.js

@@ -1,134 +1,101 @@
 (function() {
   // グローバル変数宣言
-  let contextMenu = null;
-  let selectedElement = null;
-  let selectedDOMNode = null;
-  let activeEditElement = null;
-  let networkRequests = [];
-  let selectedRequest = null;
-  let vitalsData = {
-    CLS: null,
-    FCP: null,
-    FID: null,
-    LCP: null,
-    TTFB: null
-  };
-  let observer = null;
-  let refreshElementsPanel = null;
-
-  // Web Vitalsスクリプトを動的に読み込み
-  const loadWebVitals = () => {
-    return new Promise((resolve) => {
-      if (window.webVitals) {
-        resolve();
-        return;
+  let dtContextMenu = null;
+  let dtSelectedElement = null;
+  let dtSelectedDOMNode = null;
+  let dtActiveEditElement = null;
+  let dtNetworkRequests = [];
+  let dtSelectedRequest = null;
+  let dtObserver = null;
+  let dtRefreshElementsPanel = null;
+
+  // DOM変更を監視するMutationObserver (最適化版)
+  const setupMutationObserver = () => {
+    if (dtObserver) dtObserver.disconnect();
+    
+    dtObserver = new MutationObserver(() => {
+      if (dtRefreshElementsPanel) {
+        dtRefreshElementsPanel();
       }
-      
-      const webVitalsScript = document.createElement('script');
-      webVitalsScript.src = 'https://unpkg.com/[email protected]/dist/web-vitals.iife.js';
-      webVitalsScript.onload = resolve;
-      document.head.appendChild(webVitalsScript);
+    });
+
+    dtObserver.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: false,
+      characterData: false
     });
   };
 
-  // スタイルの動的追加 (ダークテーマ)
+  // スタイルの追加 (すべてのクラスにdt-プレフィックス)
   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-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-bg-color);
+  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;
@@ -137,45 +104,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;
@@ -183,117 +150,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);
@@ -302,43 +269,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;
@@ -347,18 +314,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;
@@ -368,47 +335,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%;
@@ -419,51 +386,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;
@@ -471,183 +438,107 @@
   overflow-y: auto;
 }
 
-/* Web Vitals スタイル */
-.vitals-container {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.vital-card {
-  background: var(--tab-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 5px;
-  padding: 15px;
-}
-
-.vital-title {
-  font-weight: bold;
-  margin-bottom: 10px;
-  color: var(--primary-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.vital-value {
-  font-size: 24px;
-  font-weight: bold;
-  margin: 10px 0;
-}
-
-.vital-good {
-  color: var(--success-color);
-}
-
-.vital-needs-improvement {
-  color: var(--warning-color);
-}
-
-.vital-poor {
-  color: var(--error-color);
-}
-
-.vital-description {
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.vital-thresholds {
-  display: flex;
-  margin-top: 10px;
-  font-size: 12px;
-}
-
-.vital-threshold {
-  flex: 1;
-  text-align: center;
-  padding: 5px;
-  border-radius: 3px;
-}
-
-.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);
+}
+
+.dt-json-string {
+  color: var(--dt-json-string);
 }
 
-.json-string {
-  color: var(--json-string);
+.dt-json-number {
+  color: var(--dt-json-number);
 }
 
-.json-number {
-  color: var(--json-number);
+.dt-json-boolean {
+  color: var(--dt-json-boolean);
 }
 
-.json-boolean {
-  color: var(--json-boolean);
+.dt-json-null {
+  color: var(--dt-json-null);
 }
 
-.json-null {
-  color: var(--json-null);
+/* CSS変数定義 */
+: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;
 }
   `;
   document.head.appendChild(style);
 
-  // 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
-    });
-  };
-
-  // ノードをハイライト表示
-  function highlightNode(node) {
-    const elementId = node.id || Math.random().toString(36).substr(2, 9);
-    node.setAttribute('data-element-id', elementId);
-    
-    setTimeout(() => {
-      const domNode = document.querySelector(`[data-element-id="${elementId}"]`);
-      if (domNode) {
-        domNode.classList.add('highlight');
-        setTimeout(() => {
-          domNode.classList.remove('highlight');
-        }, 1500);
-      }
-    }, 100);
-  }
-
   // 開発者ツールのメイン関数
   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');
     const networkTab = createTab('Network', 'network');
     const storageTab = createTab('Storage', 'storage');
-    const vitalsTab = createTab('Web Vitals', 'vitals');
 
     tabs.appendChild(consoleTab);
     tabs.appendChild(elementsTab);
     tabs.appendChild(networkTab);
     tabs.appendChild(storageTab);
-    tabs.appendChild(vitalsTab);
 
     const closeBtn = document.createElement('button');
-    closeBtn.className = 'devtools-close';
+    closeBtn.className = 'dt-devtools-close';
     closeBtn.textContent = '×';
     closeBtn.onclick = toggleDevTools;
 
@@ -656,19 +547,17 @@
 
     // コンテンツ部分
     const content = document.createElement('div');
-    content.className = 'devtools-content';
+    content.className = 'dt-devtools-content';
 
     const consolePanel = createConsolePanel();
     const elementsPanel = createElementsPanel();
     const networkPanel = createNetworkPanel();
     const storagePanel = createStoragePanel();
-    const vitalsPanel = createVitalsPanel();
 
     content.appendChild(consolePanel);
     content.appendChild(elementsPanel);
     content.appendChild(networkPanel);
     content.appendChild(storagePanel);
-    content.appendChild(vitalsPanel);
 
     container.appendChild(header);
     container.appendChild(content);
@@ -681,11 +570,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');
         
@@ -699,188 +588,24 @@
     elementsTab.click();
   };
 
-  // Web Vitalsパネル���成
-  function createVitalsPanel() {
-    const panel = document.createElement('div');
-    panel.className = 'devtools-panel';
-    panel.id = 'vitals-panel';
-
-    const container = document.createElement('div');
-    container.className = 'vitals-container';
-    panel.appendChild(container);
-
-    // CLS (Cumulative Layout Shift)
-    const clsCard = document.createElement('div');
-    clsCard.className = '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>
-    `;
-    container.appendChild(clsCard);
-
-    // FCP (First Contentful Paint)
-    const fcpCard = document.createElement('div');
-    fcpCard.className = '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>
-    `;
-    container.appendChild(fcpCard);
-
-    // FID (First Input Delay)
-    const fidCard = document.createElement('div');
-    fidCard.className = '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>
-    `;
-    container.appendChild(fidCard);
-
-    // LCP (Largest Contentful Paint)
-    const lcpCard = document.createElement('div');
-    lcpCard.className = '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>
-    `;
-    container.appendChild(lcpCard);
-
-    // TTFB (Time to First Byte)
-    const ttfbCard = document.createElement('div');
-    ttfbCard.className = '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>
-    `;
-    container.appendChild(ttfbCard);
-
-    // Web Vitalsの計測を開始
-    loadWebVitals().then(() => {
-      if (window.webVitals) {
-        try {
-          const vitals = window.webVitals;
-          if (vitals.getCLS) {
-            vitals.getCLS(updateCLS);
-            vitals.getFCP(updateFCP);
-            vitals.getFID(updateFID);
-            vitals.getLCP(updateLCP);
-            vitals.getTTFB(updateTTFB);
-          } else if (vitals.onCLS) {
-            vitals.onCLS(updateCLS);
-            vitals.onFCP(updateFCP);
-            vitals.onFID(updateFID);
-            vitals.onLCP(updateLCP);
-            vitals.onTTFB(updateTTFB);
-          }
-        } catch (e) {
-          console.error('Web Vitals error:', e);
-        }
-      }
-    });
-
-    function updateCLS(metric) {
-      vitalsData.CLS = metric.value;
-      updateVitalDisplay('cls', metric.value, 0.1, 0.25);
-    }
-
-    function updateFCP(metric) {
-      vitalsData.FCP = metric.value;
-      updateVitalDisplay('fcp', metric.value, 1800, 3000);
-    }
-
-    function updateFID(metric) {
-      vitalsData.FID = metric.value;
-      updateVitalDisplay('fid', metric.value, 100, 300);
-    }
-
-    function updateLCP(metric) {
-      vitalsData.LCP = metric.value;
-      updateVitalDisplay('lcp', metric.value, 2500, 4000);
-    }
-
-    function updateTTFB(metric) {
-      vitalsData.TTFB = metric.value;
-      updateVitalDisplay('ttfb', metric.value, 800, 1800);
-    }
-
-    function updateVitalDisplay(id, value, goodThreshold, needsImprovementThreshold) {
-      const element = document.getElementById(`${id}-value`);
-      if (!element) return;
-      
-      const displayValue = id === 'ttfb' ? 
-        `${Math.round(value)}ms` : 
-        `${value.toFixed(2)}${id === 'cls' ? '' : 's'}`;
-      
-      element.textContent = displayValue;
-      
-      element.className = 'vital-value';
-      if (value <= goodThreshold) {
-        element.classList.add('vital-good');
-      } else if (value <= needsImprovementThreshold) {
-        element.classList.add('vital-needs-improvement');
-      } else {
-        element.classList.add('vital-poor');
-      }
-      
-      const thresholds = element.parentElement.querySelectorAll('.vital-threshold');
-      thresholds.forEach((threshold, index) => {
-        threshold.classList.remove('active');
-        if (
-          (index === 0 && value <= goodThreshold) ||
-          (index === 1 && value > goodThreshold && value <= needsImprovementThreshold) ||
-          (index === 2 && value > needsImprovementThreshold)
-        ) {
-          threshold.classList.add('active');
-        }
-      });
-    }
-
-    return panel;
-  }
-
   // ネットワークパネル作成
   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);
 
     // ネットワークリクエストを監視
@@ -912,7 +637,7 @@
         error: null
       };
 
-      networkRequests.push(requestData);
+      dtNetworkRequests.push(requestData);
       renderNetworkRequests();
 
       try {
@@ -989,7 +714,7 @@
         error: null
       };
 
-      networkRequests.push(requestData);
+      dtNetworkRequests.push(requestData);
       renderNetworkRequests();
 
       this.addEventListener('load', function() {
@@ -1041,38 +766,38 @@
     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 => {
+    dtNetworkRequests.forEach(request => {
       const requestElement = document.createElement('div');
-      requestElement.className = 'network-request';
-      if (selectedRequest && selectedRequest.id === request.id) {
+      requestElement.className = 'dt-network-request';
+      if (dtSelectedRequest && dtSelectedRequest.id === request.id) {
         requestElement.classList.add('selected');
       }
       
       requestElement.onclick = () => {
-        selectedRequest = request;
+        dtSelectedRequest = request;
         renderNetworkRequests();
         renderNetworkDetails();
       };
       
       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);
@@ -1087,43 +812,43 @@
   // ネットワークリクエストの詳細を表示
   function renderNetworkDetails() {
     const panel = document.getElementById('network-panel');
-    if (!panel || !selectedRequest) return;
+    if (!panel || !dtSelectedRequest) 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">
-        <strong>URL:</strong> ${selectedRequest.url}<br>
-        <strong>メソッド:</strong> ${selectedRequest.method}<br>
-        <strong>ステータス:</strong> ${selectedRequest.response ? selectedRequest.response.status : '-'}<br>
-        <strong>時間:</strong> ${selectedRequest.duration ? Math.round(selectedRequest.duration) + 'ms' : '-'}
+      <div class="dt-network-detail-title">一般</div>
+      <div class="dt-network-detail-content">
+        <strong>URL:</strong> ${dtSelectedRequest.url}<br>
+        <strong>メソッド:</strong> ${dtSelectedRequest.method}<br>
+        <strong>ステータス:</strong> ${dtSelectedRequest.response ? dtSelectedRequest.response.status : '-'}<br>
+        <strong>時間:</strong> ${dtSelectedRequest.duration ? Math.round(dtSelectedRequest.duration) + 'ms' : '-'}
       </div>
     `;
     detailsPanel.appendChild(generalSection);
 
     // リクエストヘッダー
-    if (selectedRequest.requestHeaders) {
+    if (dtSelectedRequest.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]) => {
+      if (typeof dtSelectedRequest.requestHeaders === 'object' && !(dtSelectedRequest.requestHeaders instanceof Headers)) {
+        Object.entries(dtSelectedRequest.requestHeaders).forEach(([key, value]) => {
           headersContent.innerHTML += `<strong>${key}:</strong> ${value}<br>`;
         });
-      } else if (selectedRequest.requestHeaders instanceof Headers) {
-        selectedRequest.requestHeaders.forEach((value, key) => {
+      } else if (dtSelectedRequest.requestHeaders instanceof Headers) {
+        dtSelectedRequest.requestHeaders.forEach((value, key) => {
           headersContent.innerHTML += `<strong>${key}:</strong> ${value}<br>`;
         });
       }
@@ -1134,22 +859,22 @@
     }
 
     // リクエストボディ
-    if (selectedRequest.requestBody) {
+    if (dtSelectedRequest.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') {
-          bodyContent.textContent = selectedRequest.requestBody;
-        } else if (typeof selectedRequest.requestBody === 'object') {
-          bodyContent.textContent = JSON.stringify(selectedRequest.requestBody, null, 2);
+        if (typeof dtSelectedRequest.requestBody === 'string') {
+          bodyContent.textContent = dtSelectedRequest.requestBody;
+        } else if (typeof dtSelectedRequest.requestBody === 'object') {
+          bodyContent.textContent = JSON.stringify(dtSelectedRequest.requestBody, null, 2);
         }
       } catch (e) {
         bodyContent.textContent = 'ボディを表示できません';
@@ -1161,22 +886,22 @@
     }
 
     // レスポンス
-    if (selectedRequest.response) {
+    if (dtSelectedRequest.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') {
-          responseContent.textContent = JSON.stringify(selectedRequest.response.body, null, 2);
+      if (dtSelectedRequest.response.body) {
+        if (typeof dtSelectedRequest.response.body === 'object') {
+          responseContent.textContent = JSON.stringify(dtSelectedRequest.response.body, null, 2);
         } else {
-          responseContent.textContent = selectedRequest.response.body;
+          responseContent.textContent = dtSelectedRequest.response.body;
         }
       } else {
         responseContent.textContent = 'レスポンスボディがありません';
@@ -1188,20 +913,20 @@
     }
 
     // エラー
-    if (selectedRequest.error) {
+    if (dtSelectedRequest.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.textContent = `${selectedRequest.error.name}: ${selectedRequest.error.message}`;
+      errorContent.className = 'dt-network-detail-content';
+      errorContent.textContent = `${dtSelectedRequest.error.name}: ${dtSelectedRequest.error.message}`;
       
-      if (selectedRequest.error.stack) {
-        errorContent.innerHTML += `<br><br>${selectedRequest.error.stack.replace(/\n/g, '<br>')}`;
+      if (dtSelectedRequest.error.stack) {
+        errorContent.innerHTML += `<br><br>${dtSelectedRequest.error.stack.replace(/\n/g, '<br>')}`;
       }
       
       errorSection.appendChild(errorTitle);
@@ -1212,30 +937,31 @@
 
   // コンテキストメニュー作成
   function createContextMenu() {
-    contextMenu = document.createElement('div');
-    contextMenu.className = 'context-menu';
-    contextMenu.innerHTML = `
-      <div class="context-menu-item" data-action="edit-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>
+    dtContextMenu = document.createElement('div');
+    dtContextMenu.className = 'dt-context-menu';
+    dtContextMenu.innerHTML = `
+      <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);
+    document.body.appendChild(dtContextMenu);
 
-    contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
+    dtContextMenu.querySelectorAll('.dt-context-menu-item').forEach(item => {
       item.addEventListener('click', (e) => {
         const action = e.target.getAttribute('data-action');
         handleContextMenuAction(action);
-        contextMenu.style.display = 'none';
+        dtContextMenu.style.display = 'none';
       });
     });
 
     document.addEventListener('click', (e) => {
-      if (e.target !== contextMenu && !contextMenu.contains(e.target)) {
-        contextMenu.style.display = 'none';
+      if (e.target !== dtContextMenu && !dtContextMenu.contains(e.target)) {
+        dtContextMenu.style.display = 'none';
       }
     });
   }
@@ -1243,7 +969,7 @@
   // Storageパネル作成
   function createStoragePanel() {
     const panel = document.createElement('div');
-    panel.className = 'devtools-panel';
+    panel.className = 'dt-devtools-panel';
     panel.id = 'storage-panel';
 
     // LocalStorage表示
@@ -1252,11 +978,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('キー名を入力');
@@ -1275,11 +1001,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('キー名を入力');
@@ -1298,11 +1024,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名を入力');
@@ -1343,7 +1069,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);
@@ -1357,7 +1083,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);
@@ -1369,10 +1095,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);
@@ -1414,7 +1140,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);
@@ -1431,7 +1157,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));
@@ -1443,10 +1169,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=/`;
@@ -1471,69 +1197,120 @@
 
   // コンテキストメニューアクション処理
   function handleContextMenuAction(action) {
-    if (!selectedElement) return;
+    if (!dtSelectedElement) return;
 
     switch (action) {
       case 'edit-html':
-        if (selectedElement === document.documentElement) {
+        if (dtSelectedElement === document.documentElement) {
           alert('ルートHTML要素は直接編集できません');
           return;
         }
-        startInlineEdit(selectedDOMNode, selectedElement.outerHTML, (newValue) => {
+        startInlineEdit(dtSelectedDOMNode, dtSelectedElement.outerHTML, (newValue) => {
           try {
-            selectedElement.outerHTML = newValue;
-            refreshElementsPanel();
+            dtSelectedElement.outerHTML = newValue;
+            dtRefreshElementsPanel();
           } catch (e) {
             alert('この要素は編集できません: ' + e.message);
           }
         });
         break;
+      case 'edit-whole-html':
+        const htmlContent = document.documentElement.outerHTML;
+        const textarea = document.createElement('textarea');
+        textarea.style.width = '100%';
+        textarea.style.height = '300px';
+        textarea.value = htmlContent;
+        
+        const modal = document.createElement('div');
+        modal.style.position = 'fixed';
+        modal.style.top = '0';
+        modal.style.left = '0';
+        modal.style.width = '100%';
+        modal.style.height = '100%';
+        modal.style.backgroundColor = 'rgba(0,0,0,0.8)';
+        modal.style.zIndex = '10000';
+        modal.style.display = 'flex';
+        modal.style.flexDirection = 'column';
+        modal.style.padding = '20px';
+        modal.style.boxSizing = 'border-box';
+        
+        const buttonContainer = document.createElement('div');
+        buttonContainer.style.marginTop = '10px';
+        buttonContainer.style.display = 'flex';
+        buttonContainer.style.gap = '10px';
+        
+        const saveButton = document.createElement('button');
+        saveButton.textContent = '保存';
+        saveButton.onclick = () => {
+          try {
+            document.documentElement.innerHTML = textarea.value;
+            modal.remove();
+            dtRefreshElementsPanel();
+          } catch (e) {
+            alert('HTMLの解析に失敗しました: ' + e.message);
+          }
+        };
+        
+        const cancelButton = document.createElement('button');
+        cancelButton.textContent = 'キャンセル';
+        cancelButton.onclick = () => {
+          modal.remove();
+        };
+        
+        buttonContainer.appendChild(saveButton);
+        buttonContainer.appendChild(cancelButton);
+        
+        modal.appendChild(textarea);
+        modal.appendChild(buttonContainer);
+        
+        document.body.appendChild(modal);
+        break;
       case 'add-attribute':
         const attrName = prompt('属性名を入力');
         if (attrName) {
           const attrValue = prompt('属性値を入力');
-          selectedElement.setAttribute(attrName, attrValue || '');
-          refreshElementsPanel();
+          dtSelectedElement.setAttribute(attrName, attrValue || '');
+          dtRefreshElementsPanel();
         }
         break;
       case 'edit-element':
-        startInlineEdit(selectedDOMNode.querySelector('.dom-tag'), selectedElement.tagName.toLowerCase(), (newValue) => {
+        startInlineEdit(dtSelectedDOMNode.querySelector('.dt-dom-tag'), dtSelectedElement.tagName.toLowerCase(), (newValue) => {
           const newElement = document.createElement(newValue);
-          Array.from(selectedElement.attributes).forEach(attr => {
+          Array.from(dtSelectedElement.attributes).forEach(attr => {
             newElement.setAttribute(attr.name, attr.value);
           });
-          newElement.innerHTML = selectedElement.innerHTML;
-          selectedElement.parentNode.replaceChild(newElement, selectedElement);
-          selectedElement = newElement;
-          refreshElementsPanel();
+          newElement.innerHTML = dtSelectedElement.innerHTML;
+          dtSelectedElement.parentNode.replaceChild(newElement, dtSelectedElement);
+          dtSelectedElement = newElement;
+          dtRefreshElementsPanel();
         });
         break;
       case 'duplicate':
-        const clone = selectedElement.cloneNode(true);
-        selectedElement.parentNode.insertBefore(clone, selectedElement.nextSibling);
-        refreshElementsPanel();
+        const clone = dtSelectedElement.cloneNode(true);
+        dtSelectedElement.parentNode.insertBefore(clone, dtSelectedElement.nextSibling);
+        dtRefreshElementsPanel();
         break;
       case 'remove':
         if (confirm('要素を削除しますか？')) {
-          selectedElement.parentNode.removeChild(selectedElement);
-          refreshElementsPanel();
+          dtSelectedElement.parentNode.removeChild(dtSelectedElement);
+          dtRefreshElementsPanel();
         }
         break;
       case 'toggle-visibility':
-        if (selectedElement.style.display === 'none') {
-          selectedElement.style.display = '';
+        if (dtSelectedElement.style.display === 'none') {
+          dtSelectedElement.style.display = '';
         } else {
-          selectedElement.style.display = 'none';
+          dtSelectedElement.style.display = 'none';
         }
-        refreshElementsPanel();
+        dtRefreshElementsPanel();
         break;
       case 'force-state':
         const state = prompt('強制する状態を入力 (例: hover, active, focus)', 'hover');
         if (state) {
-          selectedElement.classList.remove('force-hover', 'force-active', 'force-focus', 
+          dtSelectedElement.classList.remove('force-hover', 'force-active', 'force-focus', 
                                         'force-focus-within', 'force-focus-visible', 'force-target');
-          selectedElement.classList.add(`force-${state}`);
-          refreshElementsPanel();
+          dtSelectedElement.classList.add(`force-${state}`);
+          dtRefreshElementsPanel();
         }
         break;
     }
@@ -1541,13 +1318,13 @@
 
   // インライン編集関数
   function startInlineEdit(element, initialValue, callback) {
-    if (activeEditElement) return;
+    if (dtActiveEditElement) return;
     
     const originalValue = element.textContent;
     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`;
@@ -1558,7 +1335,7 @@
     input.focus();
     input.select();
     
-    activeEditElement = {
+    dtActiveEditElement = {
       element: element,
       input: input,
       callback: callback
@@ -1601,32 +1378,32 @@
     function cleanup() {
       document.removeEventListener('click', clickOutsideHandler);
       input.remove();
-      activeEditElement = null;
+      dtActiveEditElement = null;
     }
   }
 
   // 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 = '';
       }
@@ -1645,22 +1422,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) {
@@ -1672,23 +1449,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;
@@ -1700,19 +1477,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);
@@ -1720,17 +1497,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);
         
@@ -1739,20 +1516,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 = () => {
@@ -1771,10 +1548,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);
       
@@ -1787,14 +1564,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);
@@ -1809,23 +1586,23 @@
     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.oncontextmenu = (e) => {
           e.preventDefault();
-          selectedElement = node;
-          selectedDOMNode = element;
+          dtSelectedElement = node;
+          dtSelectedDOMNode = 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) {
-            contextMenu.style.display = 'block';
-            contextMenu.style.left = `${e.pageX}px`;
-            contextMenu.style.top = `${e.pageY}px`;
+            dtContextMenu.style.display = 'block';
+            dtContextMenu.style.left = `${e.pageX}px`;
+            dtContextMenu.style.top = `${e.pageY}px`;
           }
           
           updateCSSPanel(node);
@@ -1833,13 +1610,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;
+          dtSelectedElement = node;
+          dtSelectedDOMNode = 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);
@@ -1851,10 +1628,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';
@@ -1870,11 +1647,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) => {
@@ -1884,8 +1661,8 @@
               });
               newElement.innerHTML = node.innerHTML;
               node.parentNode.replaceChild(newElement, node);
-              selectedElement = newElement;
-              refreshElementsPanel();
+              dtSelectedElement = newElement;
+              dtRefreshElementsPanel();
             });
           };
         }
@@ -1895,16 +1672,16 @@
         // 属性（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) => {
                 node.setAttribute(attr.name, newValue);
-                refreshElementsPanel();
+                dtRefreshElementsPanel();
               });
             };
           }
@@ -1916,7 +1693,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 => {
@@ -1926,7 +1703,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);
           }
           
@@ -1937,13 +1714,13 @@
       } 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();
           startInlineEdit(text, node.textContent.trim(), (newValue) => {
             node.textContent = newValue;
-            refreshElementsPanel();
+            dtRefreshElementsPanel();
           });
         };
         parentElement.appendChild(text);
@@ -1966,23 +1743,23 @@
         }
         
         updateCSSPanel(element);
-        refreshElementsPanel();
+        dtRefreshElementsPanel();
       }
     }
 
     // refreshElementsPanel関数の定義
-    refreshElementsPanel = function() {
-      let tree = document.getElementById('dom-tree');
+    dtRefreshElementsPanel = function() {
+      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'));
           }
         }
       }
@@ -1992,15 +1769,15 @@
       tree.innerHTML = '';
       buildDOMTree(document.documentElement, tree, 0, true);
       
-      if (selectedElement) {
-        const elementId = selectedElement.id || Array.from(selectedElement.attributes)
+      if (dtSelectedElement) {
+        const elementId = dtSelectedElement.id || Array.from(dtSelectedElement.attributes)
           .find(attr => attr.name.startsWith('data-element-id'))?.value;
         
         if (elementId) {
           const node = document.querySelector(`[data-element-id="${elementId}"]`);
           if (node) {
             node.classList.add('selected');
-            updateCSSPanel(selectedElement);
+            updateCSSPanel(dtSelectedElement);
           }
         }
       }
@@ -2011,7 +1788,7 @@
 
     // 初期表示
     setTimeout(() => {
-      refreshElementsPanel();
+      dtRefreshElementsPanel();
     }, 0);
 
     return panel;
@@ -2019,7 +1796,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 {
@@ -2030,13 +1807,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';
@@ -2049,9 +1826,13 @@
 
   // 初期化
   document.addEventListener('DOMContentLoaded', function() {
-    createDevTools();
+    // 最小限のUIだけ先に表示
     createOpenButton();
-    console.log('開発者ツールが初期化されました');
-    console.log('このコンソールでJavaScriptを実行できます');
+    
+    // メインのツールは遅延読み込み
+    setTimeout(() => {
+      createDevTools();
+      console.log('開発者ツールが初期化されました');
+    }, 1000);
   });
 })();