通过<script>标签加载Preact时能否使用React开发者工具？

当然可以！完全不用依赖webpack这类构建工具，通过原生<script>标签就能让React开发者工具识别并调试Preact应用，具体步骤很简单：

实现步骤 #

• 引入必要的脚本：首先在HTML中依次引入Preact的UMD核心库和Preact DevTools适配器的UMD版本。适配器的作用是让Preact和React开发者工具之间建立通信：

  <!-- Preact核心库 -->
  <script src="https://unpkg.com/preact@latest/dist/preact.umd.js"></script>
  <!-- Preact DevTools适配器，仅在开发环境使用 -->
  <script src="https://unpkg.com/preact@latest/dist/devtools.umd.js"></script>
  

  注意：devtools.umd.js只需要在开发阶段加载，生产环境请移除它，避免不必要的性能开销。

• 编写你的Preact代码：接下来正常编写Preact应用逻辑即可，适配器会自动检测全局的preact对象并完成和React开发者工具的连接：

  <div id="app"></div>
  <script>
    const { h, render, useState } = preact;
  
    function Counter() {
      const [count, setCount] = useState(0);
      return h('div', null, [
        h('h2', null, `Count: ${count}`),
        h('button', { onClick: () => setCount(count + 1) }, 'Increment')
      ]);
    }
  
    render(h(Counter), document.getElementById('app'));
  </script>
  

使用效果 #

完成上述步骤后，打开浏览器的React开发者工具（确保已经安装这个扩展），你会发现它能正常识别Preact组件树，支持组件状态查看、钩子调试、性能分析等所有常用功能，和调试React应用的体验几乎一致。

额外提示 #

如果你使用Preact的compat模式（用来兼容React API），这个方法同样有效——适配器会自动适配兼容层，无需额外配置。

内容的提问来源于stack exchange，提问作者Sasank Mukkamala