Support page navigations

Question

Support page navigations

milomg opened this issue a year ago · comments

I've been playing around (https://github.com/modderme123/solid-playground/tree/better-console) with trying to handle page reloads of an iframe with chobitsu. So far, I've managed to pull out the chii target iframe, but on reload the chobitsu client seems to get out of sync. I tried running InspectorFrontendAPI.reattachMainTarget() on the inspector iframe, but that caused several syncing errors because I assume I'm using that api incorrectly. Do you have any advice for implementing this feature?

Edit: also, thank you for creating such a helpful library! It's been amazing having full devtools in the solid playground

RedHoodSu · Answer 1 · Sat Apr 01 2023 12:46:24 GMT+0800 (China Standard Time)

I have released chii version 1.9.0 which supports rendering devtools in user specified iframe. Here is a little demo about how to use it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #target,
      #devtools {
        width: 100%;
        display: block;
      }
    </style>
    <title>Chii Iframe</title>
  </head>
  <body>
    <iframe id="target" frameborder="0"></iframe>
    <iframe id="devtools" frameborder="0"></iframe>
    <script>
      const targetIframe = document.getElementById('target');
      const devtoolsIframe = document.getElementById('devtools');

      function resetHeight() {
        const targetHeight = Math.floor(window.innerHeight * 0.4);
        targetIframe.style.height = targetHeight + 'px';
        devtoolsIframe.style.height = window.innerHeight - targetHeight + 'px';
      }

      resetHeight();

      window.addEventListener('resize', resetHeight);

      const targetSrc = 'https://cdn.jsdelivr.net/npm/chii@1.9.0/public/target.js';
      targetIframe.onload = function () {
        targetIframe.contentWindow.ChiiDevtoolsIframe = devtoolsIframe;
        targetIframe.contentWindow.injectTarget(targetSrc);
      };
      window.addEventListener('message', event => {
        targetIframe.contentWindow.postMessage(event.data, event.origin);
      });

      function load() {
        const html = `
          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Target</title>
            <style>
              .motto {
                display: inline-block;
              }
            </style>
          </head>
          <body>
            <div class="motto">Hello Chii!</div>
            <button onclick="reload()">Reload</button>
            <${'script'}>
              console.log('Page loaded!');
              setTimeout(function () {
                console.log('Hello Chii');
                fetch(location.href);
              }, 1000);
              window.reload = function () {
                location.reload();
              }
              window.injectTarget = function (targetSrc) {
                var script = document.createElement('script');
                script.src = targetSrc;
                script.setAttribute('embedded', 'true');
                script.setAttribute('cdn', 'https://cdn.jsdelivr.net/npm/chii@1.9.0/public');
                document.head.appendChild(script);
              }
            </${'script'}>
          </body>
          </html>`;

        const blob = new Blob([html], {
          type: 'text/html',
        });
        const src = URL.createObjectURL(blob);

        targetIframe.src = src;
      }

      load();
    </script>
  </body>
</html>