search

preactjs / preact-devtools

Browser extension for inspection Preact applications
https://preactjs.github.io/preact-devtools/
MIT License
316 stars 27 forks source link

Extension does not detect Preact usage without build tools #432

Open minimusubi opened 2 years ago

minimusubi commented 2 years ago

When using Preact without build tools and the Chrome extension, I consistently get the message, This page doesn't seem to be using Preact. There are no errors in the console.

Not tested on Firefox.

Reproduction Steps

Edit: Changed repro to include changes from #299, which still exhibits the same behavior. index.html

<!DOCTYPE html>
<html>
  <body>  
    <div id="app"></div>
    <script type="module">
      import "https://cdn.skypack.dev/preact/devtools";

      import { h, Component, render } from "https://cdn.skypack.dev/preact";
      import htm from "https://cdn.skypack.dev/htm";

      const html = htm.bind(h);

      const App = () => html`<h1>Hello World!</h1>`;
      render(html`<${App} />`, document.getElementById("app"));
    </script>
  </body>
</html>

Details

preact 10.11.1 Preact Developer Tools 4.6.0 Chrome 106.0.5249.103

Similar/Related Issues

85, preactjs/preact#2571, #283 (where the above example came from)

marvinhagemeister commented 2 years ago

Thanks for reporting this issue. Just to be sure: Are you opening the .html file directly in chrome or is it served via a webserver? If it's the former, than that is expected as the chrome extension hook into the file:// protocol.

minimusubi commented 2 years ago

Sorry, I was opening the file directly with Chrome!

If the extension is unable to hook the file:// protocol, it might be nice to have a small warning on the homepage or README.

Thanks for clarifying.