Update dev-tools.js

dev-tools.js

@@ -1,101 +1,134 @@
 (function() {
   // グローバル変数宣言
-  let dtContextMenu = null;
-  let dtSelectedElement = null;
-  let dtSelectedDOMNode = null;
-  let dtActiveEditElement = null;
-  let dtNetworkRequests = [];
-  let dtSelectedRequest = null;
-  let dtObserver = null;
-  let dtRefreshElementsPanel = null;
-
-  // DOM変更を監視するMutationObserver (最適化版)
-  const setupMutationObserver = () => {
-    if (dtObserver) dtObserver.disconnect();
-    
-    dtObserver = new MutationObserver(() => {
-      if (dtRefreshElementsPanel) {
-        dtRefreshElementsPanel();
+  let contextMenu = null;
+  let selectedElement = null;
+  let selectedDOMNode = null;
+  let activeEditElement = null;
+  let networkRequests = [];
+  let selectedRequest = null;
+  let vitalsData = {
+    CLS: null,
+    FCP: null,
+    FID: null,
+    LCP: null,
+    TTFB: null
+  };
+  let observer = null;
+  let refreshElementsPanel = null;
+
+  // Web Vitalsスクリプトを動的に読み込み
+  const loadWebVitals = () => {
+    return new Promise((resolve) => {
+      if (window.webVitals) {
+        resolve();
+        return;
       }
-    });
-
-    dtObserver.observe(document.documentElement, {
-      childList: true,
-      subtree: true,
-      attributes: false,
-      characterData: false
+      
+      const webVitalsScript = document.createElement('script');
+      webVitalsScript.src = 'https://unpkg.com/[email protected]/dist/web-vitals.iife.js';
+      webVitalsScript.onload = resolve;
+      document.head.appendChild(webVitalsScript);
     });
   };
 
-  // スタイルの追加 (すべてのクラスにdt-プレフィックス)
+  // スタイルの動的追加 (ダークテーマ)
   const style = document.createElement('style');
   style.textContent = `
-.dt-devtools-container {
+:root {
+  --bg-color: #1e1e1e;
+  --panel-bg: #252526;
+  --border-color: #3c3c3c;
+  --text-color: #e0e0e0;
+  --text-muted: #a0a0a0;
+  --primary-color: #007acc;
+  --primary-hover: #3e9fda;
+  --success-color: #4caf50;
+  --error-color: #f44336;
+  --warning-color: #ff9800;
+  --info-color: #2196f3;
+  --highlight-bg: rgba(0, 122, 204, 0.2);
+  --tab-bg: #2d2d2d;
+  --tab-active-bg: #1e1e1e;
+  --console-log-color: #e0e0e0;
+  --console-error-color: #f44336;
+  --console-warn-color: #ff9800;
+  --console-info-color: #4fc3f7;
+  --json-key: #9cdcfe;
+  --json-string: #ce9178;
+  --json-number: #b5cea8;
+  --json-boolean: #569cd6;
+  --json-null: #569cd6;
+  --dom-tag: #569cd6;
+  --dom-attr: #9cdcfe;
+  --dom-text: #d4d4d4;
+}
+
+.devtools-container {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 300px;
-  background-color: var(--dt-bg-color);
-  border-top: 1px solid var(--dt-border-color);
+  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(--dt-text-color);
+  color: var(--text-color);
 }
 
-.dt-devtools-header {
+.devtools-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 5px 10px;
-  background-color: var(--dt-tab-bg);
-  border-bottom: 1px solid var(--dt-border-color);
+  background-color: var(--tab-bg);
+  border-bottom: 1px solid var(--border-color);
 }
 
-.dt-devtools-tabs {
+.devtools-tabs {
   display: flex;
   gap: 5px;
 }
 
-.dt-devtools-tab {
+.devtools-tab {
   padding: 5px 10px;
   cursor: pointer;
   border-radius: 3px 3px 0 0;
-  background-color: var(--dt-tab-bg);
-  border: 1px solid var(--dt-border-color);
+  background-color: var(--tab-bg);
+  border: 1px solid var(--border-color);
   border-bottom: none;
   font-size: 12px;
-  color: var(--dt-text-muted);
+  color: var(--text-muted);
 }
 
-.dt-devtools-tab.active {
-  background-color: var(--dt-tab-active-bg);
-  color: var(--dt-text-color);
-  border-bottom: 1px solid var(--dt-tab-active-bg);
+.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;
 }
 
-.dt-devtools-close {
+.devtools-close {
   background: none;
   border: none;
   font-size: 16px;
   cursor: pointer;
   padding: 0 5px;
-  color: var(--dt-text-color);
+  color: var(--text-color);
 }
 
-.dt-devtools-content {
+.devtools-content {
   flex: 1;
   overflow: auto;
   position: relative;
-  background-color: var(--dt-panel-bg);
+  background-color: var(--panel-bg);
 }
 
-.dt-devtools-panel {
+.devtools-panel {
   position: absolute;
   top: 0;
   left: 0;
@@ -104,45 +137,45 @@
   padding: 10px;
   overflow: auto;
   display: none;
-  background-color: var(--dt-panel-bg);
+  background-color: var(--panel-bg);
 }
 
-.dt-devtools-panel.active {
+.devtools-panel.active {
   display: block;
 }
 
 /* Console スタイル */
-#dt-console-log {
+#console-log {
   white-space: pre-wrap;
   margin: 0;
   line-height: 1.4;
   flex: 1;
-  color: var(--dt-console-log-color);
+  color: var(--console-log-color);
   font-family: 'Consolas', 'Monaco', monospace;
   font-size: 13px;
 }
 
-.dt-console-log {
-  color: var(--dt-console-log-color);
+.console-log {
+  color: var(--console-log-color);
 }
 
-.dt-console-error {
-  color: var(--dt-console-error-color);
+.console-error {
+  color: var(--console-error-color);
 }
 
-.dt-console-warn {
-  color: var(--dt-console-warn-color);
+.console-warn {
+  color: var(--console-warn-color);
 }
 
-.dt-console-info {
-  color: var(--dt-console-info-color);
+.console-info {
+  color: var(--console-info-color);
 }
 
-.dt-console-input {
+.console-input {
   width: calc(100% - 16px);
-  background: var(--dt-tab-bg);
-  border: 1px solid var(--dt-border-color);
-  color: var(--dt-text-color);
+  background: var(--tab-bg);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
   padding: 8px;
   margin-top: 10px;
   font-family: monospace;
@@ -150,117 +183,117 @@
 }
 
 /* Elements スタイル */
-.dt-elements-container {
+.elements-container {
   display: flex;
   flex: 1;
   overflow: hidden;
 }
 
-.dt-dom-tree {
+.dom-tree {
   font-family: 'Consolas', 'Monaco', monospace;
   flex: 1;
   overflow: auto;
-  border-right: 1px solid var(--dt-border-color);
+  border-right: 1px solid var(--border-color);
   padding-right: 10px;
-  color: var(--dt-dom-text);
+  color: var(--dom-text);
   font-size: 13px;
 }
 
-.dt-dom-node {
+.dom-node {
   margin-left: 15px;
   position: relative;
   line-height: 1.4;
   transition: background-color 0.3s;
 }
 
-.dt-dom-node.selected {
-  background: var(--dt-highlight-bg);
+.dom-node.selected {
+  background: var(--highlight-bg);
 }
 
-.dt-dom-node.highlight {
-  animation: dt-highlight-fade 1.5s;
+.dom-node.highlight {
+  animation: highlight-fade 1.5s;
 }
 
-@keyframes dt-highlight-fade {
+@keyframes highlight-fade {
   0% { background-color: rgba(79, 195, 247, 0.5); }
   100% { background-color: transparent; }
 }
 
-.dt-dom-tag {
-  color: var(--dt-dom-tag);
+.dom-tag {
+  color: var(--dom-tag);
   font-weight: bold;
 }
 
-.dt-dom-attr {
-  color: var(--dt-dom-attr);
+.dom-attr {
+  color: var(--dom-attr);
 }
 
-.dt-dom-attr.editable:hover {
+.dom-attr.editable:hover {
   text-decoration: underline;
   cursor: pointer;
 }
 
-.dt-dom-text {
-  color: var(--dt-dom-text);
+.dom-text {
+  color: var(--dom-text);
 }
 
-.dt-dom-edit-input {
-  background: var(--dt-panel-bg);
-  border: 1px solid var(--dt-primary-color);
+.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(--dt-text-color);
+  color: var(--text-color);
 }
 
-.dt-css-panel {
+.css-panel {
   flex: 1;
   overflow: auto;
   padding-left: 10px;
   font-size: 13px;
 }
 
-.dt-css-rule {
+.css-rule {
   margin-bottom: 15px;
-  border: 1px solid var(--dt-border-color);
+  border: 1px solid var(--border-color);
   padding: 8px;
-  background-color: var(--dt-tab-bg);
+  background-color: var(--tab-bg);
   border-radius: 3px;
 }
 
-.dt-css-selector {
-  color: var(--dt-primary-color);
+.css-selector {
+  color: var(--primary-color);
   margin-bottom: 5px;
   font-weight: bold;
 }
 
-.dt-css-property {
+.css-property {
   display: flex;
   margin-bottom: 3px;
 }
 
-.dt-css-property-name {
-  color: var(--dt-dom-attr);
+.css-property-name {
+  color: var(--dom-attr);
   min-width: 120px;
 }
 
-.dt-css-property-value {
-  color: var(--dt-dom-text);
+.css-property-value {
+  color: var(--dom-text);
   flex: 1;
 }
 
-.dt-css-toggle {
+.css-toggle {
   margin-left: 10px;
-  color: var(--dt-error-color);
+  color: var(--error-color);
   cursor: pointer;
 }
 
 /* Context Menu */
-.dt-context-menu {
+.context-menu {
   position: absolute;
-  background: var(--dt-panel-bg);
-  border: 1px solid var(--dt-border-color);
+  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);
@@ -269,43 +302,43 @@
   overflow: hidden;
 }
 
-.dt-context-menu-item {
+.context-menu-item {
   padding: 8px 15px;
   cursor: pointer;
-  color: var(--dt-text-color);
+  color: var(--text-color);
   font-size: 13px;
 }
 
-.dt-context-menu-item:hover {
-  background: var(--dt-primary-color);
+.context-menu-item:hover {
+  background: var(--primary-color);
   color: #000;
 }
 
 /* Storage スタイル */
-.dt-storage-table {
+.storage-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 10px;
   font-size: 13px;
 }
 
-.dt-storage-table th, .dt-storage-table td {
-  border: 1px solid var(--dt-border-color);
+.storage-table th, .storage-table td {
+  border: 1px solid var(--border-color);
   padding: 5px;
   text-align: left;
 }
 
-.dt-storage-table th {
-  background: var(--dt-tab-bg);
+.storage-table th {
+  background: var(--tab-bg);
 }
 
-.dt-storage-actions {
+.storage-actions {
   display: flex;
   gap: 5px;
 }
 
-.dt-storage-btn {
-  background: var(--dt-primary-color);
+.storage-btn {
+  background: var(--primary-color);
   border: none;
   padding: 2px 5px;
   cursor: pointer;
@@ -314,18 +347,18 @@
   font-size: 12px;
 }
 
-.dt-editable {
+.editable {
   cursor: pointer;
   padding: 2px 5px;
   border: 1px dashed transparent;
 }
 
-.dt-editable:hover {
-  border-color: var(--dt-primary-color);
+.editable:hover {
+  border-color: var(--primary-color);
 }
 
-.dt-add-btn {
-  background: var(--dt-primary-color);
+.add-btn {
+  background: var(--primary-color);
   color: #000;
   border: none;
   padding: 5px 10px;
@@ -335,47 +368,47 @@
   font-size: 13px;
 }
 
-.dt-add-btn:hover {
-  background: var(--dt-primary-hover);
+.add-btn:hover {
+  background: var(--primary-hover);
 }
 
 /* Network スタイル */
-.dt-network-container {
+.network-container {
   display: flex;
   height: 100%;
   overflow: hidden;
 }
 
-.dt-network-requests {
+.network-requests {
   width: 40%;
   overflow-y: auto;
-  border-right: 1px solid var(--dt-border-color);
+  border-right: 1px solid var(--border-color);
   font-size: 13px;
 }
 
-.dt-network-details {
+.network-details {
   width: 60%;
   overflow-y: auto;
   padding-left: 10px;
 }
 
-.dt-network-request {
+.network-request {
   padding: 8px;
-  border-bottom: 1px solid var(--dt-border-color);
+  border-bottom: 1px solid var(--border-color);
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 
-.dt-network-request:hover {
+.network-request:hover {
   background-color: rgba(0, 122, 204, 0.1);
 }
 
-.dt-network-request.selected {
-  background-color: var(--dt-highlight-bg);
+.network-request.selected {
+  background-color: var(--highlight-bg);
 }
 
-.dt-network-status {
+.network-status {
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -386,51 +419,51 @@
   flex-shrink: 0;
 }
 
-.dt-network-status.success {
-  background-color: var(--dt-success-color);
+.network-status.success {
+  background-color: var(--success-color);
   color: white;
 }
 
-.dt-network-status.error {
-  background-color: var(--dt-error-color);
+.network-status.error {
+  background-color: var(--error-color);
   color: white;
 }
 
-.dt-network-method {
+.network-method {
   font-weight: bold;
   margin-right: 8px;
-  color: var(--dt-primary-color);
+  color: var(--primary-color);
   min-width: 40px;
 }
 
-.dt-network-url {
+.network-url {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.dt-network-time {
-  color: var(--dt-text-muted);
+.network-time {
+  color: var(--text-muted);
   font-size: 11px;
   margin-left: 8px;
 }
 
-.dt-network-detail-section {
+.network-detail-section {
   margin-bottom: 15px;
 }
 
-.dt-network-detail-title {
+.network-detail-title {
   font-weight: bold;
   margin-bottom: 5px;
-  color: var(--dt-primary-color);
+  color: var(--primary-color);
 }
 
-.dt-network-detail-content {
-  background: var(--dt-tab-bg);
+.network-detail-content {
+  background: var(--tab-bg);
   padding: 8px;
   border-radius: 3px;
-  border: 1px solid var(--dt-border-color);
+  border: 1px solid var(--border-color);
   font-family: monospace;
   white-space: pre-wrap;
   font-size: 12px;
@@ -438,107 +471,183 @@
   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 */
-.dt-dom-toggle {
+.dom-toggle {
   position: absolute;
   left: -12px;
   top: 2px;
   width: 10px;
   height: 10px;
   cursor: pointer;
-  background-color: var(--dt-text-muted);
+  background-color: var(--text-muted);
   clip-path: polygon(0 0, 100% 50%, 0 100%);
   transition: transform 0.2s;
 }
 
-.dt-dom-toggle.collapsed {
+.dom-toggle.collapsed {
   transform: rotate(-90deg);
 }
 
-.dt-dom-children {
+.dom-children {
   overflow: hidden;
   transition: max-height 0.3s ease-out;
 }
 
 /* JSON スタイル */
-.dt-json-key {
-  color: var(--dt-json-key);
-}
-
-.dt-json-string {
-  color: var(--dt-json-string);
+.json-key {
+  color: var(--json-key);
 }
 
-.dt-json-number {
-  color: var(--dt-json-number);
+.json-string {
+  color: var(--json-string);
 }
 
-.dt-json-boolean {
-  color: var(--dt-json-boolean);
+.json-number {
+  color: var(--json-number);
 }
 
-.dt-json-null {
-  color: var(--dt-json-null);
+.json-boolean {
+  color: var(--json-boolean);
 }
 
-/* CSS変数定義 */
-:root {
-  --dt-bg-color: #1e1e1e;
-  --dt-panel-bg: #252526;
-  --dt-border-color: #3c3c3c;
-  --dt-text-color: #e0e0e0;
-  --dt-text-muted: #a0a0a0;
-  --dt-primary-color: #007acc;
-  --dt-primary-hover: #3e9fda;
-  --dt-success-color: #4caf50;
-  --dt-error-color: #f44336;
-  --dt-warning-color: #ff9800;
-  --dt-info-color: #2196f3;
-  --dt-highlight-bg: rgba(0, 122, 204, 0.2);
-  --dt-tab-bg: #2d2d2d;
-  --dt-tab-active-bg: #1e1e1e;
-  --dt-console-log-color: #e0e0e0;
-  --dt-console-error-color: #f44336;
-  --dt-console-warn-color: #ff9800;
-  --dt-console-info-color: #4fc3f7;
-  --dt-json-key: #9cdcfe;
-  --dt-json-string: #ce9178;
-  --dt-json-number: #b5cea8;
-  --dt-json-boolean: #569cd6;
-  --dt-json-null: #569cd6;
-  --dt-dom-tag: #569cd6;
-  --dt-dom-attr: #9cdcfe;
-  --dt-dom-text: #d4d4d4;
+.json-null {
+  color: var(--json-null);
 }
   `;
   document.head.appendChild(style);
 
+  // DOM変更を監視するMutationObserver
+  const 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();
+      }
+    });
+
+    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);
+    node.setAttribute('data-element-id', elementId);
+    
+    setTimeout(() => {
+      const domNode = document.querySelector(`[data-element-id="${elementId}"]`);
+      if (domNode) {
+        domNode.classList.add('highlight');
+        setTimeout(() => {
+          domNode.classList.remove('highlight');
+        }, 1500);
+      }
+    }, 100);
+  }
+
   // 開発者ツールのメイン関数
   const createDevTools = () => {
     const container = document.createElement('div');
-    container.className = 'dt-devtools-container';
-    container.id = 'dt-devtools-container';
+    container.className = 'devtools-container';
+    container.id = 'devtools-container';
     container.style.display = 'none';
 
     // ヘッダー部分
     const header = document.createElement('div');
-    header.className = 'dt-devtools-header';
+    header.className = 'devtools-header';
 
     const tabs = document.createElement('div');
-    tabs.className = 'dt-devtools-tabs';
+    tabs.className = 'devtools-tabs';
 
     const consoleTab = createTab('Console', 'console');
     const elementsTab = createTab('Elements', 'elements');
     const networkTab = createTab('Network', 'network');
     const storageTab = createTab('Storage', 'storage');
+    const vitalsTab = createTab('Web Vitals', 'vitals');
 
     tabs.appendChild(consoleTab);
     tabs.appendChild(elementsTab);
     tabs.appendChild(networkTab);
     tabs.appendChild(storageTab);
+    tabs.appendChild(vitalsTab);
 
     const closeBtn = document.createElement('button');
-    closeBtn.className = 'dt-devtools-close';
+    closeBtn.className = 'devtools-close';
     closeBtn.textContent = '×';
     closeBtn.onclick = toggleDevTools;
 
@@ -547,17 +656,19 @@
 
     // コンテンツ部分
     const content = document.createElement('div');
-    content.className = 'dt-devtools-content';
+    content.className = 'devtools-content';
 
     const consolePanel = createConsolePanel();
     const elementsPanel = createElementsPanel();
     const networkPanel = createNetworkPanel();
     const storagePanel = createStoragePanel();
+    const vitalsPanel = createVitalsPanel();
 
     content.appendChild(consolePanel);
     content.appendChild(elementsPanel);
     content.appendChild(networkPanel);
     content.appendChild(storagePanel);
+    content.appendChild(vitalsPanel);
 
     container.appendChild(header);
     container.appendChild(content);
@@ -570,11 +681,11 @@
     // タブ切り替え機能
     function createTab(name, panelId) {
       const tab = document.createElement('div');
-      tab.className = 'dt-devtools-tab';
+      tab.className = 'devtools-tab';
       tab.textContent = name;
       tab.onclick = () => {
-        document.querySelectorAll('.dt-devtools-tab').forEach(t => t.classList.remove('active'));
-        document.querySelectorAll('.dt-devtools-panel').forEach(p => p.classList.remove('active'));
+        document.querySelectorAll('.devtools-tab').forEach(t => t.classList.remove('active'));
+        document.querySelectorAll('.devtools-panel').forEach(p => p.classList.remove('active'));
         tab.classList.add('active');
         document.getElementById(panelId + '-panel').classList.add('active');
         
@@ -588,24 +699,188 @@
     elementsTab.click();
   };
 
+  // Web Vitalsパネル���成
+  function createVitalsPanel() {
+    const panel = document.createElement('div');
+    panel.className = 'devtools-panel';
+    panel.id = 'vitals-panel';
+
+    const container = document.createElement('div');
+    container.className = 'vitals-container';
+    panel.appendChild(container);
+
+    // CLS (Cumulative Layout Shift)
+    const clsCard = document.createElement('div');
+    clsCard.className = 'vital-card';
+    clsCard.innerHTML = `
+      <div class="vital-title">CLS (Cumulative Layout Shift) <span class="vital-description">視覚的な安定性</span></div>
+      <div class="vital-value" id="cls-value">-</div>
+      <div class="vital-thresholds">
+        <div class="vital-threshold">Good: &lt; 0.1</div>
+        <div class="vital-threshold">Needs Improvement: &lt; 0.25</div>
+        <div class="vital-threshold">Poor: ≥ 0.25</div>
+      </div>
+    `;
+    container.appendChild(clsCard);
+
+    // FCP (First Contentful Paint)
+    const fcpCard = document.createElement('div');
+    fcpCard.className = 'vital-card';
+    fcpCard.innerHTML = `
+      <div class="vital-title">FCP (First Contentful Paint) <span class="vital-description">最初のコンテンツ表示</span></div>
+      <div class="vital-value" id="fcp-value">-</div>
+      <div class="vital-thresholds">
+        <div class="vital-threshold">Good: &lt; 1.8s</div>
+        <div class="vital-threshold">Needs Improvement: &lt; 3s</div>
+        <div class="vital-threshold">Poor: ≥ 3s</div>
+      </div>
+    `;
+    container.appendChild(fcpCard);
+
+    // FID (First Input Delay)
+    const fidCard = document.createElement('div');
+    fidCard.className = 'vital-card';
+    fidCard.innerHTML = `
+      <div class="vital-title">FID (First Input Delay) <span class="vital-description">最初の入力遅延</span></div>
+      <div class="vital-value" id="fid-value">-</div>
+      <div class="vital-thresholds">
+        <div class="vital-threshold">Good: &lt; 100ms</div>
+        <div class="vital-threshold">Needs Improvement: &lt; 300ms</div>
+        <div class="vital-threshold">Poor: ≥ 300ms</div>
+      </div>
+    `;
+    container.appendChild(fidCard);
+
+    // LCP (Largest Contentful Paint)
+    const lcpCard = document.createElement('div');
+    lcpCard.className = 'vital-card';
+    lcpCard.innerHTML = `
+      <div class="vital-title">LCP (Largest Contentful Paint) <span class="vital-description">最大のコンテンツ表示</span></div>
+      <div class="vital-value" id="lcp-value">-</div>
+      <div class="vital-thresholds">
+        <div class="vital-threshold">Good: &lt; 2.5s</div>
+        <div class="vital-threshold">Needs Improvement: &lt; 4s</div>
+        <div class="vital-threshold">Poor: ≥ 4s</div>
+      </div>
+    `;
+    container.appendChild(lcpCard);
+
+    // TTFB (Time to First Byte)
+    const ttfbCard = document.createElement('div');
+    ttfbCard.className = 'vital-card';
+    ttfbCard.innerHTML = `
+      <div class="vital-title">TTFB (Time to First Byte) <span class="vital-description">最初のバイト到達時間</span></div>
+      <div class="vital-value" id="ttfb-value">-</div>
+      <div class="vital-thresholds">
+        <div class="vital-threshold">Good: &lt; 800ms</div>
+        <div class="vital-threshold">Needs Improvement: &lt; 1.8s</div>
+        <div class="vital-threshold">Poor: ≥ 1.8s</div>
+      </div>
+    `;
+    container.appendChild(ttfbCard);
+
+    // Web Vitalsの計測を開始
+    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);
+        }
+      }
+    });
+
+    function updateCLS(metric) {
+      vitalsData.CLS = metric.value;
+      updateVitalDisplay('cls', metric.value, 0.1, 0.25);
+    }
+
+    function updateFCP(metric) {
+      vitalsData.FCP = metric.value;
+      updateVitalDisplay('fcp', metric.value, 1800, 3000);
+    }
+
+    function updateFID(metric) {
+      vitalsData.FID = metric.value;
+      updateVitalDisplay('fid', metric.value, 100, 300);
+    }
+
+    function updateLCP(metric) {
+      vitalsData.LCP = metric.value;
+      updateVitalDisplay('lcp', metric.value, 2500, 4000);
+    }
+
+    function updateTTFB(metric) {
+      vitalsData.TTFB = metric.value;
+      updateVitalDisplay('ttfb', metric.value, 800, 1800);
+    }
+
+    function updateVitalDisplay(id, value, goodThreshold, needsImprovementThreshold) {
+      const element = document.getElementById(`${id}-value`);
+      if (!element) return;
+      
+      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');
+      } else if (value <= needsImprovementThreshold) {
+        element.classList.add('vital-needs-improvement');
+      } else {
+        element.classList.add('vital-poor');
+      }
+      
+      const thresholds = element.parentElement.querySelectorAll('.vital-threshold');
+      thresholds.forEach((threshold, index) => {
+        threshold.classList.remove('active');
+        if (
+          (index === 0 && value <= goodThreshold) ||
+          (index === 1 && value > goodThreshold && value <= needsImprovementThreshold) ||
+          (index === 2 && value > needsImprovementThreshold)
+        ) {
+          threshold.classList.add('active');
+        }
+      });
+    }
+
+    return panel;
+  }
+
   // ネットワークパネル作成
   function createNetworkPanel() {
     const panel = document.createElement('div');
-    panel.className = 'dt-devtools-panel';
+    panel.className = 'devtools-panel';
     panel.id = 'network-panel';
 
     const container = document.createElement('div');
-    container.className = 'dt-network-container';
+    container.className = 'network-container';
     panel.appendChild(container);
 
     // リクエストリスト
     const requestsList = document.createElement('div');
-    requestsList.className = 'dt-network-requests';
+    requestsList.className = 'network-requests';
     container.appendChild(requestsList);
 
     // 詳細パネル
     const detailsPanel = document.createElement('div');
-    detailsPanel.className = 'dt-network-details';
+    detailsPanel.className = 'network-details';
     container.appendChild(detailsPanel);
 
     // ネットワークリクエストを監視
@@ -637,7 +912,7 @@
         error: null
       };
 
-      dtNetworkRequests.push(requestData);
+      networkRequests.push(requestData);
       renderNetworkRequests();
 
       try {
@@ -714,7 +989,7 @@
         error: null
       };
 
-      dtNetworkRequests.push(requestData);
+      networkRequests.push(requestData);
       renderNetworkRequests();
 
       this.addEventListener('load', function() {
@@ -766,38 +1041,38 @@
     const panel = document.getElementById('network-panel');
     if (!panel || !panel.classList.contains('active')) return;
 
-    const requestsList = panel.querySelector('.dt-network-requests');
-    const detailsPanel = panel.querySelector('.dt-network-details');
+    const requestsList = panel.querySelector('.network-requests');
+    const detailsPanel = panel.querySelector('.network-details');
 
     requestsList.innerHTML = '';
     
-    dtNetworkRequests.forEach(request => {
+    networkRequests.forEach(request => {
       const requestElement = document.createElement('div');
-      requestElement.className = 'dt-network-request';
-      if (dtSelectedRequest && dtSelectedRequest.id === request.id) {
+      requestElement.className = 'network-request';
+      if (selectedRequest && selectedRequest.id === request.id) {
         requestElement.classList.add('selected');
       }
       
       requestElement.onclick = () => {
-        dtSelectedRequest = request;
+        selectedRequest = request;
         renderNetworkRequests();
         renderNetworkDetails();
       };
       
       const statusElement = document.createElement('div');
-      statusElement.className = `dt-network-status ${request.status}`;
+      statusElement.className = `network-status ${request.status}`;
       statusElement.textContent = request.status === 'success' ? '✓' : '✕';
       
       const methodElement = document.createElement('div');
-      methodElement.className = 'dt-network-method';
+      methodElement.className = 'network-method';
       methodElement.textContent = request.method;
       
       const urlElement = document.createElement('div');
-      urlElement.className = 'dt-network-url';
+      urlElement.className = 'network-url';
       urlElement.textContent = request.url;
       
       const timeElement = document.createElement('div');
-      timeElement.className = 'dt-network-time';
+      timeElement.className = 'network-time';
       timeElement.textContent = request.duration ? `${Math.round(request.duration)}ms` : '';
       
       requestElement.appendChild(statusElement);
@@ -812,43 +1087,43 @@
   // ネットワークリクエストの詳細を表示
   function renderNetworkDetails() {
     const panel = document.getElementById('network-panel');
-    if (!panel || !dtSelectedRequest) return;
+    if (!panel || !selectedRequest) return;
 
-    const detailsPanel = panel.querySelector('.dt-network-details');
+    const detailsPanel = panel.querySelector('.network-details');
     detailsPanel.innerHTML = '';
 
     // 一般情報
     const generalSection = document.createElement('div');
-    generalSection.className = 'dt-network-detail-section';
+    generalSection.className = 'network-detail-section';
     generalSection.innerHTML = `
-      <div class="dt-network-detail-title">一般</div>
-      <div class="dt-network-detail-content">
-        <strong>URL:</strong> ${dtSelectedRequest.url}<br>
-        <strong>メソッド:</strong> ${dtSelectedRequest.method}<br>
-        <strong>ステータス:</strong> ${dtSelectedRequest.response ? dtSelectedRequest.response.status : '-'}<br>
-        <strong>時間:</strong> ${dtSelectedRequest.duration ? Math.round(dtSelectedRequest.duration) + 'ms' : '-'}
+      <div class="network-detail-title">一般</div>
+      <div class="network-detail-content">
+        <strong>URL:</strong> ${selectedRequest.url}<br>
+        <strong>メソッド:</strong> ${selectedRequest.method}<br>
+        <strong>ステータス:</strong> ${selectedRequest.response ? selectedRequest.response.status : '-'}<br>
+        <strong>時間:</strong> ${selectedRequest.duration ? Math.round(selectedRequest.duration) + 'ms' : '-'}
       </div>
     `;
     detailsPanel.appendChild(generalSection);
 
     // リクエストヘッダー
-    if (dtSelectedRequest.requestHeaders) {
+    if (selectedRequest.requestHeaders) {
       const headersSection = document.createElement('div');
-      headersSection.className = 'dt-network-detail-section';
+      headersSection.className = 'network-detail-section';
       
       const headersTitle = document.createElement('div');
-      headersTitle.className = 'dt-network-detail-title';
+      headersTitle.className = 'network-detail-title';
       headersTitle.textContent = 'リクエストヘッダー';
       
       const headersContent = document.createElement('div');
-      headersContent.className = 'dt-network-detail-content';
+      headersContent.className = 'network-detail-content';
       
-      if (typeof dtSelectedRequest.requestHeaders === 'object' && !(dtSelectedRequest.requestHeaders instanceof Headers)) {
-        Object.entries(dtSelectedRequest.requestHeaders).forEach(([key, value]) => {
+      if (typeof selectedRequest.requestHeaders === 'object' && !(selectedRequest.requestHeaders instanceof Headers)) {
+        Object.entries(selectedRequest.requestHeaders).forEach(([key, value]) => {
           headersContent.innerHTML += `<strong>${key}:</strong> ${value}<br>`;
         });
-      } else if (dtSelectedRequest.requestHeaders instanceof Headers) {
-        dtSelectedRequest.requestHeaders.forEach((value, key) => {
+      } else if (selectedRequest.requestHeaders instanceof Headers) {
+        selectedRequest.requestHeaders.forEach((value, key) => {
           headersContent.innerHTML += `<strong>${key}:</strong> ${value}<br>`;
         });
       }
@@ -859,22 +1134,22 @@
     }
 
     // リクエストボディ
-    if (dtSelectedRequest.requestBody) {
+    if (selectedRequest.requestBody) {
       const bodySection = document.createElement('div');
-      bodySection.className = 'dt-network-detail-section';
+      bodySection.className = 'network-detail-section';
       
       const bodyTitle = document.createElement('div');
-      bodyTitle.className = 'dt-network-detail-title';
+      bodyTitle.className = 'network-detail-title';
       bodyTitle.textContent = 'リクエストボディ';
       
       const bodyContent = document.createElement('div');
-      bodyContent.className = 'dt-network-detail-content';
+      bodyContent.className = 'network-detail-content';
       
       try {
-        if (typeof dtSelectedRequest.requestBody === 'string') {
-          bodyContent.textContent = dtSelectedRequest.requestBody;
-        } else if (typeof dtSelectedRequest.requestBody === 'object') {
-          bodyContent.textContent = JSON.stringify(dtSelectedRequest.requestBody, null, 2);
+        if (typeof selectedRequest.requestBody === 'string') {
+          bodyContent.textContent = selectedRequest.requestBody;
+        } else if (typeof selectedRequest.requestBody === 'object') {
+          bodyContent.textContent = JSON.stringify(selectedRequest.requestBody, null, 2);
         }
       } catch (e) {
         bodyContent.textContent = 'ボディを表示できません';
@@ -886,22 +1161,22 @@
     }
 
     // レスポンス
-    if (dtSelectedRequest.response) {
+    if (selectedRequest.response) {
       const responseSection = document.createElement('div');
-      responseSection.className = 'dt-network-detail-section';
+      responseSection.className = 'network-detail-section';
       
       const responseTitle = document.createElement('div');
-      responseTitle.className = 'dt-network-detail-title';
+      responseTitle.className = 'network-detail-title';
       responseTitle.textContent = 'レスポンス';
       
       const responseContent = document.createElement('div');
-      responseContent.className = 'dt-network-detail-content';
+      responseContent.className = 'network-detail-content';
       
-      if (dtSelectedRequest.response.body) {
-        if (typeof dtSelectedRequest.response.body === 'object') {
-          responseContent.textContent = JSON.stringify(dtSelectedRequest.response.body, null, 2);
+      if (selectedRequest.response.body) {
+        if (typeof selectedRequest.response.body === 'object') {
+          responseContent.textContent = JSON.stringify(selectedRequest.response.body, null, 2);
         } else {
-          responseContent.textContent = dtSelectedRequest.response.body;
+          responseContent.textContent = selectedRequest.response.body;
         }
       } else {
         responseContent.textContent = 'レスポンスボディがありません';
@@ -913,20 +1188,20 @@
     }
 
     // エラー
-    if (dtSelectedRequest.error) {
+    if (selectedRequest.error) {
       const errorSection = document.createElement('div');
-      errorSection.className = 'dt-network-detail-section';
+      errorSection.className = 'network-detail-section';
       
       const errorTitle = document.createElement('div');
-      errorTitle.className = 'dt-network-detail-title';
+      errorTitle.className = 'network-detail-title';
       errorTitle.textContent = 'エラー';
       
       const errorContent = document.createElement('div');
-      errorContent.className = 'dt-network-detail-content';
-      errorContent.textContent = `${dtSelectedRequest.error.name}: ${dtSelectedRequest.error.message}`;
+      errorContent.className = 'network-detail-content';
+      errorContent.textContent = `${selectedRequest.error.name}: ${selectedRequest.error.message}`;
       
-      if (dtSelectedRequest.error.stack) {
-        errorContent.innerHTML += `<br><br>${dtSelectedRequest.error.stack.replace(/\n/g, '<br>')}`;
+      if (selectedRequest.error.stack) {
+        errorContent.innerHTML += `<br><br>${selectedRequest.error.stack.replace(/\n/g, '<br>')}`;
       }
       
       errorSection.appendChild(errorTitle);
@@ -937,31 +1212,30 @@
 
   // コンテキストメニュー作成
   function createContextMenu() {
-    dtContextMenu = document.createElement('div');
-    dtContextMenu.className = 'dt-context-menu';
-    dtContextMenu.innerHTML = `
-      <div class="dt-context-menu-item" data-action="edit-html">HTMLとして編集</div>
-      <div class="dt-context-menu-item" data-action="edit-whole-html">HTML全体を編集</div>
-      <div class="dt-context-menu-item" data-action="add-attribute">属性を追加</div>
-      <div class="dt-context-menu-item" data-action="edit-element">要素を編集</div>
-      <div class="dt-context-menu-item" data-action="duplicate">要素を複製</div>
-      <div class="dt-context-menu-item" data-action="remove">要素を削除</div>
-      <div class="dt-context-menu-item" data-action="toggle-visibility">要素を非表示</div>
-      <div class="dt-context-menu-item" data-action="force-state">状態を強制</div>
+    contextMenu = document.createElement('div');
+    contextMenu.className = 'context-menu';
+    contextMenu.innerHTML = `
+      <div class="context-menu-item" data-action="edit-html">HTMLとして編集</div>
+      <div class="context-menu-item" data-action="add-attribute">属性を追加</div>
+      <div class="context-menu-item" data-action="edit-element">要素を編集</div>
+      <div class="context-menu-item" data-action="duplicate">要素を複製</div>
+      <div class="context-menu-item" data-action="remove">要素を削除</div>
+      <div class="context-menu-item" data-action="toggle-visibility">要素を非表示</div>
+      <div class="context-menu-item" data-action="force-state">状態を強制</div>
     `;
-    document.body.appendChild(dtContextMenu);
+    document.body.appendChild(contextMenu);
 
-    dtContextMenu.querySelectorAll('.dt-context-menu-item').forEach(item => {
+    contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
       item.addEventListener('click', (e) => {
         const action = e.target.getAttribute('data-action');
         handleContextMenuAction(action);
-        dtContextMenu.style.display = 'none';
+        contextMenu.style.display = 'none';
       });
     });
 
     document.addEventListener('click', (e) => {
-      if (e.target !== dtContextMenu && !dtContextMenu.contains(e.target)) {
-        dtContextMenu.style.display = 'none';
+      if (e.target !== contextMenu && !contextMenu.contains(e.target)) {
+        contextMenu.style.display = 'none';
       }
     });
   }
@@ -969,7 +1243,7 @@
   // Storageパネル作成
   function createStoragePanel() {
     const panel = document.createElement('div');
-    panel.className = 'dt-devtools-panel';
+    panel.className = 'devtools-panel';
     panel.id = 'storage-panel';
 
     // LocalStorage表示
@@ -978,11 +1252,11 @@
     panel.appendChild(localStorageTitle);
 
     const localStorageTable = document.createElement('table');
-    localStorageTable.className = 'dt-storage-table';
+    localStorageTable.className = 'storage-table';
     panel.appendChild(localStorageTable);
 
     const addLocalStorageBtn = document.createElement('button');
-    addLocalStorageBtn.className = 'dt-add-btn';
+    addLocalStorageBtn.className = 'add-btn';
     addLocalStorageBtn.textContent = '+ Local Storageに追加';
     addLocalStorageBtn.onclick = () => {
       const key = prompt('キー名を入力');
@@ -1001,11 +1275,11 @@
     panel.appendChild(sessionStorageTitle);
 
     const sessionStorageTable = document.createElement('table');
-    sessionStorageTable.className = 'dt-storage-table';
+    sessionStorageTable.className = 'storage-table';
     panel.appendChild(sessionStorageTable);
 
     const addSessionStorageBtn = document.createElement('button');
-    addSessionStorageBtn.className = 'dt-add-btn';
+    addSessionStorageBtn.className = 'add-btn';
     addSessionStorageBtn.textContent = '+ Session Storageに追加';
     addSessionStorageBtn.onclick = () => {
       const key = prompt('キー名を入力');
@@ -1024,11 +1298,11 @@
     panel.appendChild(cookiesTitle);
 
     const cookiesTable = document.createElement('table');
-    cookiesTable.className = 'dt-storage-table';
+    cookiesTable.className = 'storage-table';
     panel.appendChild(cookiesTable);
 
     const addCookieBtn = document.createElement('button');
-    addCookieBtn.className = 'dt-add-btn';
+    addCookieBtn.className = 'add-btn';
     addCookieBtn.textContent = '+ Cookieに追加';
     addCookieBtn.onclick = () => {
       const name = prompt('Cookie名を入力');
@@ -1069,7 +1343,7 @@
         
         const keyCell = document.createElement('td');
         const keySpan = document.createElement('span');
-        keySpan.className = 'dt-editable';
+        keySpan.className = 'editable';
         keySpan.textContent = key;
         keySpan.onclick = () => {
           const newKey = prompt('新しいキー名を入力', key);
@@ -1083,7 +1357,7 @@
         
         const valueCell = document.createElement('td');
         const valueSpan = document.createElement('span');
-        valueSpan.className = 'dt-editable';
+        valueSpan.className = 'editable';
         valueSpan.textContent = value;
         valueSpan.onclick = () => {
           const newValue = prompt('新しい値を入力', value);
@@ -1095,10 +1369,10 @@
         valueCell.appendChild(valueSpan);
         
         const actionsCell = document.createElement('td');
-        actionsCell.className = 'dt-storage-actions';
+        actionsCell.className = 'storage-actions';
         
         const deleteBtn = document.createElement('button');
-        deleteBtn.className = 'dt-storage-btn';
+        deleteBtn.className = 'storage-btn';
         deleteBtn.textContent = 'Delete';
         deleteBtn.onclick = () => {
           storage.removeItem(key);
@@ -1140,7 +1414,7 @@
         
         const nameCell = document.createElement('td');
         const nameSpan = document.createElement('span');
-        nameSpan.className = 'dt-editable';
+        nameSpan.className = 'editable';
         nameSpan.textContent = decodedName;
         nameSpan.onclick = () => {
           const newName = prompt('新しい名前を入力', decodedName);
@@ -1157,7 +1431,7 @@
         
         const valueCell = document.createElement('td');
         const valueSpan = document.createElement('span');
-        valueSpan.className = 'dt-editable';
+        valueSpan.className = 'editable';
         valueSpan.textContent = decodeURIComponent(value);
         valueSpan.onclick = () => {
           const newValue = prompt('新しい値を入力', decodeURIComponent(value));
@@ -1169,10 +1443,10 @@
         valueCell.appendChild(valueSpan);
         
         const actionsCell = document.createElement('td');
-        actionsCell.className = 'dt-storage-actions';
+        actionsCell.className = 'storage-actions';
         
         const deleteBtn = document.createElement('button');
-        deleteBtn.className = 'dt-storage-btn';
+        deleteBtn.className = 'storage-btn';
         deleteBtn.textContent = 'Delete';
         deleteBtn.onclick = () => {
           document.cookie = `${name.trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
@@ -1197,120 +1471,69 @@
 
   // コンテキストメニューアクション処理
   function handleContextMenuAction(action) {
-    if (!dtSelectedElement) return;
+    if (!selectedElement) return;
 
     switch (action) {
       case 'edit-html':
-        if (dtSelectedElement === document.documentElement) {
+        if (selectedElement === document.documentElement) {
           alert('ルートHTML要素は直接編集できません');
           return;
         }
-        startInlineEdit(dtSelectedDOMNode, dtSelectedElement.outerHTML, (newValue) => {
+        startInlineEdit(selectedDOMNode, selectedElement.outerHTML, (newValue) => {
           try {
-            dtSelectedElement.outerHTML = newValue;
-            dtRefreshElementsPanel();
+            selectedElement.outerHTML = newValue;
+            refreshElementsPanel();
           } catch (e) {
             alert('この要素は編集できません: ' + e.message);
           }
         });
         break;
-      case 'edit-whole-html':
-        const htmlContent = document.documentElement.outerHTML;
-        const textarea = document.createElement('textarea');
-        textarea.style.width = '100%';
-        textarea.style.height = '300px';
-        textarea.value = htmlContent;
-        
-        const modal = document.createElement('div');
-        modal.style.position = 'fixed';
-        modal.style.top = '0';
-        modal.style.left = '0';
-        modal.style.width = '100%';
-        modal.style.height = '100%';
-        modal.style.backgroundColor = 'rgba(0,0,0,0.8)';
-        modal.style.zIndex = '10000';
-        modal.style.display = 'flex';
-        modal.style.flexDirection = 'column';
-        modal.style.padding = '20px';
-        modal.style.boxSizing = 'border-box';
-        
-        const buttonContainer = document.createElement('div');
-        buttonContainer.style.marginTop = '10px';
-        buttonContainer.style.display = 'flex';
-        buttonContainer.style.gap = '10px';
-        
-        const saveButton = document.createElement('button');
-        saveButton.textContent = '保存';
-        saveButton.onclick = () => {
-          try {
-            document.documentElement.innerHTML = textarea.value;
-            modal.remove();
-            dtRefreshElementsPanel();
-          } catch (e) {
-            alert('HTMLの解析に失敗しました: ' + e.message);
-          }
-        };
-        
-        const cancelButton = document.createElement('button');
-        cancelButton.textContent = 'キャンセル';
-        cancelButton.onclick = () => {
-          modal.remove();
-        };
-        
-        buttonContainer.appendChild(saveButton);
-        buttonContainer.appendChild(cancelButton);
-        
-        modal.appendChild(textarea);
-        modal.appendChild(buttonContainer);
-        
-        document.body.appendChild(modal);
-        break;
       case 'add-attribute':
         const attrName = prompt('属性名を入力');
         if (attrName) {
           const attrValue = prompt('属性値を入力');
-          dtSelectedElement.setAttribute(attrName, attrValue || '');
-          dtRefreshElementsPanel();
+          selectedElement.setAttribute(attrName, attrValue || '');
+          refreshElementsPanel();
         }
         break;
       case 'edit-element':
-        startInlineEdit(dtSelectedDOMNode.querySelector('.dt-dom-tag'), dtSelectedElement.tagName.toLowerCase(), (newValue) => {
+        startInlineEdit(selectedDOMNode.querySelector('.dom-tag'), selectedElement.tagName.toLowerCase(), (newValue) => {
           const newElement = document.createElement(newValue);
-          Array.from(dtSelectedElement.attributes).forEach(attr => {
+          Array.from(selectedElement.attributes).forEach(attr => {
             newElement.setAttribute(attr.name, attr.value);
           });
-          newElement.innerHTML = dtSelectedElement.innerHTML;
-          dtSelectedElement.parentNode.replaceChild(newElement, dtSelectedElement);
-          dtSelectedElement = newElement;
-          dtRefreshElementsPanel();
+          newElement.innerHTML = selectedElement.innerHTML;
+          selectedElement.parentNode.replaceChild(newElement, selectedElement);
+          selectedElement = newElement;
+          refreshElementsPanel();
         });
         break;
       case 'duplicate':
-        const clone = dtSelectedElement.cloneNode(true);
-        dtSelectedElement.parentNode.insertBefore(clone, dtSelectedElement.nextSibling);
-        dtRefreshElementsPanel();
+        const clone = selectedElement.cloneNode(true);
+        selectedElement.parentNode.insertBefore(clone, selectedElement.nextSibling);
+        refreshElementsPanel();
         break;
       case 'remove':
         if (confirm('要素を削除しますか？')) {
-          dtSelectedElement.parentNode.removeChild(dtSelectedElement);
-          dtRefreshElementsPanel();
+          selectedElement.parentNode.removeChild(selectedElement);
+          refreshElementsPanel();
         }
         break;
       case 'toggle-visibility':
-        if (dtSelectedElement.style.display === 'none') {
-          dtSelectedElement.style.display = '';
+        if (selectedElement.style.display === 'none') {
+          selectedElement.style.display = '';
         } else {
-          dtSelectedElement.style.display = 'none';
+          selectedElement.style.display = 'none';
         }
-        dtRefreshElementsPanel();
+        refreshElementsPanel();
         break;
       case 'force-state':
         const state = prompt('強制する状態を入力 (例: hover, active, focus)', 'hover');
         if (state) {
-          dtSelectedElement.classList.remove('force-hover', 'force-active', 'force-focus', 
+          selectedElement.classList.remove('force-hover', 'force-active', 'force-focus', 
                                         'force-focus-within', 'force-focus-visible', 'force-target');
-          dtSelectedElement.classList.add(`force-${state}`);
-          dtRefreshElementsPanel();
+          selectedElement.classList.add(`force-${state}`);
+          refreshElementsPanel();
         }
         break;
     }
@@ -1318,13 +1541,13 @@
 
   // インライン編集関数
   function startInlineEdit(element, initialValue, callback) {
-    if (dtActiveEditElement) return;
+    if (activeEditElement) return;
     
     const originalValue = element.textContent;
     const rect = element.getBoundingClientRect();
     
     const input = document.createElement('input');
-    input.className = 'dt-dom-edit-input';
+    input.className = 'dom-edit-input';
     input.value = initialValue || originalValue;
     input.style.position = 'absolute';
     input.style.left = `${rect.left}px`;
@@ -1335,7 +1558,7 @@
     input.focus();
     input.select();
     
-    dtActiveEditElement = {
+    activeEditElement = {
       element: element,
       input: input,
       callback: callback
@@ -1378,32 +1601,32 @@
     function cleanup() {
       document.removeEventListener('click', clickOutsideHandler);
       input.remove();
-      dtActiveEditElement = null;
+      activeEditElement = null;
     }
   }
 
   // Consoleパネル作成
   function createConsolePanel() {
     const panel = document.createElement('div');
-    panel.className = 'dt-devtools-panel';
+    panel.className = 'devtools-panel';
     panel.id = 'console-panel';
 
     const log = document.createElement('div');
-    log.id = 'dt-console-log';
+    log.id = 'console-log';
 
     const input = document.createElement('input');
-    input.className = 'dt-console-input';
+    input.className = 'console-input';
     input.placeholder = 'ここにJavaScriptを入力... (Enterで実行)';
     input.onkeypress = (e) => {
       if (e.key === 'Enter') {
         try {
           const result = eval(e.target.value);
           if (result !== undefined) {
-            logMessage('> ' + e.target.value, 'dt-console-log');
-            logMessage('← ' + formatOutput(result), 'dt-console-log');
+            logMessage('> ' + e.target.value, 'console-log');
+            logMessage('← ' + formatOutput(result), 'console-log');
           }
         } catch (err) {
-          logMessage(err.message, 'dt-console-error');
+          logMessage(err.message, 'console-error');
         }
         e.target.value = '';
       }
@@ -1422,22 +1645,22 @@
 
     console.log = (...args) => {
       originalConsole.log.apply(console, args);
-      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'dt-console-log');
+      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'console-log');
     };
 
     console.error = (...args) => {
       originalConsole.error.apply(console, args);
-      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'dt-console-error');
+      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'console-error');
     };
 
     console.warn = (...args) => {
       originalConsole.warn.apply(console, args);
-      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'dt-console-warn');
+      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'console-warn');
     };
 
     console.info = (...args) => {
       originalConsole.info.apply(console, args);
-      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'dt-console-info');
+      logMessage(args.map(arg => formatOutput(arg)).join(' '), 'console-info');
     };
 
     function logMessage(message, className) {
@@ -1449,23 +1672,23 @@
     }
 
     function formatOutput(output) {
-      if (output === null) return '<span class="dt-json-null">null</span>';
-      if (output === undefined) return '<span class="dt-json-null">undefined</span>';
-      if (typeof output === 'boolean') return `<span class="dt-json-boolean">${output}</span>`;
-      if (typeof output === 'number') return `<span class="dt-json-number">${output}</span>`;
-      if (typeof output === 'string') return `<span class="dt-json-string">"${output}"</span>`;
-      if (typeof output === 'function') return `<span class="dt-json-object">function ${output.name}() { ... }</span>`;
-      if (Array.isArray(output)) return `<span class="dt-json-object">[${output.map(formatOutput).join(', ')}]</span>`;
+      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="dt-json-object">${JSON.stringify(output, null, 2)
-            .replace(/"([^"]+)":/g, '<span class="dt-json-key">"$1"</span>:')
-            .replace(/"([^"]+)"/g, '<span class="dt-json-string">"$1"</span>')
-            .replace(/\b(true|false)\b/g, '<span class="dt-json-boolean">$1</span>')
-            .replace(/\b(null)\b/g, '<span class="dt-json-null">$1</span>')
-            .replace(/\b(\d+)\b/g, '<span class="dt-json-number">$1</span>')}</span>`;
+          return `<span class="json-object">${JSON.stringify(output, null, 2)
+            .replace(/"([^"]+)":/g, '<span class="json-key">"$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="dt-json-object">${output.toString()}</span>`;
+          return `<span class="json-object">${output.toString()}</span>`;
         }
       }
       return output;
@@ -1477,19 +1700,19 @@
   // Elementsパネル作成
   function createElementsPanel() {
     const panel = document.createElement('div');
-    panel.className = 'dt-devtools-panel';
+    panel.className = 'devtools-panel';
     panel.id = 'elements-panel';
 
     const container = document.createElement('div');
-    container.className = 'dt-elements-container';
+    container.className = 'elements-container';
 
     const tree = document.createElement('div');
-    tree.className = 'dt-dom-tree';
-    tree.id = 'dt-dom-tree';
+    tree.className = 'dom-tree';
+    tree.id = 'dom-tree';
 
     const cssPanel = document.createElement('div');
-    cssPanel.className = 'dt-css-panel';
-    cssPanel.id = 'dt-css-panel';
+    cssPanel.className = 'css-panel';
+    cssPanel.id = 'css-panel';
 
     container.appendChild(tree);
     container.appendChild(cssPanel);
@@ -1497,17 +1720,17 @@
 
     // CSSパネル更新関数
     function updateCSSPanel(element) {
-      const cssPanel = document.getElementById('dt-css-panel');
+      const cssPanel = document.getElementById('css-panel');
       cssPanel.innerHTML = '';
       
       if (!element) return;
       
       if (element.style.length > 0) {
         const inlineRule = document.createElement('div');
-        inlineRule.className = 'dt-css-rule';
+        inlineRule.className = 'css-rule';
         
         const selector = document.createElement('div');
-        selector.className = 'dt-css-selector';
+        selector.className = 'css-selector';
         selector.textContent = 'インラインスタイル';
         inlineRule.appendChild(selector);
         
@@ -1516,20 +1739,20 @@
           const propValue = element.style[propName];
           
           const propDiv = document.createElement('div');
-          propDiv.className = 'dt-css-property';
+          propDiv.className = 'css-property';
           
           const nameSpan = document.createElement('span');
-          nameSpan.className = 'dt-css-property-name dt-editable';
+          nameSpan.className = 'css-property-name editable';
           nameSpan.textContent = propName;
           nameSpan.onclick = () => editCSSProperty(element, propName, 'style');
           
           const valueSpan = document.createElement('span');
-          valueSpan.className = 'dt-css-property-value dt-editable';
+          valueSpan.className = 'css-property-value editable';
           valueSpan.textContent = propValue;
           valueSpan.onclick = () => editCSSProperty(element, propName, 'style');
           
           const toggleSpan = document.createElement('span');
-          toggleSpan.className = 'dt-css-toggle';
+          toggleSpan.className = 'css-toggle';
           toggleSpan.textContent = '×';
           toggleSpan.title = 'プロパティを無効化';
           toggleSpan.onclick = () => {
@@ -1548,10 +1771,10 @@
       
       const computedStyles = window.getComputedStyle(element);
       const computedRule = document.createElement('div');
-      computedRule.className = 'dt-css-rule';
+      computedRule.className = 'css-rule';
       
       const computedSelector = document.createElement('div');
-      computedSelector.className = 'dt-css-selector';
+      computedSelector.className = 'css-selector';
       computedSelector.textContent = '計算されたスタイル';
       computedRule.appendChild(computedSelector);
       
@@ -1564,14 +1787,14 @@
         const value = computedStyles[prop];
         
         const propDiv = document.createElement('div');
-        propDiv.className = 'dt-css-property';
+        propDiv.className = 'css-property';
         
         const nameSpan = document.createElement('span');
-        nameSpan.className = 'dt-css-property-name';
+        nameSpan.className = 'css-property-name';
         nameSpan.textContent = prop;
         
         const valueSpan = document.createElement('span');
-        valueSpan.className = 'dt-css-property-value';
+        valueSpan.className = 'css-property-value';
         valueSpan.textContent = value;
         
         propDiv.appendChild(nameSpan);
@@ -1586,23 +1809,23 @@
     function buildDOMTree(node, parentElement, depth = 0, isRoot = false) {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = document.createElement('div');
-        element.className = 'dt-dom-node';
+        element.className = 'dom-node';
         element.style.marginLeft = `${depth * 15}px`;
         element.dataset.elementId = node.id || Math.random().toString(36).substr(2, 9);
 
         // 右クリックイベント
         element.oncontextmenu = (e) => {
           e.preventDefault();
-          dtSelectedElement = node;
-          dtSelectedDOMNode = element;
+          selectedElement = node;
+          selectedDOMNode = element;
           
-          document.querySelectorAll('.dt-dom-node').forEach(el => el.classList.remove('selected'));
+          document.querySelectorAll('.dom-node').forEach(el => el.classList.remove('selected'));
           element.classList.add('selected');
           
           if (node !== document.documentElement) {
-            dtContextMenu.style.display = 'block';
-            dtContextMenu.style.left = `${e.pageX}px`;
-            dtContextMenu.style.top = `${e.pageY}px`;
+            contextMenu.style.display = 'block';
+            contextMenu.style.left = `${e.pageX}px`;
+            contextMenu.style.top = `${e.pageY}px`;
           }
           
           updateCSSPanel(node);
@@ -1610,13 +1833,13 @@
 
         // 左クリックで選択
         element.onclick = (e) => {
-          if (e.target.classList.contains('dt-dom-toggle')) return;
+          if (e.target.classList.contains('dom-toggle')) return;
           
           e.stopPropagation();
-          dtSelectedElement = node;
-          dtSelectedDOMNode = element;
+          selectedElement = node;
+          selectedDOMNode = element;
           
-          document.querySelectorAll('.dt-dom-node').forEach(el => el.classList.remove('selected'));
+          document.querySelectorAll('.dom-node').forEach(el => el.classList.remove('selected'));
           element.classList.add('selected');
           
           updateCSSPanel(node);
@@ -1628,10 +1851,10 @@
         
         if (hasChildren) {
           const toggle = document.createElement('div');
-          toggle.className = 'dt-dom-toggle';
+          toggle.className = 'dom-toggle';
           toggle.onclick = (e) => {
             e.stopPropagation();
-            const children = element.querySelector('.dt-dom-children');
+            const children = element.querySelector('.dom-children');
             if (children) {
               if (children.style.maxHeight === '0px') {
                 children.style.maxHeight = children.scrollHeight + 'px';
@@ -1647,11 +1870,11 @@
 
         // タグ名（HTML要素は編集不可）
         const tag = document.createElement('span');
-        tag.className = 'dt-dom-tag';
+        tag.className = 'dom-tag';
         tag.textContent = `<${node.tagName.toLowerCase()}`;
         
         if (node !== document.documentElement) {
-          tag.classList.add('dt-editable');
+          tag.classList.add('editable');
           tag.onclick = (e) => {
             e.stopPropagation();
             startInlineEdit(tag, node.tagName.toLowerCase(), (newValue) => {
@@ -1661,8 +1884,8 @@
               });
               newElement.innerHTML = node.innerHTML;
               node.parentNode.replaceChild(newElement, node);
-              dtSelectedElement = newElement;
-              dtRefreshElementsPanel();
+              selectedElement = newElement;
+              refreshElementsPanel();
             });
           };
         }
@@ -1672,16 +1895,16 @@
         // 属性（HTML要素は編集不可）
         Array.from(node.attributes).forEach(attr => {
           const attrSpan = document.createElement('span');
-          attrSpan.className = 'dt-dom-attr';
+          attrSpan.className = 'dom-attr';
           attrSpan.textContent = ` ${attr.name}="${attr.value}"`;
           
           if (node !== document.documentElement) {
-            attrSpan.classList.add('dt-editable');
+            attrSpan.classList.add('editable');
             attrSpan.onclick = (e) => {
               e.stopPropagation();
               startInlineEdit(attrSpan, attr.value, (newValue) => {
                 node.setAttribute(attr.name, newValue);
-                dtRefreshElementsPanel();
+                refreshElementsPanel();
               });
             };
           }
@@ -1693,7 +1916,7 @@
 
         if (hasChildren) {
           const childrenContainer = document.createElement('div');
-          childrenContainer.className = 'dt-dom-children';
+          childrenContainer.className = 'dom-children';
           childrenContainer.style.maxHeight = isRoot ? 'none' : '0px';
           
           node.childNodes.forEach(child => {
@@ -1703,7 +1926,7 @@
           if (node.tagName.toLowerCase() !== 'br') {
             const closeTag = document.createElement('div');
             closeTag.style.marginLeft = `${depth * 15}px`;
-            closeTag.innerHTML = `<span class="dt-dom-tag">&lt;/${node.tagName.toLowerCase()}&gt;</span>`;
+            closeTag.innerHTML = `<span class="dom-tag">&lt;/${node.tagName.toLowerCase()}&gt;</span>`;
             childrenContainer.appendChild(closeTag);
           }
           
@@ -1714,13 +1937,13 @@
       } else if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
         const text = document.createElement('div');
         text.style.marginLeft = `${depth * 15}px`;
-        text.className = 'dt-dom-text dt-editable';
+        text.className = 'dom-text editable';
         text.textContent = `"${node.textContent.trim()}"`;
         text.onclick = (e) => {
           e.stopPropagation();
           startInlineEdit(text, node.textContent.trim(), (newValue) => {
             node.textContent = newValue;
-            dtRefreshElementsPanel();
+            refreshElementsPanel();
           });
         };
         parentElement.appendChild(text);
@@ -1743,23 +1966,23 @@
         }
         
         updateCSSPanel(element);
-        dtRefreshElementsPanel();
+        refreshElementsPanel();
       }
     }
 
     // refreshElementsPanel関数の定義
-    dtRefreshElementsPanel = function() {
-      let tree = document.getElementById('dt-dom-tree');
+    refreshElementsPanel = function() {
+      let tree = document.getElementById('dom-tree');
       
       if (!tree) {
         const panel = document.getElementById('elements-panel');
         if (panel) {
-          const container = panel.querySelector('.dt-elements-container');
+          const container = panel.querySelector('.elements-container');
           if (container) {
             tree = document.createElement('div');
-            tree.className = 'dt-dom-tree';
-            tree.id = 'dt-dom-tree';
-            container.insertBefore(tree, container.querySelector('.dt-css-panel'));
+            tree.className = 'dom-tree';
+            tree.id = 'dom-tree';
+            container.insertBefore(tree, container.querySelector('.css-panel'));
           }
         }
       }
@@ -1769,15 +1992,15 @@
       tree.innerHTML = '';
       buildDOMTree(document.documentElement, tree, 0, true);
       
-      if (dtSelectedElement) {
-        const elementId = dtSelectedElement.id || Array.from(dtSelectedElement.attributes)
+      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(dtSelectedElement);
+            updateCSSPanel(selectedElement);
           }
         }
       }
@@ -1788,7 +2011,7 @@
 
     // 初期表示
     setTimeout(() => {
-      dtRefreshElementsPanel();
+      refreshElementsPanel();
     }, 0);
 
     return panel;
@@ -1796,7 +2019,7 @@
 
   // 開発者ツール表示/非表示
   function toggleDevTools() {
-    const container = document.getElementById('dt-devtools-container');
+    const container = document.getElementById('devtools-container');
     if (container.style.display === 'none') {
       container.style.display = 'flex';
     } else {
@@ -1807,13 +2030,13 @@
   // 開くボタン作成
   function createOpenButton() {
     const button = document.createElement('button');
-    button.id = 'dt-open-devtools-btn';
+    button.id = 'open-devtools-btn';
     button.textContent = '開発者ツールを開く';
     button.style.position = 'fixed';
     button.style.bottom = '10px';
     button.style.right = '10px';
     button.style.padding = '8px 16px';
-    button.style.background = 'var(--dt-primary-color)';
+    button.style.background = 'var(--primary-color)';
     button.style.color = '#000';
     button.style.border = 'none';
     button.style.borderRadius = '4px';
@@ -1826,13 +2049,9 @@
 
   // 初期化
   document.addEventListener('DOMContentLoaded', function() {
-    // 最小限のUIだけ先に表示
+    createDevTools();
     createOpenButton();
-    
-    // メインのツールは遅延読み込み
-    setTimeout(() => {
-      createDevTools();
-      console.log('開発者ツールが初期化されました');
-    }, 1000);
+    console.log('開発者ツールが初期化されました');
+    console.log('このコンソールでJavaScriptを実行できます');
   });
 })();