Update dev-tools.js

dev-tools.js

@@ -15,6 +15,7 @@
   };
   let observer = null;
   let refreshElementsPanel = null;
+  let vitalsMeasurementStarted = false;
 
   // Web Vitalsスクリプトを動的に読み込み
   const loadWebVitals = () => {
@@ -31,7 +32,30 @@
     });
   };
 
-  // スタイルの動的追加 (ダークテーマ)
+  // 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
+    });
+  };
   const style = document.createElement('style');
   style.textContent = `
 :root {
@@ -578,32 +602,6 @@
 }
   `;
   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);
@@ -709,6 +707,13 @@
     container.className = 'vitals-container';
     panel.appendChild(container);
 
+    // 測定開始ボタン
+    const startButton = document.createElement('button');
+    startButton.className = 'add-btn';
+    startButton.textContent = '測定を開始';
+    startButton.onclick = startVitalsMeasurement;
+    container.appendChild(startButton);
+
     // CLS (Cumulative Layout Shift)
     const clsCard = document.createElement('div');
     clsCard.className = 'vital-card';
@@ -779,29 +784,34 @@
     `;
     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);
+    function startVitalsMeasurement() {
+      if (vitalsMeasurementStarted) return;
+      vitalsMeasurementStarted = true;
+      
+      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);
+            }
+            alert('Web Vitalsの測定を開始しました');
+          } catch (e) {
+            console.error('Web Vitals error:', e);
           }
-        } catch (e) {
-          console.error('Web Vitals error:', e);
         }
-      }
-    });
+      });
+    }
 
     function updateCLS(metric) {
       vitalsData.CLS = metric.value;
@@ -1216,6 +1226,7 @@
     contextMenu.className = 'context-menu';
     contextMenu.innerHTML = `
       <div class="context-menu-item" data-action="edit-html">HTMLとして編集</div>
+      <div class="context-menu-item" data-action="edit-whole-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>
@@ -1488,6 +1499,57 @@
           }
         });
         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();
+            refreshElementsPanel();
+          } 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) {