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 元素時，我們都會看到與其關聯的屬性和值。

Shyam Hande

更新於: 2019年9月4日

724 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

立即開始