(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的提問

當專案規模到一定程度的時候，state、props和函式會變的很多，debug上越來越困難。這時我們就會用到一款在chrome上協助開發者debug的插件:React-Developer-Tools。

接下來都會以這份程式碼來示範使用方式:
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <div>
        <App name="我是進度條">在index.js中轉換百分比</App>
    </div>,
    document.getElementById('root')
);

App.js

import React, { Component } from 'react';
class App extends Component{
  constructor(props) {
    super(props);
    this.state={
      percent:"30%"
    }
    this.name="舊的名字";
    this.changePercent=this.changePercent.bind(this);
  }

  changePercent(){
    this.setState({percent:(this.state.percent==="70%")?"30%":"70%"})
    console.log("hey")
  }


    render(){
        return(
          <div>
            <div className="progress-back" style={{backgroundColor:"rgba(0,0,0,0.2)",width:"200px",height:"7px",borderRadius:"10px"}}>
              <div className="progress-bar" style={{backgroundColor:"#fe5196",width:this.state.percent,height:"100%",borderRadius:"10px"}}></div>
            </div>
            <button onClick={this.changePercent}> {this.props.children} </button>
            {this.props.name}
          </div>
        );
    }
}
export default App;

安裝

1. 進入chrome的線上應用程式商店，搜尋React後，就會看到React-Developer-Tools:
   

2. 點選「加到chrome」後，等待安裝，安裝完畢後重新打開chrome。

3. 當你開啟任何一個以React.js撰寫的網站時，React的logo會在右上角發亮
   

以及F12的more中，點選就能夠使用。(以compoent和profiler標籤顯示)

主要功能

React-Developer-Tools功能很多，稍微簡介一下。

1. 監控Component。

打開React-Developer-Tools的Component後，會出現目前專案中Component的結構(目前只有App一個component)

點擊之後，右方就會出現有關於這個component的資訊，當相關的資料被改變時，這個介面也會更新該資料的值:

2. 暫時修改state、props的值。

右鍵點擊資料的值兩下，就能在瀏覽器中模擬修改state/props...之後的狀況，且不影響原本程式碼。
修改前:

修改後:

3. 尋找Component在DOM上的位置

如果你想要測試修改style、elements等，我們必須點擊右邊的眼睛:

Dev tool會自動切換到Elements標籤，並標示出該Component實際render到DOM上的元素位置。這時就能用和一般網頁一樣的方式debug。

4. 配合console使用

當你在component點擊該元件後，回到console，輸入$r，就會跳出和此元件相關屬性，讓你可以選擇並搭配console做一些監控、模擬事件等等常見的debug方式。例如以下是用console去觸發App元件的changePercent()，該函式會改變進度條中的粉紅色的長度。

小結:

簡單介紹了一下這四個我覺得最常用到的功能。除此之外React-Developer-Tools還有監控效能等其他功能，可以摸索看看~