Update dev-tools.js

dev-tools.js

@@ -9,7 +9,7 @@
   width: 100%;
   height: 300px; /* 適切な高さに調整 */
   background-color: #fff;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid #ddd;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
   z-index: 9999;
   display: flex;
@@ -78,40 +78,44 @@
 }
 
 /* Console スタイル */
-    #console-log {
+#console-log {
   white-space: pre-wrap;
-      margin: 0;
-      line-height: 1.4;
-      flex: 1;
+  margin: 0;
+  line-height: 1.4;
+  flex: 1;
+  color: #333;
 }
 
 .console-input {
   width: 100%;
-      background: #252a33;
-      border: 1px solid #4fc3f7;
-      color: #e0e0e0;
-      padding: 8px;
-      margin-top: 10px;
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  color: #333;
+  padding: 8px;
+  margin-top: 10px;
+  font-family: monospace;
 }
 
 /* Elements スタイル */
-    .elements-container {
+.elements-container {
   display: flex;
-      flex: 1;
-      overflow: hidden;
+  flex: 1;
+  overflow: hidden;
 }
 
 .dom-tree {
   font-family: monospace;
-      flex: 1;
-      overflow: auto;
-      border-right: 1px solid #4fc3f7;
-      padding-right: 10px;
+  flex: 1;
+  overflow: auto;
+  border-right: 1px solid #ddd;
+  padding-right: 10px;
+  color: #333;
 }
 
 .dom-node {
   margin-left: 15px;
-      position: relative;
+  position: relative;
+  line-height: 1.4;
 }
 
 .dom-node.selected {
@@ -119,104 +123,119 @@
 }
 
 .dom-tag {
-  color: #4fc3f7;
+  color: #0066cc;
+  font-weight: bold;
 }
 
 .dom-attr {
-  color: #ff7043;
+  color: #d33682;
+}
+
+.dom-attr.editable:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.dom-text {
+  color: #333;
 }
 
 .css-panel {
   flex: 1;
-      overflow: auto;
-      padding-left: 10px;
+  overflow: auto;
+  padding-left: 10px;
 }
 
 .css-rule {
   margin-bottom: 15px;
-      border: 1px solid #4fc3f7;
-      padding: 8px;
+  border: 1px solid #ddd;
+  padding: 8px;
+  background-color: #f9f9f9;
 }
 
 .css-selector {
-  color: #4fc3f7;
-      margin-bottom: 5px;
+  color: #0066cc;
+  margin-bottom: 5px;
+  font-weight: bold;
 }
 
 .css-property {
   display: flex;
-      margin-bottom: 3px;
+  margin-bottom: 3px;
 }
 
 .css-property-name {
-  color: #69f0ae;
-      min-width: 120px;
+  color: #d33682;
+  min-width: 120px;
 }
 
 .css-property-value {
-  color: #e0e0e0;
-      flex: 1;
+  color: #333;
+  flex: 1;
 }
 
 .css-toggle {
   margin-left: 10px;
-      color: #ff7043;
-      cursor: pointer;
+  color: #dc322f;
+  cursor: pointer;
 }
 
 /* Context Menu */
-    .context-menu {
+.context-menu {
   position: absolute;
-      background: #252a33;
-      border: 1px solid #4fc3f7;
-      z-index: 10000;
-      min-width: 200px;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
-      display: none;
+  background: #fff;
+  border: 1px solid #ddd;
+  z-index: 10000;
+  min-width: 200px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  display: none;
 }
 
 .context-menu-item {
   padding: 8px 15px;
-      cursor: pointer;
+  cursor: pointer;
+  color: #333;
 }
 
 .context-menu-item:hover {
   background: #4fc3f7;
-      color: #000;
+  color: #000;
 }
 
 /* Storage スタイル */
-    .storage-table {
+.storage-table {
   width: 100%;
-      border-collapse: collapse;
+  border-collapse: collapse;
+  margin-bottom: 10px;
 }
 
 .storage-table th, .storage-table td {
-  border: 1px solid #4fc3f7;
-      padding: 5px;
-      text-align: left;
+  border: 1px solid #ddd;
+  padding: 5px;
+  text-align: left;
 }
 
 .storage-table th {
-  background: #252a33;
+  background: #f5f5f5;
 }
 
 .storage-actions {
   display: flex;
-      gap: 5px;
+  gap: 5px;
 }
 
 .storage-btn {
   background: #4fc3f7;
-      border: none;
-      padding: 2px 5px;
-      cursor: pointer;
+  border: none;
+  padding: 2px 5px;
+  cursor: pointer;
+  border-radius: 3px;
 }
 
 .editable {
   cursor: pointer;
-      padding: 2px 5px;
-      border: 1px dashed transparent;
+  padding: 2px 5px;
+  border: 1px dashed transparent;
 }
 
 .editable:hover {
@@ -224,25 +243,33 @@
 }
 
 .add-btn {
-  background: #69f0ae;
-      color: #000;
-      border: none;
-      padding: 5px 10px;
-      margin-top: 10px;
-      cursor: pointer;
+  background: #4fc3f7;
+  color: #000;
+  border: none;
+  padding: 5px 10px;
+  margin-top: 10px;
+  cursor: pointer;
+  border-radius: 3px;
 }
 
-/* 各パネルの基本スタイル */
-#console-panel {
-  background-color: #fff;
+.json-object {
+  color: #268bd2;
 }
 
-#elements-panel {
-  background-color: #fff;
+.json-string {
+  color: #2aa198;
 }
 
-#storage-panel {
-  background-color: #fff;
+.json-number {
+  color: #d33682;
+}
+
+.json-boolean {
+  color: #b58900;
+}
+
+.json-null {
+  color: #6c71c4;
 }
   `;
   document.head.appendChild(style);
@@ -252,7 +279,6 @@
   let selectedElement = null;
   let selectedDOMNode = null;
 
-  // 開発者ツールのUI構築
   // 開発者ツールのUI構築
   function createDevTools() {
     const container = document.createElement('div');
@@ -443,11 +469,11 @@
         try {
           const result = eval(e.target.value);
           if (result !== undefined) {
-            logMessage('> ' + e.target.value, '#4fc3f7');
-            logMessage('← ' + result, '#69f0ae');
+            logMessage('> ' + e.target.value, '#0066cc');
+            logMessage('← ' + formatOutput(result), '#2aa198');
           }
         } catch (err) {
-          logMessage(err.message, '#ff5252');
+          logMessage(err.message, '#dc322f');
         }
         e.target.value = '';
       }
@@ -461,21 +487,61 @@
       const original = console[method];
       console[method] = (...args) => {
         original.apply(console, args);
-        const color = method === 'error' ? '#ff5252' : method === 'warn' ? '#ffab40' : '#e0e0e0';
-        logMessage(args.join(' '), color);
+        const color = method === 'error' ? '#dc322f' : method === 'warn' ? '#b58900' : '#586e75';
+        logMessage(args.map(arg => formatOutput(arg)).join(' '), color);
       };
     });
 
     function logMessage(message, color) {
       const line = document.createElement('div');
       line.style.color = color;
-      line.textContent = message;
+      line.innerHTML = message;
       log.appendChild(line);
       log.scrollTop = log.scrollHeight;
     }
 
+    // 出力をフォーマットする関数
+    function formatOutput(output) {
+      if (output === null) {
+        return '<span class="json-null">null</span>';
+      }
+      if (output === undefined) {
+        return '<span class="json-null">undefined</span>';
+      }
+      if (typeof output === 'boolean') {
+        return `<span class="json-boolean">${output}</span>`;
+      }
+      if (typeof output === 'number') {
+        return `<span class="json-number">${output}</span>`;
+      }
+      if (typeof output === 'string') {
+        return `<span class="json-string">"${output}"</span>`;
+      }
+      if (typeof output === 'function') {
+        return `<span class="json-object">function ${output.name}() { ... }</span>`;
+      }
+      if (Array.isArray(output)) {
+        return `<span class="json-object">[${output.map(formatOutput).join(', ')}]</span>`;
+      }
+      if (typeof output === 'object') {
+        try {
+          return `<span class="json-object">${JSON.stringify(output, null, 2)
+            .replace(/"([^"]+)":/g, '<span class="json-string">"$1"</span>:')
+            .replace(/"([^"]+)"/g, '<span class="json-string">"$1"</span>')
+            .replace(/\b(true|false)\b/g, '<span class="json-boolean">$1</span>')
+            .replace(/\b(null)\b/g, '<span class="json-null">$1</span>')
+            .replace(/\b(\d+)\b/g, '<span class="json-number">$1</span>')}</span>`;
+        } catch (e) {
+          return `<span class="json-object">${output.toString()}</span>`;
+        }
+      }
+      return output;
+    }
+
     return panel;
   }
+
+  // DOMツリーを構築する関数
   function buildDOMTree(node, parentElement, depth = 0) {
     if (node.nodeType === Node.ELEMENT_NODE) {
       const element = document.createElement('div');
@@ -520,8 +586,16 @@
       // 属性
       Array.from(node.attributes).forEach(attr => {
         const attrSpan = document.createElement('span');
-        attrSpan.className = 'dom-attr';
+        attrSpan.className = 'dom-attr editable';
         attrSpan.textContent = ` ${attr.name}="${attr.value}"`;
+        attrSpan.onclick = (e) => {
+          e.stopPropagation();
+          const newValue = prompt(`属性 ${attr.name} の値を編集`, attr.value);
+          if (newValue !== null) {
+            node.setAttribute(attr.name, newValue);
+            refreshElementsPanel();
+          }
+        };
         element.appendChild(attrSpan);
       });
 
@@ -546,11 +620,20 @@
     } else if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
       const text = document.createElement('div');
       text.style.marginLeft = `${depth * 15}px`;
-      text.style.color = '#e0e0e0';
+      text.className = 'dom-text';
       text.textContent = `"${node.textContent.trim()}"`;
+      text.onclick = (e) => {
+        e.stopPropagation();
+        const newText = prompt('テキストを編集', node.textContent.trim());
+        if (newText !== null) {
+          node.textContent = newText;
+          refreshElementsPanel();
+        }
+      };
       parentElement.appendChild(text);
     }
   }
+
   // Elementsパネルの作成
   function createElementsPanel() {
     const panel = document.createElement('div');
@@ -724,6 +807,7 @@
       }
     }
   }
+
   // Storageパネルの作成
   function createStoragePanel() {
     const panel = document.createElement('div');