别再用 console.log 这种“原始人”的调试方式了：React DevTools 实战神技前言：你的控制台是不是

前言：你的控制台是不是长这样？

兄弟们，摸着良心告诉我，你的代码里是不是充斥着这样的东西：

console.log('11111');
console.log('here', data);
console.log('fuck', user.name);
console.log('why is this null???');

每次调试一个 Bug，你就要在这个充满了 11111 和 22222 的控制台里，像个拾荒者一样翻找你想要的数据。最要命的是，JS 的对象引用机制经常会骗你：当你展开那个 object 的时候，看到的是现在的值，而不是打印时的值。

这不叫调试，这叫碰运气，这是“原始人”才干的事。

今天，我们要拿起现代文明的武器——React Developer Tools。装了这个插件那么久，你可能只把它当成了变色图标，或者只用来看看组件树。

其实，它是你的透视眼和上帝之手。

神技一：上帝模式 —— 实时篡改数据

场景：你要调试一个“空状态”的 UI。或者你想看看用户昵称特别长的时候会不会换行。 原始做法：去改代码里的 useState 初始值，或者拦截后端接口改返回值，然后等 Webpack 重新编译，刷新页面。

DevTools 做法：

打开 Chrome 控制台 -> Components 标签。
选中你的目标组件。
在右侧的 Hooks (State) 或者 Props 面板里。
直接改！

就像在 Excel 里改数字一样。你把 isLoading 的 false 改成 true，页面上的 Loading 圈立马就开始转；你把 username 改成 100 个“哈”，页面立马撑爆给你看。

这叫什么？这叫“言出法随”。 不需要碰一行源代码，不需要刷新页面，直接在运行态注入数据。

神技二：控制台连通器 —— `$r` 变量

有时候，右侧的小面板太窄了，那个复杂的对象（比如几十层的 JSON）看不清，或者你想调用组件里的某个方法测试一下。

骚操作：

在 Components 面板选中某个组件。
切回 Console 面板。
输入 $r 并回车。

Boom! 这个 $r 就是你刚才选中的那个组件实例（如果是 Class 组件）或者 Hooks 的集合。你可以直接：

$r.props 拿到所有属性。
$r.hooks 看到所有钩子状态。
配合 copy 命令：copy($r.props.data)，直接把数据复制到剪贴板，发给后端对质。

从此以后，别再写 console.log(props) 了，直接 $r 它不香吗？

神技三：抓出那个“捣乱鬼” —— Highlight Updates

场景：你在输入框里打字，结果发现页面底部的 Footer 居然在跟着一闪一闪的重绘。这就是传说中的无效渲染（Wasted Renders） ，也是 React 性能卡顿的元凶。

但肉眼是看不出来的，React 渲染太快了。

开启天眼：

点击 DevTools 那个小齿轮图标 ⚙️。
勾选 "Highlight updates when components render" 。

现在，回到你的页面操作一下。你会发现页面变成了“迪厅”。每当有组件重新渲染，它周围就会闪烁绿框或黄框。

绿框：渲染很快。
黄框/红框：渲染很慢。

如果你只是输入一个字符，结果整个页面的组件都在狂闪，恭喜你，你抓到了一个性能 Bug。（通常是因为 Context 滥用或者没加 React.memo，回看我之前的文章）。这是为您准备的关于“React 调试神技”的实战文章。依然由“大布布将军”为您主笔，拒绝教科书式的说明书，只教你那些能让你早点下班的骚操作。

神技四：灵魂拷问 —— “Why did this render?”

看到了组件在闪，但你死活想不通为什么它会闪。 “我明明加了 memo 啊！props 看起来也没变啊！”

DevTools 告诉你真相：

打开 Profiler 标签页。
点击那个录制按钮（圆圈）。
操作一下页面（比如点击按钮）。
停止录制。

你会看到一个像火焰一样的图。把鼠标移到那个莫名其妙重渲染的组件上，DevTools 会用大白话告诉你：

"Why did this render?" "Props changed: (onClick)"

破案了！原来是你父组件每次 Render 都生成了新的 onClick 函数，导致子组件的 memo 失效了。（这时候才是 useCallback 登场的时候）。

它甚至会精确到告诉你，是哪个具体的 prop 变了。这比你自己在代码里写 prevProps !== nextProps 也要快一万倍。

神技五：时光回溯 —— Suspense 的切换

如果你用了 React.lazy 和 Suspense（就像我上一篇教你的），你想调试 Loading 状态的样式怎么办？因为网速太快，Loading 一闪而过，截屏都截不到。

DevTools 做法：

在 Components 面板找到 <Suspense> 组件。
你会发现右侧有一个 "Suspend" 的小复选框（或者是一个时钟图标）。
点击它。

魔法发生了：React 会强制让这个 Suspense 进入“挂起”状态，Fallback 的 Loading 界面会一直显示在屏幕上，直到你取消勾选。你可以慢慢悠悠地调 CSS，把那个 Loading 动画调到最优雅为止。

别再用 console.log 这种“原始人”的调试方式了：React DevTools 实战神技