Update dev-tools.js

dev-tools.js

@@ -775,19 +775,28 @@ observer.observe(document.documentElement, {
     `;
     container.appendChild(ttfbCard);
 
-    // Web Vitalsの計測を開始
+// Web Vitalsの計測を開始
 loadWebVitals().then(() => {
   if (window.webVitals) {
     try {
+      // 新しいバージョンのWeb Vitalsではメソッド名が異なる可能性がある
+      if (window.webVitals.onCLS) {
+        window.webVitals.onCLS(updateCLS);
+        window.webVitals.onFCP(updateFCP);
+        window.webVitals.onFID(updateFID);
+        window.webVitals.onLCP(updateLCP);
+        window.webVitals.onTTFB(updateTTFB);
+      } else if (window.webVitals.getCLS) { // 古いバージョンの場合
         window.webVitals.getCLS(updateCLS);
         window.webVitals.getFCP(updateFCP);
         window.webVitals.getFID(updateFID);
         window.webVitals.getLCP(updateLCP);
         window.webVitals.getTTFB(updateTTFB);
-      } catch (e) {
+      }
+    } catch (e) {
       console.error('Web Vitals error:', e);
     }
-    }
+  }
 });
     function updateCLS(metric) {
       vitalsData.CLS = metric.value;
@@ -1687,7 +1696,41 @@ loadWebVitals().then(() => {
 
     return panel;
   }
-
+// この関数を createElementsPanel() の外に移動し、最初に定義する
+function refreshElementsPanel() {
+  let tree = document.getElementById('dom-tree');
+  
+  if (!tree) {
+    const panel = document.getElementById('elements-panel');
+    if (panel) {
+      const container = panel.querySelector('.elements-container');
+      if (container) {
+        tree = document.createElement('div');
+        tree.className = 'dom-tree';
+        tree.id = 'dom-tree';
+        container.insertBefore(tree, container.querySelector('.css-panel'));
+      }
+    }
+  }
+  
+  if (!tree) return;
+  
+  tree.innerHTML = '';
+  buildDOMTree(document.documentElement, tree, 0, true);
+  
+  if (selectedElement) {
+    const elementId = selectedElement.id || Array.from(selectedElement.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);
+      }
+    }
+  }
+}
   // Elementsパネル作成
   function createElementsPanel() {
     const panel = document.createElement('div');
@@ -1962,42 +2005,6 @@ loadWebVitals().then(() => {
       }
     }
 
-    // 要素パネル更新
-    function refreshElementsPanel() {
-      let tree = document.getElementById('dom-tree');
-      
-      if (!tree) {
-        const panel = document.getElementById('elements-panel');
-        if (panel) {
-          const container = panel.querySelector('.elements-container');
-          if (container) {
-            tree = document.createElement('div');
-            tree.className = 'dom-tree';
-            tree.id = 'dom-tree';
-            container.insertBefore(tree, container.querySelector('.css-panel'));
-          }
-        }
-      }
-      
-      if (!tree) return;
-      
-      tree.innerHTML = '';
-      buildDOMTree(document.documentElement, tree, 0, true);
-      
-      if (selectedElement) {
-        const elementId = selectedElement.id || Array.from(selectedElement.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);
-          }
-        }
-      }
-    }
-
     // DOM変更を監視
     observer.observe(document.documentElement, {
       childList: true,