From cb383d72808b0fabfe6cf6fc396f873b745eed20 Mon Sep 17 00:00:00 2001 From: dahui4dev Date: Thu, 4 Nov 2021 14:39:23 +0800 Subject: [PATCH 1/2] [Beta]: docs(cn): react-developer-tools.md --- beta/src/pages/learn/react-developer-tools.md | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/beta/src/pages/learn/react-developer-tools.md b/beta/src/pages/learn/react-developer-tools.md index 3666054858..c3ff1bf659 100644 --- a/beta/src/pages/learn/react-developer-tools.md +++ b/beta/src/pages/learn/react-developer-tools.md @@ -1,27 +1,29 @@ --- -title: React Developer Tools +title: React 开发者工具 +translators: + - dahui4dev --- -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 [components](/learn/your-first-component)，编辑 [props](/learn/passing-props-to-a-component) 和 [state](/learn/state-a-components-memory)，并识别性能问题。 -## 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: +调试 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) +* [安装 **Chrome** 扩展](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +* [安装 **Firefox** 扩展](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +* [安装 **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 -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 包: ```bash # Yarn yarn global add react-devtools @@ -30,26 +32,26 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal: +接下来从终端打开开发者工具： ```bash react-devtools ``` -Then connect your website by adding the following ` ``` -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) -React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well. +## 移动端（React Native）{#mobile-react-native} +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 +60,13 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the 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 的更多信息。](https://reactnative.dev/docs/debugging) From 74e95dd8a1761995c3fe8b1ee8d0c3bba050bd08 Mon Sep 17 00:00:00 2001 From: QC-L Date: Fri, 27 May 2022 16:11:58 +0800 Subject: [PATCH 2/2] docs(cn): sync with article title --- beta/src/pages/learn/react-developer-tools.md | 4 ++-- beta/src/sidebarLearn.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/beta/src/pages/learn/react-developer-tools.md b/beta/src/pages/learn/react-developer-tools.md index 824c80079f..92860d0346 100644 --- a/beta/src/pages/learn/react-developer-tools.md +++ b/beta/src/pages/learn/react-developer-tools.md @@ -24,7 +24,7 @@ translators: * [安装 **Firefox** 扩展](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) * [安装 **Edge** 扩展](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -现在，如果你访问一个用 **React 构建** 的网站，你将看到 _Components_ 和 _Profiler_ 面板。 +现在，如果你访问一个用 **React 构建** 的网站，你将看到 **Components** 和 **Profiler** 面板。 ![React Developer Tools extension](/images/docs/react-devtools-extension.png) @@ -75,4 +75,4 @@ react-devtools > 如果几秒钟后开发者工具未连接，请尝试重新加载应用程序。 -[了解有关调试 React Native 的更多信息。](https://reactnative.dev/docs/debugging) +[了解有关调试 React Native 的更多信息](https://reactnative.dev/docs/debugging)。 diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json index 580f1ee887..4ef5b94a37 100644 --- a/beta/src/sidebarLearn.json +++ b/beta/src/sidebarLearn.json @@ -24,7 +24,7 @@ "path": "/learn/editor-setup" }, { - "title": "React Developer Tools", + "title": "React 开发者工具", "path": "/learn/react-developer-tools" } ]