Update dev-tools.js

dev-tools.js

@@ -1,8 +1,35 @@
 (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 webVitalsScript = document.createElement('script');
-  webVitalsScript.src = 'https://unpkg.com/[email protected]/dist/web-vitals.iife.js';
-  document.head.appendChild(webVitalsScript);
+  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);
+    });
+  };
 
   // スタイルの動的追加 (ダークテーマ)
   const style = document.createElement('style');
@@ -35,6 +62,7 @@
   --dom-attr: #9cdcfe;
   --dom-text: #d4d4d4;
 }
+
 .devtools-container {
   position: fixed;
   bottom: 0;
@@ -548,28 +576,11 @@
 .json-null {
   color: var(--json-null);
 }
-`;
+  `;
   document.head.appendChild(style);
 
-  // グローバル変数
-  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;
-
   // DOM変更を監視するMutationObserver
-  function setupMutationObserver() {
+  const setupMutationObserver = () => {
     observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === 'childList') {
@@ -591,7 +602,7 @@
       attributes: true,
       characterData: true
     });
-  }
+  };
 
   // ノードをハイライト表示
   function highlightNode(node) {
@@ -686,7 +697,7 @@
     }
 
     elementsTab.click();
-  }
+  };
 
   // Web Vitalsパネル作成
   function createVitalsPanel() {
@@ -769,20 +780,6 @@
     container.appendChild(ttfbCard);
 
     // Web Vitalsの計測を開始
-    const loadWebVitals = () => {
-      return new Promise((resolve) => {
-        if (window.webVitals) {
-          resolve();
-          return;
-        }
-        
-        const script = document.createElement('script');
-        script.src = 'https://unpkg.com/[email protected]/dist/web-vitals.iife.js';
-        script.onload = resolve;
-        document.head.appendChild(script);
-      });
-    };
-
     loadWebVitals().then(() => {
       if (window.webVitals) {
         try {
@@ -876,14 +873,17 @@
     container.className = 'network-container';
     panel.appendChild(container);
 
+    // リクエストリスト
     const requestsList = document.createElement('div');
     requestsList.className = 'network-requests';
     container.appendChild(requestsList);
 
+    // 詳細パネル
     const detailsPanel = document.createElement('div');
     detailsPanel.className = 'network-details';
     container.appendChild(detailsPanel);
 
+    // ネットワークリクエストを監視
     setupNetworkMonitoring();
 
     return panel;
@@ -1092,6 +1092,7 @@
     const detailsPanel = panel.querySelector('.network-details');
     detailsPanel.innerHTML = '';
 
+    // 一般情報
     const generalSection = document.createElement('div');
     generalSection.className = 'network-detail-section';
     generalSection.innerHTML = `
@@ -1105,6 +1106,7 @@
     `;
     detailsPanel.appendChild(generalSection);
 
+    // リクエストヘッダー
     if (selectedRequest.requestHeaders) {
       const headersSection = document.createElement('div');
       headersSection.className = 'network-detail-section';
@@ -1131,6 +1133,7 @@
       detailsPanel.appendChild(headersSection);
     }
 
+    // リクエストボディ
     if (selectedRequest.requestBody) {
       const bodySection = document.createElement('div');
       bodySection.className = 'network-detail-section';
@@ -1157,6 +1160,7 @@
       detailsPanel.appendChild(bodySection);
     }
 
+    // レスポンス
     if (selectedRequest.response) {
       const responseSection = document.createElement('div');
       responseSection.className = 'network-detail-section';
@@ -1183,6 +1187,7 @@
       detailsPanel.appendChild(responseSection);
     }
 
+    // エラー
     if (selectedRequest.error) {
       const errorSection = document.createElement('div');
       errorSection.className = 'network-detail-section';
@@ -1241,6 +1246,7 @@
     panel.className = 'devtools-panel';
     panel.id = 'storage-panel';
 
+    // LocalStorage表示
     const localStorageTitle = document.createElement('h3');
     localStorageTitle.textContent = 'Local Storage';
     panel.appendChild(localStorageTitle);
@@ -1262,6 +1268,7 @@
     };
     panel.appendChild(addLocalStorageBtn);
 
+    // SessionStorage表示
     const sessionStorageTitle = document.createElement('h3');
     sessionStorageTitle.style.marginTop = '20px';
     sessionStorageTitle.textContent = 'Session Storage';
@@ -1284,6 +1291,7 @@
     };
     panel.appendChild(addSessionStorageBtn);
 
+    // Cookie表示
     const cookiesTitle = document.createElement('h3');
     cookiesTitle.style.marginTop = '20px';
     cookiesTitle.textContent = 'Cookies';
@@ -1306,6 +1314,7 @@
     };
     panel.appendChild(addCookieBtn);
 
+    // ストレージを表示する関数
     function renderStorage() {
       renderTable(localStorageTable, localStorage, 'local');
       renderTable(sessionStorageTable, sessionStorage, 'session');
@@ -1454,6 +1463,7 @@
       });
     }
 
+    // 初期表示
     renderStorage();
 
     return panel;
@@ -1625,6 +1635,7 @@
     panel.appendChild(log);
     panel.appendChild(input);
 
+    // コンソールメソッドをオーバーライド
     const originalConsole = {
       log: console.log,
       error: console.error,
@@ -1802,6 +1813,7 @@
         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;
@@ -1819,6 +1831,7 @@
           updateCSSPanel(node);
         };
 
+        // 左クリックで選択
         element.onclick = (e) => {
           if (e.target.classList.contains('dom-toggle')) return;
           
@@ -1832,6 +1845,7 @@
           updateCSSPanel(node);
         };
 
+        // 子要素がある場合はトグルボタンを追加
         const hasChildren = node.childNodes.length > 0 && 
                           !(node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE && !node.childNodes[0].textContent.trim());
         
@@ -1854,6 +1868,7 @@
           element.appendChild(toggle);
         }
 
+        // タグ名（HTML要素は編集不可）
         const tag = document.createElement('span');
         tag.className = 'dom-tag';
         tag.textContent = `<${node.tagName.toLowerCase()}`;
@@ -1877,6 +1892,7 @@
         
         element.appendChild(tag);
 
+        // 属性（HTML要素は編集不可）
         Array.from(node.attributes).forEach(attr => {
           const attrSpan = document.createElement('span');
           attrSpan.className = 'dom-attr';
@@ -1954,7 +1970,7 @@
       }
     }
 
-    // refreshElementsPanel関数定義
+    // refreshElementsPanel関数の定義
     refreshElementsPanel = function() {
       let tree = document.getElementById('dom-tree');
       
@@ -1990,7 +2006,7 @@
       }
     };
 
-    // MutationObserverを設定
+    // MutationObserverの設定
     setupMutationObserver();
 
     // 初期表示
@@ -2016,54 +2032,26 @@
     const button = document.createElement('button');
     button.id = 'open-devtools-btn';
     button.textContent = '開発者ツールを開く';
-    
-    // スタイルを直接設定（動的CSSに依存しない）
     button.style.position = 'fixed';
-    button.style.bottom = '20px';
-    button.style.right = '20px';
+    button.style.bottom = '10px';
+    button.style.right = '10px';
     button.style.padding = '8px 16px';
-    button.style.backgroundColor = '#007acc';
+    button.style.background = 'var(--primary-color)';
     button.style.color = '#000';
     button.style.border = 'none';
     button.style.borderRadius = '4px';
     button.style.cursor = 'pointer';
-    button.style.zIndex = '2147483647'; // 最大値
-    button.style.fontFamily = 'sans-serif';
-    button.style.fontSize = '14px';
-    button.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
-    
+    button.style.zIndex = '9998';
     button.onclick = toggleDevTools;
-    document.body.appendChild(button);
-    
-    console.log('開発者ツールボタンが作成されました'); // デバッグ用
-  }
 
-  // 初期化関数
-  function initializeDevTools() {
-    try {
-      // 1. スタイルを最初に追加
-      const style = document.createElement('style');
-      style.textContent = `...`; // 前述のスタイル定義
-      document.head.appendChild(style);
-      
-      // 2. メインコンテナ作成
-      createDevTools();
-      
-      // 3. ボタン作成（setTimeoutで少し遅らせる）
-      setTimeout(() => {
-        createOpenButton();
-        console.log('初期化完了');
-      }, 100);
-      
-    } catch (error) {
-      console.error('初期化エラー:', error);
-    }
+    document.body.appendChild(button);
   }
 
-  // DOM読み込み完了後に初期化
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initializeDevTools);
-  } else {
-    initializeDevTools();
-  }
+  // 初期化
+  document.addEventListener('DOMContentLoaded', function() {
+    createDevTools();
+    createOpenButton();
+    console.log('開発者ツールが初期化されました');
+    console.log('このコンソールでJavaScriptを実行できます');
+  });
 })();