Add Chrome DevTools Protocol scripts for verifying early hints

These scripts connect to Chrome via the DevTools Protocol to inspect pages and verify HTTP 103 Early Hints are working:
- check_early_hints.js - Node.js script using WebSocket
- check_early_hints.py - Python script (requires websocket module)

Both scripts:
- Connect to Chrome running with --remote-debugging-port=9222
- Extract HTML from the loaded page
- Search for Shakapacker Early Hints debug comments
- Verify preload link headers

Usage:
  node check_early_hints.js
  # or
  python3 check_early_hints.py

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: justin808

check_early_hints.js

@@ -0,0 +1,111 @@
+const http = require('http');
+
+// Fetch Chrome tabs
+const req = http.get('http://localhost:9222/json', (res) => {
+  let data = '';
+
+  res.on('data', (chunk) => {
+    data += chunk;
+  });
+
+  res.on('end', () => {
+    const tabs = JSON.parse(data);
+
+    if (tabs.length === 0) {
+      console.log('No Chrome tabs found');
+      return;
+    }
+
+    const tab = tabs[0];
+    console.log(`📱 Tab: ${tab.title}`);
+    console.log(`🔗 URL: ${tab.url}\n`);
+
+    // Connect to WebSocket
+    const WebSocket = require('ws');
+    const ws = new WebSocket(tab.webSocketDebuggerUrl);
+
+    let msgId = 1;
+
+    ws.on('open', () => {
+      console.log('✅ Connected to Chrome DevTools Protocol\n');
+
+      // Enable Runtime
+      ws.send(JSON.stringify({
+        id: msgId++,
+        method: 'Runtime.enable'
+      }));
+
+      // Get HTML content
+      setTimeout(() => {
+        ws.send(JSON.stringify({
+          id: msgId++,
+          method: 'Runtime.evaluate',
+          params: {
+            expression: 'document.documentElement.outerHTML'
+          }
+        }));
+      }, 500);
+    });
+
+    ws.on('message', (data) => {
+      try {
+        const msg = JSON.parse(data);
+
+        if (msg.result && msg.result.result && msg.result.result.value) {
+          const html = msg.result.result.value;
+
+          // Look for Early Hints debug comments
+          const earlyHintsMatch = html.match(/<!--[\s\S]*?Early Hints[\s\S]{0,500}?-->/g);
+
+          if (earlyHintsMatch) {
+            console.log('🎉 Found Early Hints debug comments in HTML!\n');
+            earlyHintsMatch.forEach(match => {
+              console.log(match);
+              console.log();
+            });
+            console.log('\n✅ SUCCESS: Early Hints are configured and working!');
+          } else {
+            console.log('❌ No Early Hints debug comments found in HTML');
+            console.log('This might mean:');
+            console.log('  - Early hints are not enabled');
+            console.log('  - The deployment is not running the latest code');
+            console.log('  - The page needs to be reloaded');
+          }
+
+          // Also check for Link headers with preload
+          const linkMatches = html.match(/<link[^>]*rel=["']preload["'][^>]*>/g);
+          if (linkMatches) {
+            console.log(`\n📦 Found ${linkMatches.length} preload links in HTML head:`);
+            linkMatches.slice(0, 5).forEach(link => {
+              console.log(`  ${link}`);
+            });
+          }
+
+          ws.close();
+          process.exit(0);
+        }
+      } catch (e) {
+        // Ignore parse errors for other messages
+      }
+    });
+
+    ws.on('error', (err) => {
+      console.error('❌ WebSocket error:', err.message);
+      process.exit(1);
+    });
+
+    // Timeout after 5 seconds
+    setTimeout(() => {
+      console.log('⏱️ Timeout - no HTML received');
+      ws.close();
+      process.exit(1);
+    }, 5000);
+  });
+});
+
+req.on('error', (err) => {
+  console.error('❌ Error connecting to Chrome:', err.message);
+  console.log('\nMake sure Chrome is running with:');
+  console.log('  --remote-debugging-port=9222');
+  process.exit(1);
+});

check_early_hints.py

@@ -0,0 +1,89 @@
+#!/usr/bin/env python3
+import json
+import urllib.request
+import websocket
+import ssl
+
+# Get the WebSocket debugger URL
+response = urllib.request.urlopen('http://localhost:9222/json')
+tabs = json.loads(response.read())
+
+if not tabs:
+    print("No Chrome tabs found")
+    exit(1)
+
+# Use the first tab (the one we saw with the PR review app)
+tab = tabs[0]
+ws_url = tab['webSocketDebuggerUrl']
+
+print(f"📱 Connecting to tab: {tab['title']}")
+print(f"🔗 URL: {tab['url']}\n")
+
+# Connect via WebSocket
+ws = websocket.create_connection(ws_url, sslopt={"cert_reqs": ssl.CERT_NONE})
+
+# Enable Network domain
+ws.send(json.dumps({"id": 1, "method": "Network.enable"}))
+response = json.loads(ws.recv())
+print(f"✅ Network enabled: {response}\n")
+
+# Enable Page domain
+ws.send(json.dumps({"id": 2, "method": "Page.enable"}))
+response = json.loads(ws.recv())
+print(f"✅ Page enabled: {response}\n")
+
+# Get the current HTML content
+ws.send(json.dumps({
+    "id": 3,
+    "method": "Runtime.evaluate",
+    "params": {
+        "expression": "document.documentElement.outerHTML"
+    }
+}))
+
+# Collect responses
+responses = []
+found_early_hints = False
+
+for i in range(10):  # Read a few messages
+    try:
+        msg = ws.recv()
+        data = json.loads(msg)
+
+        if 'id' in data and data['id'] == 3:
+            # This is our HTML response
+            if 'result' in data and 'result' in data['result']:
+                html = data['result']['result']['value']
+
+                # Search for Early Hints debug comments
+                if 'Early Hints' in html:
+                    print("🎉 Found Early Hints debug comments in HTML!\n")
+
+                    # Extract the comments
+                    import re
+                    matches = re.findall(r'<!--[\s\S]*?Early Hints[\s\S]*?-->', html)
+                    for match in matches:
+                        print(match)
+                        print()
+                    found_early_hints = True
+                else:
+                    print("❌ No Early Hints debug comments found in HTML")
+
+                # Check for Link headers in the HTML head
+                if 'rel=preload' in html or 'rel="preload"' in html:
+                    print("\n✅ Found preload links in HTML:")
+                    preload_matches = re.findall(r'<link[^>]*rel=["\']preload["\'][^>]*>', html)
+                    for link in preload_matches[:5]:
+                        print(f"  {link}")
+                break
+
+    except Exception as e:
+        break
+
+ws.close()
+
+if found_early_hints:
+    print("\n✅ SUCCESS: Early Hints are working!")
+else:
+    print("\n⚠️  Could not verify Early Hints in the current page state")
+    print("The page may need to be reloaded to capture HTTP 103 responses")