Update dev-tools.js

dev-tools.js

@@ -667,30 +667,50 @@
     }
 
     // 初期DOMツリー構築
-    refreshElementsPanel();
+    setTimeout(() => {
+        refreshElementsPanel();
+    }, 0);
 
     return panel;
   }
 
-  // Elementsパネルをリフレッシュ
-  function refreshElementsPanel() {
-    const tree = document.getElementById('dom-tree');
+// refreshElementsPanel関数を以下のように修正
+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);
     
     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);
+        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);
+            }
         }
-      }
     }
-  }
+}
 
   // Storageパネルの作成
   function createStoragePanel() {