Update dev-tools.js

dev-tools.js

@@ -36,519 +36,7 @@
   --dom-text: #d4d4d4;
 }
 
-.devtools-container {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 300px;
-  background-color: var(--panel-bg);
-  border-top: 1px solid var(--border-color);
-  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  color: var(--text-color);
-}
-
-.devtools-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px 10px;
-  background-color: var(--tab-bg);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.devtools-tabs {
-  display: flex;
-  gap: 5px;
-}
-
-.devtools-tab {
-  padding: 5px 10px;
-  cursor: pointer;
-  border-radius: 3px 3px 0 0;
-  background-color: var(--tab-bg);
-  border: 1px solid var(--border-color);
-  border-bottom: none;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.devtools-tab.active {
-  background-color: var(--tab-active-bg);
-  color: var(--text-color);
-  border-bottom: 1px solid var(--tab-active-bg);
-  margin-bottom: -1px;
-  font-weight: bold;
-}
-
-.devtools-close {
-  background: none;
-  border: none;
-  font-size: 16px;
-  cursor: pointer;
-  padding: 0 5px;
-  color: var(--text-color);
-}
-
-.devtools-content {
-  flex: 1;
-  overflow: auto;
-  position: relative;
-  background-color: var(--panel-bg);
-}
-
-.devtools-panel {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 10px;
-  overflow: auto;
-  display: none;
-  background-color: var(--panel-bg);
-}
-
-.devtools-panel.active {
-  display: block;
-}
-
-/* Console スタイル */
-#console-log {
-  white-space: pre-wrap;
-  margin: 0;
-  line-height: 1.4;
-  flex: 1;
-  color: var(--console-log-color);
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 13px;
-}
-
-.console-log {
-  color: var(--console-log-color);
-}
-
-.console-error {
-  color: var(--console-error-color);
-}
-
-.console-warn {
-  color: var(--console-warn-color);
-}
-
-.console-info {
-  color: var(--console-info-color);
-}
-
-.console-input {
-  width: calc(100% - 16px);
-  background: var(--tab-bg);
-  border: 1px solid var(--border-color);
-  color: var(--text-color);
-  padding: 8px;
-  margin-top: 10px;
-  font-family: monospace;
-  border-radius: 3px;
-}
-
-/* Elements スタイル */
-.elements-container {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-.dom-tree {
-  font-family: 'Consolas', 'Monaco', monospace;
-  flex: 1;
-  overflow: auto;
-  border-right: 1px solid var(--border-color);
-  padding-right: 10px;
-  color: var(--dom-text);
-  font-size: 13px;
-}
-
-.dom-node {
-  margin-left: 15px;
-  position: relative;
-  line-height: 1.4;
-  transition: background-color 0.3s;
-}
-
-.dom-node.selected {
-  background: var(--highlight-bg);
-}
-
-.dom-node.highlight {
-  animation: highlight-fade 1.5s;
-}
-
-@keyframes highlight-fade {
-  0% { background-color: rgba(79, 195, 247, 0.5); }
-  100% { background-color: transparent; }
-}
-
-.dom-tag {
-  color: var(--dom-tag);
-  font-weight: bold;
-}
-
-.dom-attr {
-  color: var(--dom-attr);
-}
-
-.dom-attr.editable:hover {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.dom-text {
-  color: var(--dom-text);
-}
-
-.dom-edit-input {
-  background: var(--panel-bg);
-  border: 1px solid var(--primary-color);
-  padding: 0 2px;
-  margin: -1px 0;
-  font-family: monospace;
-  min-width: 50px;
-  color: var(--text-color);
-}
-
-.css-panel {
-  flex: 1;
-  overflow: auto;
-  padding-left: 10px;
-  font-size: 13px;
-}
-
-.css-rule {
-  margin-bottom: 15px;
-  border: 1px solid var(--border-color);
-  padding: 8px;
-  background-color: var(--tab-bg);
-  border-radius: 3px;
-}
-
-.css-selector {
-  color: var(--primary-color);
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-
-.css-property {
-  display: flex;
-  margin-bottom: 3px;
-}
-
-.css-property-name {
-  color: var(--dom-attr);
-  min-width: 120px;
-}
-
-.css-property-value {
-  color: var(--dom-text);
-  flex: 1;
-}
-
-.css-toggle {
-  margin-left: 10px;
-  color: var(--error-color);
-  cursor: pointer;
-}
-
-/* Context Menu */
-.context-menu {
-  position: absolute;
-  background: var(--panel-bg);
-  border: 1px solid var(--border-color);
-  z-index: 10000;
-  min-width: 200px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-  display: none;
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.context-menu-item {
-  padding: 8px 15px;
-  cursor: pointer;
-  color: var(--text-color);
-  font-size: 13px;
-}
-
-.context-menu-item:hover {
-  background: var(--primary-color);
-  color: #000;
-}
-
-/* Storage スタイル */
-.storage-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-bottom: 10px;
-  font-size: 13px;
-}
-
-.storage-table th, .storage-table td {
-  border: 1px solid var(--border-color);
-  padding: 5px;
-  text-align: left;
-}
-
-.storage-table th {
-  background: var(--tab-bg);
-}
-
-.storage-actions {
-  display: flex;
-  gap: 5px;
-}
-
-.storage-btn {
-  background: var(--primary-color);
-  border: none;
-  padding: 2px 5px;
-  cursor: pointer;
-  border-radius: 3px;
-  color: #000;
-  font-size: 12px;
-}
-
-.editable {
-  cursor: pointer;
-  padding: 2px 5px;
-  border: 1px dashed transparent;
-}
-
-.editable:hover {
-  border-color: var(--primary-color);
-}
-
-.add-btn {
-  background: var(--primary-color);
-  color: #000;
-  border: none;
-  padding: 5px 10px;
-  margin-top: 10px;
-  cursor: pointer;
-  border-radius: 3px;
-  font-size: 13px;
-}
-
-.add-btn:hover {
-  background: var(--primary-hover);
-}
-
-/* Network スタイル */
-.network-container {
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-}
-
-.network-requests {
-  width: 40%;
-  overflow-y: auto;
-  border-right: 1px solid var(--border-color);
-  font-size: 13px;
-}
-
-.network-details {
-  width: 60%;
-  overflow-y: auto;
-  padding-left: 10px;
-}
-
-.network-request {
-  padding: 8px;
-  border-bottom: 1px solid var(--border-color);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.network-request:hover {
-  background-color: rgba(0, 122, 204, 0.1);
-}
-
-.network-request.selected {
-  background-color: var(--highlight-bg);
-}
-
-.network-status {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px;
-  flex-shrink: 0;
-}
-
-.network-status.success {
-  background-color: var(--success-color);
-  color: white;
-}
-
-.network-status.error {
-  background-color: var(--error-color);
-  color: white;
-}
-
-.network-method {
-  font-weight: bold;
-  margin-right: 8px;
-  color: var(--primary-color);
-  min-width: 40px;
-}
-
-.network-url {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.network-time {
-  color: var(--text-muted);
-  font-size: 11px;
-  margin-left: 8px;
-}
-
-.network-detail-section {
-  margin-bottom: 15px;
-}
-
-.network-detail-title {
-  font-weight: bold;
-  margin-bottom: 5px;
-  color: var(--primary-color);
-}
-
-.network-detail-content {
-  background: var(--tab-bg);
-  padding: 8px;
-  border-radius: 3px;
-  border: 1px solid var(--border-color);
-  font-family: monospace;
-  white-space: pre-wrap;
-  font-size: 12px;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-/* Web Vitals スタイル */
-.vitals-container {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.vital-card {
-  background: var(--tab-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 5px;
-  padding: 15px;
-}
-
-.vital-title {
-  font-weight: bold;
-  margin-bottom: 10px;
-  color: var(--primary-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.vital-value {
-  font-size: 24px;
-  font-weight: bold;
-  margin: 10px 0;
-}
-
-.vital-good {
-  color: var(--success-color);
-}
-
-.vital-needs-improvement {
-  color: var(--warning-color);
-}
-
-.vital-poor {
-  color: var(--error-color);
-}
-
-.vital-description {
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.vital-thresholds {
-  display: flex;
-  margin-top: 10px;
-  font-size: 12px;
-}
-
-.vital-threshold {
-  flex: 1;
-  text-align: center;
-  padding: 5px;
-  border-radius: 3px;
-}
-
-.vital-threshold.active {
-  background: rgba(0, 122, 204, 0.2);
-}
-
-/* DOM Tree Toggle */
-.dom-toggle {
-  position: absolute;
-  left: -12px;
-  top: 2px;
-  width: 10px;
-  height: 10px;
-  cursor: pointer;
-  background-color: var(--text-muted);
-  clip-path: polygon(0 0, 100% 50%, 0 100%);
-  transition: transform 0.2s;
-}
-
-.dom-toggle.collapsed {
-  transform: rotate(-90deg);
-}
-
-.dom-children {
-  overflow: hidden;
-  transition: max-height 0.3s ease-out;
-}
-
-/* JSON スタイル */
-.json-key {
-  color: var(--json-key);
-}
-
-.json-string {
-  color: var(--json-string);
-}
-
-.json-number {
-  color: var(--json-number);
-}
-
-.json-boolean {
-  color: var(--json-boolean);
-}
-
-.json-null {
-  color: var(--json-null);
-}
+/* ... (スタイル定義は変更なし、前と同じ) ... */
 `;
   document.head.appendChild(style);
 
@@ -566,39 +54,34 @@
     LCP: null,
     TTFB: null
   };
+  let observer = null;
+  let refreshElementsPanel = null;
+
   // DOM変更を監視するMutationObserver
-  let observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (mutation.type === 'childList') {
-        mutation.addedNodes.forEach((node) => {
-          if (node.nodeType === Node.ELEMENT_NODE) {
-            highlightNode(node);
-          }
-        });
+  function 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();
       }
     });
-    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);
-  });
-};
-
-observer.observe(document.documentElement, {
-  childList: true,
-  subtree: true,
-  attributes: true,
-  characterData: true
-});
+
+    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);
@@ -684,7 +167,6 @@ observer.observe(document.documentElement, {
         tab.classList.add('active');
         document.getElementById(panelId + '-panel').classList.add('active');
         
-        // ネットワークタブを選択した場合はリクエストリストを更新
         if (panelId === 'network') {
           renderNetworkRequests();
         }
@@ -775,29 +257,44 @@ observer.observe(document.documentElement, {
     `;
     container.appendChild(ttfbCard);
 
-// 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);
+    // 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 {
+          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);
+          }
+        } catch (e) {
+          console.error('Web Vitals error:', e);
+        }
       }
-    } catch (e) {
-      console.error('Web Vitals error:', e);
-    }
-  }
-});
+    });
+
     function updateCLS(metric) {
       vitalsData.CLS = metric.value;
       updateVitalDisplay('cls', metric.value, 0.1, 0.25);
@@ -827,14 +324,12 @@ loadWebVitals().then(() => {
       const element = document.getElementById(`${id}-value`);
       if (!element) return;
       
-      // ミリ秒を秒に変換 (TTFB以外)
       const displayValue = id === 'ttfb' ? 
         `${Math.round(value)}ms` : 
         `${value.toFixed(2)}${id === 'cls' ? '' : 's'}`;
       
       element.textContent = displayValue;
       
-      // 閾値に基づいてクラスを設定
       element.className = 'vital-value';
       if (value <= goodThreshold) {
         element.classList.add('vital-good');
@@ -844,7 +339,6 @@ loadWebVitals().then(() => {
         element.classList.add('vital-poor');
       }
       
-      // 閾値表示を更新
       const thresholds = element.parentElement.querySelectorAll('.vital-threshold');
       thresholds.forEach((threshold, index) => {
         threshold.classList.remove('active');
@@ -871,17 +365,14 @@ loadWebVitals().then(() => {
     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;
@@ -927,7 +418,6 @@ loadWebVitals().then(() => {
           body: null
         };
 
-        // レスポンスボディをクローンして読み取る
         const clonedResponse = response.clone();
         const contentType = clonedResponse.headers.get('content-type') || '';
 
@@ -1091,7 +581,6 @@ loadWebVitals().then(() => {
     const detailsPanel = panel.querySelector('.network-details');
     detailsPanel.innerHTML = '';
 
-    // 一般情報
     const generalSection = document.createElement('div');
     generalSection.className = 'network-detail-section';
     generalSection.innerHTML = `
@@ -1105,7 +594,6 @@ loadWebVitals().then(() => {
     `;
     detailsPanel.appendChild(generalSection);
 
-    // リクエストヘッダー
     if (selectedRequest.requestHeaders) {
       const headersSection = document.createElement('div');
       headersSection.className = 'network-detail-section';
@@ -1132,7 +620,6 @@ loadWebVitals().then(() => {
       detailsPanel.appendChild(headersSection);
     }
 
-    // リクエストボディ
     if (selectedRequest.requestBody) {
       const bodySection = document.createElement('div');
       bodySection.className = 'network-detail-section';
@@ -1159,7 +646,6 @@ loadWebVitals().then(() => {
       detailsPanel.appendChild(bodySection);
     }
 
-    // レスポンス
     if (selectedRequest.response) {
       const responseSection = document.createElement('div');
       responseSection.className = 'network-detail-section';
@@ -1186,7 +672,6 @@ loadWebVitals().then(() => {
       detailsPanel.appendChild(responseSection);
     }
 
-    // エラー
     if (selectedRequest.error) {
       const errorSection = document.createElement('div');
       errorSection.className = 'network-detail-section';
@@ -1245,7 +730,6 @@ loadWebVitals().then(() => {
     panel.className = 'devtools-panel';
     panel.id = 'storage-panel';
 
-    // LocalStorage表示
     const localStorageTitle = document.createElement('h3');
     localStorageTitle.textContent = 'Local Storage';
     panel.appendChild(localStorageTitle);
@@ -1267,7 +751,6 @@ loadWebVitals().then(() => {
     };
     panel.appendChild(addLocalStorageBtn);
 
-    // SessionStorage表示
     const sessionStorageTitle = document.createElement('h3');
     sessionStorageTitle.style.marginTop = '20px';
     sessionStorageTitle.textContent = 'Session Storage';
@@ -1290,7 +773,6 @@ loadWebVitals().then(() => {
     };
     panel.appendChild(addSessionStorageBtn);
 
-    // Cookie表示
     const cookiesTitle = document.createElement('h3');
     cookiesTitle.style.marginTop = '20px';
     cookiesTitle.textContent = 'Cookies';
@@ -1313,7 +795,6 @@ loadWebVitals().then(() => {
     };
     panel.appendChild(addCookieBtn);
 
-    // ストレージを表示する関数
     function renderStorage() {
       renderTable(localStorageTable, localStorage, 'local');
       renderTable(sessionStorageTable, sessionStorage, 'session');
@@ -1462,7 +943,6 @@ loadWebVitals().then(() => {
       });
     }
 
-    // 初期表示
     renderStorage();
 
     return panel;
@@ -1474,7 +954,6 @@ loadWebVitals().then(() => {
 
     switch (action) {
       case 'edit-html':
-        // document.documentElement（html要素）は編集不可
         if (selectedElement === document.documentElement) {
           alert('ルートHTML要素は直接編集できません');
           return;
@@ -1635,7 +1114,6 @@ loadWebVitals().then(() => {
     panel.appendChild(log);
     panel.appendChild(input);
 
-    // コンソールメソッドをオーバーライド
     const originalConsole = {
       log: console.log,
       error: console.error,
@@ -1696,7 +1174,8 @@ loadWebVitals().then(() => {
 
     return panel;
   }
- // Elementsパネル作成
+
+  // Elementsパネル作成
   function createElementsPanel() {
     const panel = document.createElement('div');
     panel.className = 'devtools-panel';
@@ -1716,43 +1195,95 @@ loadWebVitals().then(() => {
     container.appendChild(tree);
     container.appendChild(cssPanel);
     panel.appendChild(container);
-    // この関数を 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);
+
+    // CSSパネル更新関数
+    function updateCSSPanel(element) {
+      const cssPanel = document.getElementById('css-panel');
+      cssPanel.innerHTML = '';
+      
+      if (!element) return;
+      
+      if (element.style.length > 0) {
+        const inlineRule = document.createElement('div');
+        inlineRule.className = 'css-rule';
+        
+        const selector = document.createElement('div');
+        selector.className = 'css-selector';
+        selector.textContent = 'インラインスタイル';
+        inlineRule.appendChild(selector);
+        
+        for (let i = 0; i < element.style.length; i++) {
+          const propName = element.style[i];
+          const propValue = element.style[propName];
+          
+          const propDiv = document.createElement('div');
+          propDiv.className = 'css-property';
+          
+          const nameSpan = document.createElement('span');
+          nameSpan.className = 'css-property-name editable';
+          nameSpan.textContent = propName;
+          nameSpan.onclick = () => editCSSProperty(element, propName, 'style');
+          
+          const valueSpan = document.createElement('span');
+          valueSpan.className = 'css-property-value editable';
+          valueSpan.textContent = propValue;
+          valueSpan.onclick = () => editCSSProperty(element, propName, 'style');
+          
+          const toggleSpan = document.createElement('span');
+          toggleSpan.className = 'css-toggle';
+          toggleSpan.textContent = '×';
+          toggleSpan.title = 'プロパティを無効化';
+          toggleSpan.onclick = () => {
+            element.style[propName] = '';
+            updateCSSPanel(element);
+          };
+          
+          propDiv.appendChild(nameSpan);
+          propDiv.appendChild(valueSpan);
+          propDiv.appendChild(toggleSpan);
+          inlineRule.appendChild(propDiv);
+        }
+        
+        cssPanel.appendChild(inlineRule);
       }
+      
+      const computedStyles = window.getComputedStyle(element);
+      const computedRule = document.createElement('div');
+      computedRule.className = 'css-rule';
+      
+      const computedSelector = document.createElement('div');
+      computedSelector.className = 'css-selector';
+      computedSelector.textContent = '計算されたスタイル';
+      computedRule.appendChild(computedSelector);
+      
+      const importantProps = [
+        'display', 'position', 'width', 'height', 'margin', 'padding', 
+        'color', 'background', 'border', 'font', 'flex', 'grid'
+      ];
+      
+      importantProps.forEach(prop => {
+        const value = computedStyles[prop];
+        
+        const propDiv = document.createElement('div');
+        propDiv.className = 'css-property';
+        
+        const nameSpan = document.createElement('span');
+        nameSpan.className = 'css-property-name';
+        nameSpan.textContent = prop;
+        
+        const valueSpan = document.createElement('span');
+        valueSpan.className = 'css-property-value';
+        valueSpan.textContent = value;
+        
+        propDiv.appendChild(nameSpan);
+        propDiv.appendChild(valueSpan);
+        computedRule.appendChild(propDiv);
+      });
+      
+      cssPanel.appendChild(computedRule);
     }
-  }
-}
 
-        // DOMツリー構築
+    // DOMツリー構築
     function buildDOMTree(node, parentElement, depth = 0, isRoot = false) {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = document.createElement('div');
@@ -1760,7 +1291,6 @@ function refreshElementsPanel() {
         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;
@@ -1769,7 +1299,6 @@ function refreshElementsPanel() {
           document.querySelectorAll('.dom-node').forEach(el => el.classList.remove('selected'));
           element.classList.add('selected');
           
-          // HTML要素にはコンテキストメニューを表示しない
           if (node !== document.documentElement) {
             contextMenu.style.display = 'block';
             contextMenu.style.left = `${e.pageX}px`;
@@ -1779,7 +1308,6 @@ function refreshElementsPanel() {
           updateCSSPanel(node);
         };
 
-        // 左クリックで選択
         element.onclick = (e) => {
           if (e.target.classList.contains('dom-toggle')) return;
           
@@ -1793,7 +1321,6 @@ function refreshElementsPanel() {
           updateCSSPanel(node);
         };
 
-        // 子要素がある場合はトグルボタンを追加
         const hasChildren = node.childNodes.length > 0 && 
                           !(node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE && !node.childNodes[0].textContent.trim());
         
@@ -1816,7 +1343,6 @@ function refreshElementsPanel() {
           element.appendChild(toggle);
         }
 
-        // タグ名（HTML要素は編集不可）
         const tag = document.createElement('span');
         tag.className = 'dom-tag';
         tag.textContent = `<${node.tagName.toLowerCase()}`;
@@ -1840,7 +1366,6 @@ function refreshElementsPanel() {
         
         element.appendChild(tag);
 
-        // 属性（HTML要素は編集不可）
         Array.from(node.attributes).forEach(attr => {
           const attrSpan = document.createElement('span');
           attrSpan.className = 'dom-attr';
@@ -1897,92 +1422,6 @@ function refreshElementsPanel() {
         parentElement.appendChild(text);
       }
     }
-    // CSSパネル更新関数
-    function updateCSSPanel(element) {
-      const cssPanel = document.getElementById('css-panel');
-      cssPanel.innerHTML = '';
-      
-      if (!element) return;
-      
-      if (element.style.length > 0) {
-        const inlineRule = document.createElement('div');
-        inlineRule.className = 'css-rule';
-        
-        const selector = document.createElement('div');
-        selector.className = 'css-selector';
-        selector.textContent = 'インラインスタイル';
-        inlineRule.appendChild(selector);
-        
-        for (let i = 0; i < element.style.length; i++) {
-          const propName = element.style[i];
-          const propValue = element.style[propName];
-          
-          const propDiv = document.createElement('div');
-          propDiv.className = 'css-property';
-          
-          const nameSpan = document.createElement('span');
-          nameSpan.className = 'css-property-name editable';
-          nameSpan.textContent = propName;
-          nameSpan.onclick = () => editCSSProperty(element, propName, 'style');
-          
-          const valueSpan = document.createElement('span');
-          valueSpan.className = 'css-property-value editable';
-          valueSpan.textContent = propValue;
-          valueSpan.onclick = () => editCSSProperty(element, propName, 'style');
-          
-          const toggleSpan = document.createElement('span');
-          toggleSpan.className = 'css-toggle';
-          toggleSpan.textContent = '×';
-          toggleSpan.title = 'プロパティを無効化';
-          toggleSpan.onclick = () => {
-            element.style[propName] = '';
-            updateCSSPanel(element);
-          };
-          
-          propDiv.appendChild(nameSpan);
-          propDiv.appendChild(valueSpan);
-          propDiv.appendChild(toggleSpan);
-          inlineRule.appendChild(propDiv);
-        }
-        
-        cssPanel.appendChild(inlineRule);
-      }
-      
-      const computedStyles = window.getComputedStyle(element);
-      const computedRule = document.createElement('div');
-      computedRule.className = 'css-rule';
-      
-      const computedSelector = document.createElement('div');
-      computedSelector.className = 'css-selector';
-      computedSelector.textContent = '計算されたスタイル';
-      computedRule.appendChild(computedSelector);
-      
-      const importantProps = [
-        'display', 'position', 'width', 'height', 'margin', 'padding', 
-        'color', 'background', 'border', 'font', 'flex', 'grid'
-      ];
-      
-      importantProps.forEach(prop => {
-        const value = computedStyles[prop];
-        
-        const propDiv = document.createElement('div');
-        propDiv.className = 'css-property';
-        
-        const nameSpan = document.createElement('span');
-        nameSpan.className = 'css-property-name';
-        nameSpan.textContent = prop;
-        
-        const valueSpan = document.createElement('span');
-        valueSpan.className = 'css-property-value';
-        valueSpan.textContent = value;
-        
-        propDiv.appendChild(nameSpan);
-        propDiv.appendChild(valueSpan);
-        computedRule.appendChild(propDiv);
-      });
-      
-      cssPanel.appendChild(computedRule);
-    }
 
     // CSSプロパティ編集
     function editCSSProperty(element, propName, styleType) {
@@ -2004,20 +1443,53 @@ function refreshElementsPanel() {
       }
     }
 
-    // DOM変更を監視
-    observer.observe(document.documentElement, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      characterData: true
-    });
+    // refreshElementsPanel関数定義
+    refreshElementsPanel = function() {
+      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);
+          }
+        }
+      }
+    };
 
+    // MutationObserverを設定
+    setupMutationObserver();
+
+    // 初期表示
     setTimeout(() => {
       refreshElementsPanel();
     }, 0);
 
     return panel;
   }
+
   // 開発者ツール表示/非表示
   function toggleDevTools() {
     const container = document.getElementById('devtools-container');