无需React Developer Tools或console.log，如何在浏览器控制台打印this.props？

好问题！这种“不想动代码、又没装DevTools插件”的调试场景确实挺头疼的，我来分享几个可行的办法：

1. 利用浏览器原生断点调试（最推荐） #

这是最稳妥且无依赖的方式，完全不需要额外工具或修改代码：

• 打开浏览器F12的「Sources」面板
• 在左侧找到你的React组件代码（如果是打包后的代码，可能需要先开启source map定位到源文件）
• 在组件的render方法、或者你想查看props的任意方法里点击行号打个断点
• 触发组件渲染/更新（比如刷新页面、操作触发组件重新渲染），当断点命中时：
  • 在控制台直接输入this.props（类组件）或者props（函数组件）就能查看完整的props内容了

这个方法完全依赖浏览器原生调试能力，不会受React版本限制，也没有任何风险。

2. 通过DOM元素访问React内部实例（非官方，有版本风险） #

React会在组件对应的DOM元素上挂载内部的fiber节点（不同版本属性名有差异），你可以通过这个路径拿到组件实例进而访问props：

• 先找到组件对应的DOM元素，比如用document.querySelector('.your-component-class')获取
• 在控制台查看这个DOM元素的属性，你会看到类似__reactFiber$xxxxxx（React 17+）或者__reactInternalInstance$xxxxxx（旧版本）的属性（xxxxxx是随机生成的后缀）
• 拿到这个fiber节点后，通过fiber.return.stateNode获取组件实例（类组件），然后就能访问instance.props了
  示例代码：

  const domEl = document.querySelector('.user-profile');
  const fiber = domEl.__reactFiber$abc123456; // 替换成实际的属性名
  const componentInstance = fiber.return.stateNode;
  console.log(componentInstance.props);
  

⚠️ 注意：这是React的内部实现细节，官方没有承诺会保持兼容，不同React大版本可能会修改这个属性名，只适合临时调试用，绝对不要在生产代码里这么写！

关于全局默认变量 #

遗憾的是，React本身没有提供官方的全局变量来直接访问任意组件的props。$r是React DevTools插件注入的全局变量，只有装了插件才能用；而你提到的通过DOM元素直接找props，也是DevTools注入的额外属性，没装插件自然看不到。

内容的提问来源于stack exchange，提问作者Anh Trinh