Merge pull request #287 from reactjs/docs/react-dev-tools

neighborhood999 · web-flow · commit 00dc923ccdeb · 2022-02-22T09:03:34.000+08:00
diff --git a/beta/src/pages/learn/react-developer-tools.md b/beta/src/pages/learn/react-developer-tools.md
@@ -1,27 +1,27 @@
 ---
-title: React Developer Tools
+title: React 開發者工具
 ---
 
 <Intro>
 
-Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems.
+使用 React 開發者工具檢查 React [component](/learn/your-first-component)、編輯 [props](/learn/passing-props-to-a-component) 和 [state](/learn/state-a-components-memory)，並辨認效能問題。
 
 </Intro>
 
-## Browser extension {/*browser-extension*/}
+## 瀏覽器擴充元件 {/*browser-extension*/}
 
-The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers:
+要 debug 用 React 建構的網站最簡單的方式是安裝 React 開發者瀏覽器擴充元件。它可以在一些流行的瀏覽器上使用：
 
 * [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
 * [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
 * [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
 
-Now, if you visit a website **built with React**, you will see the _Components_ and _Profiler_ panels.
+現在，如果你拜訪**用 React 建構**的網站，你將會看到 _Components_ 和 _Profiler_ 控制面板。
 
 ![React Developer Tools extension](/images/docs/react-devtools-extension.png)
 
-### Safari and other browsers {/*safari-and-other-browsers*/}
-For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package:
+### Safari 和其他瀏覽器 {/*safari-and-other-browsers*/}
+對於其他的瀏覽器（例如，Safari），安裝 [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package：
 ```bash
 # Yarn
 yarn global add react-devtools
@@ -30,26 +30,26 @@ yarn global add react-devtools
 npm install -g react-devtools
 ```
 
-Next open the developer tools from the terminal:
+接著從 terminal 打開開發者工具：
 ```bash
 react-devtools
 ```
 
-Then connect your website by adding the following `<script>` tag to the beginning of your website's `<head>`:
+然後透過在你的網站 `<head>` 的起始加入以下 `<script>` tag 來連接你的網站：
 ```html {3}
 <html>
   <head>
     <script src="http://localhost:8097"></script>
 ```
 
-Reload your website in the browser now to view it in developer tools.
+重新載入網頁現在你可以看到開發者工具。
 
 ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
 
 ## Mobile (React Native) {/*mobile-react-native*/}
-React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well.
+React 開發者工具也可以用來檢測由 [React Native](https://reactnative.dev/) 建構的應用程式。
 
-The easiest way to use React Developer Tools is to install it globally:
+使用 React 開發者工具最簡單的方式就是全域安裝它：
 ```bash
 # Yarn
 yarn global add react-devtools
@@ -58,13 +58,13 @@ yarn global add react-devtools
 npm install -g react-devtools
 ```
 
-Next open the developer tools from the terminal.
+接著從 terminal 打開開發者工具：
 ```bash
 react-devtools
 ```
 
-It should connect to any local React Native app that's running.
+它應該連接到你任何在本機端執行的 React Native 應用程式。
 
-> Try reloading the app if developer tools doesn't connect after a few seconds.
+> 如果在幾秒鐘內沒有連接上開發者工具，請嘗試重新載入應用程式。
 
-[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging)
+[學習更多關於 React Native 的 debugging。](https://reactnative.dev/docs/debugging)
diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json
@@ -8,23 +8,23 @@
       "path": "",
       "routes": [
         {
-          "title": "Installation",
+          "title": "安裝",
           "path": "/learn/installation",
           "routes": [
             {
-              "title": "Start a New React Project",
+              "title": "開始一個新的 React 專案",
               "path": "/learn/start-a-new-react-project"
             },
             {
-              "title": "Add React to a Website",
+              "title": "將 React 加入到網頁",
               "path": "/learn/add-react-to-a-website"
             },
             {
-              "title": "Editor Setup",
+              "title": "編輯器設定",
               "path": "/learn/editor-setup"
             },
             {
-              "title": "React Developer Tools",
+              "title": "React 開發者工具",
               "path": "/learn/react-developer-tools"
             }
           ]
diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md
@@ -168,7 +168,7 @@ return (
 
 將 JSX 加入到項目裡並不需要複雜的工具，例如一個 bundler 或開發伺服器。本質上，加入 JSX **就像加入一個 CSS preprocessor。**這只需要你安裝 [Node.js](https://nodejs.org/) 到你的電腦裡。
 
-在終端機轉到你的項目文件夾裡，再貼上以下的兩行指令：
+在 terminal 轉到你的項目文件夾裡，再貼上以下的兩行指令：
 
 1. **第一步：** 執行  `npm init -y`（如果失敗了，[這裡有方法解決](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d)）
 2. **第二步：** 執行  `npm install babel-cli@6 babel-preset-react-app@3`

Original file line number	Diff line number	Diff line change
`@@ -8,23 +8,23 @@`
`8`	`8`	`"path": "",`
`9`	`9`	`"routes": [`
`10`	`10`	`{`
`11`		`- "title": "Installation",`
	`11`	`+ "title": "安裝",`
`12`	`12`	`"path": "/learn/installation",`
`13`	`13`	`"routes": [`
`14`	`14`	`{`
`15`		`- "title": "Start a New React Project",`
	`15`	`+ "title": "開始一個新的 React 專案",`
`16`	`16`	`"path": "/learn/start-a-new-react-project"`
`17`	`17`	`},`
`18`	`18`	`{`
`19`		`- "title": "Add React to a Website",`
	`19`	`+ "title": "將 React 加入到網頁",`
`20`	`20`	`"path": "/learn/add-react-to-a-website"`
`21`	`21`	`},`
`22`	`22`	`{`
`23`		`- "title": "Editor Setup",`
	`23`	`+ "title": "編輯器設定",`
`24`	`24`	`"path": "/learn/editor-setup"`
`25`	`25`	`},`
`26`	`26`	`{`
`27`		`- "title": "React Developer Tools",`
	`27`	`+ "title": "React 開發者工具",`
`28`	`28`	`"path": "/learn/react-developer-tools"`
`29`	`29`	`}`
`30`	`30`	`]`