React.js 中的调试和错误边界
react jsjavascript libraryfront end technology更新于 2025/11/6 23:08:17
理解错误消息
如果代码执行过程中出现错误，React 会在屏幕上显示一条可读的错误消息，并附带行号。我们应该理解错误消息才能更正错误。
下面有一个 App.js 文件，其中包含一个输入元素。当输入值发生变化时，控制台会显示文本"减号"。
import React, {Component} from 'react';
class App extends Component {
onChangeHandler=(event)=>{
console.log(event.target.value);
}
render(){
return (
<div >
<input name="myInput" onChange={(event)=>this.onChangeHandler(event)}/>
</div>
);
}
}
export default App;
现在，如果我们错误地添加了 event.input.value 而不是 event.target.value，或者出现任何其他错误，React 将显示错误消息 −
根据网页上显示的错误行号，我们可以纠正它。
调试代码
我们可以使用浏览器的检查功能来调试实际的 React 代码。
- 按 F12 键或在浏览器上右键单击并执行检查
- 导航到与控制台选项卡相邻的"源"选项卡
- 在"源"选项卡中，您可以找到 src 文件夹
- 在 src 文件夹中，我们可以找到所需的 React JS 文件
- 在您想要从 UI 进行调试和处理的位置添加断点
- 一旦我们获得调试器，我们就可以指向当前正在执行的代码来查看其值
- 这对于解决任何逻辑错误非常有用
使用 React Developer 工具
React Developer 工具是一个扩展，一旦添加，就可以深入了解 React 组件
在运行时查看 React 组件的属性和状态值很有帮助。
按 F12 键或右键单击浏览器并执行检查元素。我们将看到一个 React 选项卡。点击它。
每当我们点击左侧元素选项卡中的 HTML 元素时，我们都会看到与其关联的属性和值。
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
