dev-tools.js

// 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');
  });
});