Elements面板里为什么看不到我React组件的DOM结构？

东辰 ☘︎ 提问于 2026-03-08 02:40:20 阅读 15

工具

我在开发一个React应用，发现Chrome DevTools的Elements面板里只显示

，里面的内容全是空的，根本看不到我写的组件生成的DOM。明明页面上是正常渲染出来的，但Elements里就是空白，这让我没法调试样式和结构。

我试过重启DevTools、刷新页面，甚至换了个浏览器也不行。是不是我哪里配置错了？下面是我的简单组件代码：

import React from 'react';

function App() {
  return (
    <div className="container">
      <h1>Hello World</h1>
      <p>This is a test component</p>
    </div>
  );
}

export default App;

我来解答赞 5 收藏

反馈

1 条解答

UX熙妍 Lv1

这问题我也遇到过，大概率是你的React项目用了生产模式打包。生产模式下React会做优化，导致DevTools看不到DOM结构。

复制这个，在webpack配置里加上devtool选项：

module.exports = {

  // ...

  devtool: 'cheap-module-source-map',

  mode: 'development'

}

或者如果你用create-react-app，直接在.env文件里加：
GENERATE_SOURCEMAP=true

改完记得重启dev server。我之前也是折腾半天才发现是sourcemap的问题，现在每次新建项目都先配好这个。

2026-03-08 03:00