React 中的 console.log()

在 React 中，console.log() 會將值送到瀏覽器的開發人員主控台，方便你在除錯時檢查 JavaScript 資料。請在值可取得的位置呼叫它：在元件中檢查 props 或目前這次 render 的狀態，在 effect 中觀察已提交的狀態，或在事件處理函式中檢查使用者輸入。

React 中的 console.log() 功能

console.log() 是 JavaScript 方法，不是 React 功能。它會將傳入的引數寫到開發人員主控台，不會顯示在網頁上。開啟瀏覽器的開發人員工具，選取「主控台」面板即可查看訊息。元件可以正常 render 而不記錄任何內容；只有程式執行到呼叫 console.log() 的位置時，主控台才會出現訊息。

如需查看 console API 及其方法的參考資料，請參閱 MDN 的 console 說明文件。

基本 JavaScript 主控台記錄

你可以將字串、數字、物件、陣列或多個值傳給 console.log()。以下是獨立的 JavaScript 範例，會將一則問候字串送到開發人員主控台，並顯示下方的那一行：

console.log("Hello, React!");

Hello, React!

例如，console.log("user", user) 會在主控台中為物件加上標籤。瀏覽器主控台會將物件格式化以供檢視，但實際呈現方式會因瀏覽器而異。若要設定訊息樣式，可以使用主控台的 %c 格式指定符，例如 console.log("%cImportant", "color: red; font-weight: bold")；%c 會將後面的樣式字串套用到訊息文字。console.important() 不是內建方法，因此若要使用，必須由自訂包裝函式自行定義其行為。

記錄元件狀態

在函式元件中，將 console.log(count) 放在元件主體內，即可檢查該次 render 的 count 值。React 每次 render 元件時都會再次執行元件主體，因此這則訊息可能出現很多次。開發環境中的行為（包括 Strict Mode）也可能造成額外 render；不要假設每次使用者操作只會記錄一次。

狀態更新會安排後續的 render。在呼叫 setCount(count + 1) 後立即記錄 count，讀到的仍是目前這次 render 中的值。若要觀察每個已提交的值，可以在依賴項為 [count] 的 effect 中呼叫 console.log(count)；該 effect 在初次掛載後也會執行。若要記錄特定狀態轉換的訊息，請記錄觸發更新的事件或動作，不要把記錄這類副作用放進狀態更新函式中。

檢查 props

在接收 prop 的元件中記錄它。例如，接收 user 的子元件可以在函式主體中呼叫 console.log("user prop", user)。這會顯示該次 render 收到的值，有助於追查資料如何從父元件傳到子元件。由於元件會在 render 時再次執行，同一個 prop 可能被記錄多次。若要檢查巢狀資料，請只記錄正在追查的欄位，讓輸出更容易瀏覽。

記錄事件資料

將記錄呼叫放在事件處理函式中，即可在使用者與頁面互動時檢查資料。以輸入欄位的變更處理函式為例，console.log(event.currentTarget.value) 會在處理函式執行時讀取輸入欄位目前的值。若處理函式也會更新狀態，事件值可以立即記錄，而新的狀態要等到後續 render 才能觀察。在事件處理函式中記錄，也能避免元件因其他原因 render 時重複輸出相同訊息。

安全使用並移除記錄

請把記錄訊息視為暫時性的除錯工具。發布前，搜尋並移除已不再需要的記錄，尤其是包含個人資料、權杖或其他敏感值的訊息。並非所有正式環境建置都會移除 console.log() 呼叫；是否移除取決於專案的建置設定。只有符合應用程式記錄政策的訊息，才應作為刻意保留的營運記錄。

要檢查某個值，請在該值可取得的位置記錄：元件資料可在 render 或 effect 中檢查，互動資料則可在事件處理函式中檢查。較長的除錯工作也可以使用瀏覽器中斷點與 React Developer Tools，檢查程式執行流程和元件資料，無須在程式碼中留下持續性的記錄呼叫。你可以使用瀏覽器主控台的清除控制項，或呼叫 console.clear() 清除目前顯示的訊息；但清除主控台不會移除程式碼中的記錄呼叫。如果預期正式環境套件會移除記錄，請檢查建置設定；否則，請在發布前從原始碼移除暫時性的呼叫。