preact-devtools
preact-devtools copied to clipboard
preactjs
Extension does not detect Preact usage without build tools
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)
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.
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.