Update dev-tools.js

dev-tools.js

@@ -1,61 +1,65 @@
 (function() {
   // グローバル変数宣言
-  let contextMenu = null;
-  let selectedElement = null;
-  let selectedDOMNode = null;
-  let activeEditElement = null;
-  let networkRequests = [];
-  let selectedRequest = null;
-  let vitalsData = {
+  let dtContextMenu = null;
+  let dtSelectedElement = null;
+  let dtSelectedDOMNode = null;
+  let dtActiveEditElement = null;
+  let dtNetworkRequests = [];
+  let dtSelectedRequest = null;
+  let dtVitalsData = {
     CLS: null,
     FCP: null,
     FID: null,
     LCP: null,
     TTFB: null
   };
-  let observer = null;
-  let refreshElementsPanel = null;
-  let vitalsMeasurementStarted = false;
+  let dtObserver = null;
+  let dtRefreshElementsPanel = null;
+  let dtVitalsMeasurementStarted = 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 = () => {
+    if (dtObserver) dtObserver.disconnect();
+    
+    dtObserver = new MutationObserver(() => {
+      if (dtRefreshElementsPanel) {
+        dtRefreshElementsPanel();
+      }
+    });
+
+    dtObserver.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: false,
+      characterData: false
+    });
+  };
+
+  // スタイルの追加 (すべてのクラスにdt-プレフィックス)
   const style = document.createElement('style');
   style.textContent = `
-.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(--dt-panel-bg);
+  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;
@@ -562,58 +566,39 @@
 .dt-json-null {
   color: var(--dt-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);
 
-  // ノードをハイライト表示
-  function highlightNode(node) {
-    const elementId = node.id || Math.random().toString(36).substr(2, 9);
-    node.setAttribute('data-dt-element-id', elementId);
-    
-    setTimeout(() => {
-      const domNode = document.querySelector(`[data-dt-element-id="${elementId}"]`);
-      if (domNode) {
-        domNode.classList.add('dt-highlight');
-        setTimeout(() => {
-          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');
@@ -693,7 +678,7 @@
     elementsTab.click();
   };
 
-  // Web Vitalsパネル作成
+  // Web Vitalsパネル作成 (測定開始ボタンが押されるまで何もしない)
   function createVitalsPanel() {
     const panel = document.createElement('div');
     panel.className = 'dt-devtools-panel';
@@ -781,8 +766,8 @@
     container.appendChild(ttfbCard);
 
     function startVitalsMeasurement() {
-      if (vitalsMeasurementStarted) return;
-      vitalsMeasurementStarted = true;
+      if (dtVitalsMeasurementStarted) return;
+      dtVitalsMeasurementStarted = true;
       
       loadWebVitals().then(() => {
         if (window.webVitals) {
@@ -801,36 +786,37 @@
               vitals.onLCP(updateLCP);
               vitals.onTTFB(updateTTFB);
             }
-            logMessage('Web Vitalsの測定を開始しました', 'dt-console-info');
+            startButton.textContent = '測定中...';
+            startButton.disabled = true;
           } catch (e) {
-            logMessage('Web Vitals error: ' + e.message, 'dt-console-error');
+            console.error('Web Vitals error:', e);
           }
         }
       });
     }
 
     function updateCLS(metric) {
-      vitalsData.CLS = metric.value;
+      dtVitalsData.CLS = metric.value;
       updateVitalDisplay('cls', metric.value, 0.1, 0.25);
     }
 
     function updateFCP(metric) {
-      vitalsData.FCP = metric.value;
+      dtVitalsData.FCP = metric.value;
       updateVitalDisplay('fcp', metric.value, 1800, 3000);
     }
 
     function updateFID(metric) {
-      vitalsData.FID = metric.value;
+      dtVitalsData.FID = metric.value;
       updateVitalDisplay('fid', metric.value, 100, 300);
     }
 
     function updateLCP(metric) {
-      vitalsData.LCP = metric.value;
+      dtVitalsData.LCP = metric.value;
       updateVitalDisplay('lcp', metric.value, 2500, 4000);
     }
 
     function updateTTFB(metric) {
-      vitalsData.TTFB = metric.value;
+      dtVitalsData.TTFB = metric.value;
       updateVitalDisplay('ttfb', metric.value, 800, 1800);
     }
 
@@ -918,7 +904,7 @@
         error: null
       };
 
-      networkRequests.push(requestData);
+      dtNetworkRequests.push(requestData);
       renderNetworkRequests();
 
       try {
@@ -995,7 +981,7 @@
         error: null
       };
 
-      networkRequests.push(requestData);
+      dtNetworkRequests.push(requestData);
       renderNetworkRequests();
 
       this.addEventListener('load', function() {
@@ -1052,15 +1038,15 @@
 
     requestsList.innerHTML = '';
     
-    networkRequests.forEach(request => {
+    dtNetworkRequests.forEach(request => {
       const requestElement = document.createElement('div');
       requestElement.className = 'dt-network-request';
-      if (selectedRequest && selectedRequest.id === request.id) {
+      if (dtSelectedRequest && dtSelectedRequest.id === request.id) {
         requestElement.classList.add('selected');
       }
       
       requestElement.onclick = () => {
-        selectedRequest = request;
+        dtSelectedRequest = request;
         renderNetworkRequests();
         renderNetworkDetails();
       };
@@ -1093,7 +1079,7 @@
   // ネットワークリクエストの詳細を表示
   function renderNetworkDetails() {
     const panel = document.getElementById('network-panel');
-    if (!panel || !selectedRequest) return;
+    if (!panel || !dtSelectedRequest) return;
 
     const detailsPanel = panel.querySelector('.dt-network-details');
     detailsPanel.innerHTML = '';
@@ -1104,16 +1090,16 @@
     generalSection.innerHTML = `
       <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>
-        <strong>時間:</strong> ${selectedRequest.duration ? Math.round(selectedRequest.duration) + 'ms' : '-'}
+        <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 = 'dt-network-detail-section';
       
@@ -1124,12 +1110,12 @@
       const headersContent = document.createElement('div');
       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>`;
         });
       }
@@ -1140,7 +1126,7 @@
     }
 
     // リクエストボディ
-    if (selectedRequest.requestBody) {
+    if (dtSelectedRequest.requestBody) {
       const bodySection = document.createElement('div');
       bodySection.className = 'dt-network-detail-section';
       
@@ -1152,10 +1138,10 @@
       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 = 'ボディを表示できません';
@@ -1167,7 +1153,7 @@
     }
 
     // レスポンス
-    if (selectedRequest.response) {
+    if (dtSelectedRequest.response) {
       const responseSection = document.createElement('div');
       responseSection.className = 'dt-network-detail-section';
       
@@ -1178,11 +1164,11 @@
       const responseContent = document.createElement('div');
       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 = 'レスポンスボディがありません';
@@ -1194,7 +1180,7 @@
     }
 
     // エラー
-    if (selectedRequest.error) {
+    if (dtSelectedRequest.error) {
       const errorSection = document.createElement('div');
       errorSection.className = 'dt-network-detail-section';
       
@@ -1204,10 +1190,10 @@
       
       const errorContent = document.createElement('div');
       errorContent.className = 'dt-network-detail-content';
-      errorContent.textContent = `${selectedRequest.error.name}: ${selectedRequest.error.message}`;
+      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);
@@ -1218,9 +1204,9 @@
 
   // コンテキストメニュー作成
   function createContextMenu() {
-    contextMenu = document.createElement('div');
-    contextMenu.className = 'dt-context-menu';
-    contextMenu.innerHTML = `
+    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>
@@ -1230,19 +1216,19 @@
       <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('.dt-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';
       }
     });
   }
@@ -1478,18 +1464,18 @@
 
   // コンテキストメニューアクション処理
   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);
           }
@@ -1526,7 +1512,7 @@
           try {
             document.documentElement.innerHTML = textarea.value;
             modal.remove();
-            refreshElementsPanel();
+            dtRefreshElementsPanel();
           } catch (e) {
             alert('HTMLの解析に失敗しました: ' + e.message);
           }
@@ -1550,48 +1536,48 @@
         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('.dt-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;
     }
@@ -1599,7 +1585,7 @@
 
   // インライン編集関数
   function startInlineEdit(element, initialValue, callback) {
-    if (activeEditElement) return;
+    if (dtActiveEditElement) return;
     
     const originalValue = element.textContent;
     const rect = element.getBoundingClientRect();
@@ -1616,7 +1602,7 @@
     input.focus();
     input.select();
     
-    activeEditElement = {
+    dtActiveEditElement = {
       element: element,
       input: input,
       callback: callback
@@ -1659,7 +1645,7 @@
     function cleanup() {
       document.removeEventListener('click', clickOutsideHandler);
       input.remove();
-      activeEditElement = null;
+      dtActiveEditElement = null;
     }
   }
 
@@ -1869,21 +1855,21 @@
         const element = document.createElement('div');
         element.className = 'dt-dom-node';
         element.style.marginLeft = `${depth * 15}px`;
-        element.dataset.dtElementId = node.id || Math.random().toString(36).substr(2, 9);
+        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('.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);
@@ -1894,8 +1880,8 @@
           if (e.target.classList.contains('dt-dom-toggle')) return;
           
           e.stopPropagation();
-          selectedElement = node;
-          selectedDOMNode = element;
+          dtSelectedElement = node;
+          dtSelectedDOMNode = element;
           
           document.querySelectorAll('.dt-dom-node').forEach(el => el.classList.remove('selected'));
           element.classList.add('selected');
@@ -1942,8 +1928,8 @@
               });
               newElement.innerHTML = node.innerHTML;
               node.parentNode.replaceChild(newElement, node);
-              selectedElement = newElement;
-              refreshElementsPanel();
+              dtSelectedElement = newElement;
+              dtRefreshElementsPanel();
             });
           };
         }
@@ -1962,7 +1948,7 @@
               e.stopPropagation();
               startInlineEdit(attrSpan, attr.value, (newValue) => {
                 node.setAttribute(attr.name, newValue);
-                refreshElementsPanel();
+                dtRefreshElementsPanel();
               });
             };
           }
@@ -2001,7 +1987,7 @@
           e.stopPropagation();
           startInlineEdit(text, node.textContent.trim(), (newValue) => {
             node.textContent = newValue;
-            refreshElementsPanel();
+            dtRefreshElementsPanel();
           });
         };
         parentElement.appendChild(text);
@@ -2024,12 +2010,12 @@
         }
         
         updateCSSPanel(element);
-        refreshElementsPanel();
+        dtRefreshElementsPanel();
       }
     }
 
     // refreshElementsPanel関数の定義
-    refreshElementsPanel = function() {
+    dtRefreshElementsPanel = function() {
       let tree = document.getElementById('dt-dom-tree');
       
       if (!tree) {
@@ -2050,15 +2036,15 @@
       tree.innerHTML = '';
       buildDOMTree(document.documentElement, tree, 0, true);
       
-      if (selectedElement) {
-        const elementId = selectedElement.id || Array.from(selectedElement.attributes)
-          .find(attr => attr.name.startsWith('data-dt-element-id'))?.value;
+      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-dt-element-id="${elementId}"]`);
+          const node = document.querySelector(`[data-element-id="${elementId}"]`);
           if (node) {
             node.classList.add('selected');
-            updateCSSPanel(selectedElement);
+            updateCSSPanel(dtSelectedElement);
           }
         }
       }
@@ -2069,7 +2055,7 @@
 
     // 初期表示
     setTimeout(() => {
-      refreshElementsPanel();
+      dtRefreshElementsPanel();
     }, 0);
 
     return panel;
@@ -2113,20 +2099,7 @@
     // メインのツールは遅延読み込み
     setTimeout(() => {
       createDevTools();
-      logMessage('開発者ツールが初期化されました', 'dt-console-info');
-      logMessage('このコンソールでJavaScriptを実行できます', 'dt-console-info');
+      console.log('開発者ツールが初期化されました');
     }, 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;
-  }
 })();