Update dev-tools.js

dev-tools.js

@@ -566,9 +566,9 @@
     LCP: null,
     TTFB: null
   };
-
+let observer;
   // DOM変更を監視するMutationObserver
-  const observer = new MutationObserver((mutations) => {
+  let observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
       if (mutation.type === 'childList') {
         mutation.addedNodes.forEach((node) => {
@@ -580,7 +580,40 @@
     });
     refreshElementsPanel();
   });
-
+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);
+  });
+};
+
+  // DOMContentLoaded内に追加
+observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    if (mutation.type === 'childList') {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          highlightNode(node);
+        }
+      });
+    }
+  });
+  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);
@@ -598,7 +631,7 @@
   }
 
   // 開発者ツールのメイン関数
-  function createDevTools() {
+  const createDevTools = () => {
     const container = document.createElement('div');
     container.className = 'devtools-container';
     container.id = 'devtools-container';
@@ -758,16 +791,19 @@
     container.appendChild(ttfbCard);
 
     // Web Vitalsの計測を開始
-    webVitalsScript.onload = function() {
-      if (window.webVitals) {
+loadWebVitals().then(() => {
+  if (window.webVitals) {
+    try {
         window.webVitals.getCLS(updateCLS);
         window.webVitals.getFCP(updateFCP);
         window.webVitals.getFID(updateFID);
         window.webVitals.getLCP(updateLCP);
         window.webVitals.getTTFB(updateTTFB);
-      }
-    };
-
+      } catch (e) {
+      console.error('Web Vitals error:', e);
+    }
+    }
+});
     function updateCLS(metric) {
       vitalsData.CLS = metric.value;
       updateVitalDisplay('cls', metric.value, 0.1, 0.25);