React.js 中的调试和错误边界

理解错误信息

如果代码执行中出现错误，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 开发者工具

React 开发者工具是一个扩展，一旦添加，它就可以提供 React 组件的见解

它有助于在运行时查看 React 组件的属性和状态值。

点击 F12 或右键点击浏览器并选择“检查元素”。我们将看到一个 React 选项卡。点击它。

每当我们在左侧的“元素”选项卡中点击 HTML 元素时，我们都会看到与其关联的属性和值。

更新于: 2019年9月4日

724 次查看

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告