在 React Native 中登入到控制檯

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React Native 中使用 console.log() 登入到控制檯
  2. 在 React Native 中使用 Chrome 開發者工具登入控制檯
在 React Native 中登入到控制檯

在開發任何應用程式時,都需要登入控制檯進行除錯。它的控制檯易於訪問 Web 應用程式,Web 開發人員可以看到記錄到控制檯的值。

讓我們看看如何為使用 React Native 建立的移動應用程式做同樣的事情。

在 React Native 中使用 console.log() 登入到控制檯

日誌記錄是除錯移動應用程式的寶貴工具。儘管如此,許多開發人員還是完全避免使用它,因為在 React Native 中登入到控制檯不像在瀏覽器中那樣直觀。

React Native 允許你使用 JavaScript 開發 Web 應用程式。因此開發人員可以使用 console.log() 方法在終端中記錄某些內容。

問題是移動應用程式中的控制檯更難訪問。讓我們看一個呼叫 console.log() 方法的簡單 React Native 元件。

const SomeComponent = () => {
  const variable = 20
  console.log(variable)
  return (
    <View>
      <Text>Hello, world!</Text>
    </View>
  )
}

在 React Native 中,要訪問記錄到控制檯的當前值,我們必須執行這些命令之一。

react-native log-ios
react-native log-android

可能很清楚,但第一個命令是針對 iOS 的,第二個是針對 Android 的。

在 React Native 中使用 Chrome 開發者工具登入控制檯

另一種檢視記錄值的好方法是將你的應用程式與 Chrome 開發人員工具連線起來,並在那裡檢視記錄值。

為此,你必須先安裝瀏覽器。然後,你必須使用適當的命令來執行應用程式,適用於 iOS 或 Android。

下一步是開啟 developer 選單並選擇 Debug JS Remotely 選項。選擇此選項將在瀏覽器中開啟 Debugger 頁面。

最後,你必須導航到開發人員選項頁面(工具 -> 更多工具 -> 開發人員選項)並開啟控制檯選項卡。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相關文章 - React Native