Spaces:

soiz1
/

dev-tools

Running

App Files Files Community

soiz1 commited on May 19

Commit

39eaa9c

verified ·

1 Parent(s): 85333b1

Update index.html

Browse files

Files changed (1) hide show

index.html +96 -7

index.html CHANGED Viewed

@@ -1,12 +1,101 @@
-<!-- index.html -->
 <!DOCTYPE html>
-<html>
 <head>
-  <title>DevTools Replica</title>
-  <script src="dev-tools.js"></script>
 </head>
 <body>
-  <h1>My Website</h1>
-  <p>Sample content</p><script>a();</script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="ja">
 <head>
+  <meta charset="UTF-8">
+  <title>通信ログ表示 (Blob Service Worker)</title>
+  <style>
+    body { font-family: sans-serif; padding: 1em; }
+    #log { margin-top: 1em; font-size: 14px; }
+    .success { color: green; margin-bottom: 1em; }
+    .error { color: red; margin-bottom: 1em; }
+    pre { background: #f9f9f9; padding: 0.5em; border: 1px solid #ccc; }
+  </style>
 </head>
 <body>
+  <h1>通信ログ</h1>
+  <div id="log">Service Worker を登録中...</div>
+  <script>
+    const swCode = `
+      self.addEventListener('fetch', event => {
+        const { request } = event;
+        const url = request.url;
+        const method = request.method;
+        event.respondWith(
+          fetch(request)
+            .then(response => {
+              const clone = response.clone();
+              clone.text().then(body => {
+                self.clients.matchAll().then(clients => {
+                  clients.forEach(client => {
+                    client.postMessage({
+                      type: 'fetch-log',
+                      method,
+                      url,
+                      status: response.status,
+                      body: body.slice(0, 200)
+                    });
+                  });
+                });
+              });
+              return response;
+            })
+            .catch(error => {
+              self.clients.matchAll().then(clients => {
+                clients.forEach(client => {
+                  client.postMessage({
+                    type: 'fetch-error',
+                    method,
+                    url,
+                    error: error.toString()
+                  });
+                });
+              });
+              throw error;
+            })
+        );
+      });
+    `;
+    const blob = new Blob([swCode], { type: 'application/javascript' });
+    const swUrl = URL.createObjectURL(blob);
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register(swUrl)
+        .then(() => {
+          document.getElementById('log').innerHTML = '✅ Service Worker 登録完了。通信をログします。';
+        })
+        .catch(err => {
+          document.getElementById('log').innerHTML = '❌ Service Worker 登録失敗: ' + err;
+        });
+      navigator.serviceWorker.addEventListener('message', (event) => {
+        const data = event.data;
+        const div = document.createElement('div');
+        div.className = data.type === 'fetch-log' ? 'success' : 'error';
+        if (data.type === 'fetch-log') {
+          div.innerHTML = `
+            ✅ [${data.method}] ${data.url} — ${data.status}<br>
+            <pre>${data.body}</pre>
+          `;
+        } else if (data.type === 'fetch-error') {
+          div.innerHTML = `
+            ❌ [${data.method}] ${data.url}<br>
+            エラー: ${data.error}
+          `;
+        }
+        document.getElementById('log').appendChild(div);
+      });
+    }
+  </script>
+  <script>
+    // テスト用のfetch通信を発生させる
+    fetch('https://jsonplaceholder.typicode.com/posts/1');
+    fetch('https://httpstat.us/404'); // エラーになる通信
+  </script>
 </body>
+</html>