synetics-ui.dev/debug-router.html at main · binaryjack/synetics-ui.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!doctype html>
<html>
  <head>
    <title>Router Debug</title>
  </head>
  <body>
    <h1>Router Debug</h1>
    <div id="debug-output"></div>
    <script type="module">
      // Wait for page to load
      setTimeout(() => {
        const output = document.getElementById('debug-output');
        const debug = [];

        // Check for router
        const router = document.querySelector('[data-router="active"]');
        debug.push(`Router found: ${!!router}`);

        if (router) {
          debug.push(`Router children: ${router.children.length}`);
          debug.push(`Router HTML: ${router.innerHTML.substring(0, 200)}`);

          // Check for route definitions
          const routeDefs = router.querySelectorAll('.route-definition');
          debug.push(`Route definitions found: ${routeDefs.length}`);

          routeDefs.forEach((def, i) => {
            debug.push(
              `  Route ${i}: path="${def.getAttribute('data-path')}" label="${def.getAttribute('data-label')}"`
            );
            debug.push(`  Has __routeConfig: ${!!def.__routeConfig}`);
          });

          // Check outlet
          const outlet = router.querySelector('.router-outlet');
          debug.push(`Outlet found: ${!!outlet}`);
          if (outlet) {
            debug.push(`Outlet children: ${outlet.children.length}`);
            debug.push(`Outlet HTML: ${outlet.innerHTML.substring(0, 200)}`);
          }
        }

        // Check current path
        debug.push(`Current path: ${window.location.pathname}`);

        // Check h1
        const h1 = document.querySelector('h1');
        debug.push(`H1 text: ${h1?.textContent}`);

        output.innerHTML = '<pre>' + debug.join('\n') + '</pre>';
      }, 1000);
    </script>
  </body>
</html>