Create dev-tools.js

dev-tools.js

@@ -0,0 +1,141 @@
+// dev-tools.js
+document.addEventListener('DOMContentLoaded', () => {
+  // 開発者ツール起動ボタン
+  const openButton = document.createElement('button');
+  openButton.textContent = '開発者ツールを開く';
+  openButton.style.position = 'fixed';
+  openButton.style.top = '10px';
+  openButton.style.right = '10px';
+  document.body.appendChild(openButton);
+
+  // 開発者ツールコンテナ
+  const devToolsContainer = document.createElement('div');
+  devToolsContainer.style.cssText = `
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 400px;
+    background: #242424;
+    color: #fff;
+    font-family: monospace;
+    display: none;
+    border-top: 2px solid #888;
+    flex-direction: column;
+  `;
+
+  // タブバー
+  const tabBar = document.createElement('div');
+  tabBar.style.display = 'flex';
+  tabBar.style.padding = '5px';
+  tabBar.style.gap = '10px';
+  tabBar.style.background = '#1a1a1a';
+
+  // タブボタン
+  const tabs = ['Console', 'Elements', 'Storage'];
+  const contentAreas = {};
+
+  tabs.forEach(tabName => {
+    const tabButton = document.createElement('button');
+    tabButton.textContent = tabName;
+    tabButton.addEventListener('click', () => {
+      Object.values(contentAreas).forEach(area => area.style.display = 'none');
+      contentAreas[tabName].style.display = 'block';
+      tabButton.classList.add('active');
+    });
+    tabBar.appendChild(tabButton);
+
+    const content = document.createElement('div');
+    content.style.display = 'none';
+    content.style.flexGrow = '1';
+    content.style.overflow = 'auto';
+    contentAreas[tabName] = content;
+    devToolsContainer.appendChild(content);
+  });
+
+  // Consoleタブ
+  const consoleContent = contentAreas['Console'];
+  consoleContent.innerHTML = `
+    <input type="text" id="console-input" placeholder="JavaScriptを入力" 
+      style="width: 100%; padding: 5px; background: #333; color: #fff; border: none;">
+    <pre id="console-output" style="padding: 10px; margin: 0;"></pre>
+  `;
+
+  // Consoleログのキャプチャ
+  const originalConsoleLog = console.log;
+  const consoleOutput = consoleContent.querySelector('#console-output');
+  
+  console.log = (...args) => {
+    consoleOutput.textContent += args.join(' ') + '\n';
+    originalConsoleLog(...args);
+  };
+
+  // JavaScript実行
+  consoleContent.querySelector('#console-input').addEventListener('keypress', e => {
+    if (e.key === 'Enter') {
+      try {
+        eval(e.target.value);
+      } catch (err) {
+        console.log('Error:', err.message);
+      }
+      e.target.value = '';
+    }
+  });
+
+  // Elementsタブ
+  const elementsContent = contentAreas['Elements'];
+  elementsContent.innerHTML = '<div class="dom-tree"></div>';
+  
+  function buildDOMTree(element, parent) {
+    const div = document.createElement('div');
+    div.textContent = '<' + element.tagName.toLowerCase() + '>';
+    div.style.paddingLeft = '20px';
+    
+    Array.from(element.children).forEach(child => {
+      buildDOMTree(child, div);
+    });
+    
+    parent.appendChild(div);
+  }
+  
+  buildDOMTree(document.documentElement, elementsContent.querySelector('.dom-tree'));
+
+  // Storageタブ
+  const storageContent = contentAreas['Storage'];
+  storageContent.innerHTML = `
+    <div style="padding: 10px;">
+      <h3>Local Storage</h3>
+      <pre id="local-storage"></pre>
+      <button id="clear-storage">Clear Local Storage</button>
+      
+      <h3>Cookies</h3>
+      <pre id="cookies"></pre>
+    </div>
+  `;
+
+  // ストレージ表示更新
+  function updateStorageDisplay() {
+    storageContent.querySelector('#local-storage').textContent = 
+      JSON.stringify(localStorage, null, 2);
+    storageContent.querySelector('#cookies').textContent = 
+      document.cookie;
+  }
+
+  storageContent.querySelector('#clear-storage').addEventListener('click', () => {
+    localStorage.clear();
+    updateStorageDisplay();
+  });
+
+  updateStorageDisplay();
+
+  // 全体の組み立て
+  devToolsContainer.insertBefore(tabBar, devToolsContainer.firstChild);
+  document.body.appendChild(devToolsContainer);
+
+  // 開閉制御
+  openButton.addEventListener('click', () => {
+    devToolsContainer.style.display = 'flex';
+    contentAreas['Console'].style.display = 'block';
+    tabs[0].classList.add('active');
+  });
+});