From e901c035aebdc5f1ad05d88d9b555e9db70aa840 Mon Sep 17 00:00:00 2001 From: Maxim Tereshko Date: Sun, 30 Apr 2023 17:55:20 +0200 Subject: [PATCH 1/3] chore: added russian translation --- src/content/learn/react-developer-tools.md | 46 ++++++++++++---------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 89208a6bb..dd20c008e 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -4,30 +4,31 @@ title: React Developer Tools -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 Developer Tools для инспекции [компонентов](/learn/your-first-component) React, редактирования [пропсов](/learn/passing-props-to-a-component) и [состояния](/learn/state-a-components-memory), а также для выявления проблем с производительностью. -* How to install React Developer Tools +* Как установить React Developer Tools -## 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: +Самым простым способом отладки сайтов, созданных с использованием React, является установка браузерного расширения React Developer Tools. Оно доступно для нескольких популярных браузеров. -* [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=ru) +* [Установить для **Firefox**](https://addons.mozilla.org/ru/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) +![Расширение React Developer Tools](/images/docs/react-devtools-extension.png) + +### Safari и другие браузеры {/*safari-and-other-browsers*/} +Для других браузеров, таких как Safari, необходимо установить npm пакет [`react-devtools`](https://www.npmjs.com/package/react-devtools): -### 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: ```bash # Yarn yarn global add react-devtools @@ -36,26 +37,28 @@ 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) {/*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 Developer Tools также может использоваться для отладки приложений, созданных с помощью [React Native](https://reactnative.dev/). + +Самый простой способ использования React Developer Tools - установить их глобально: -The easiest way to use React Developer Tools is to install it globally: ```bash # Yarn yarn global add react-devtools @@ -64,13 +67,14 @@ 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 4940267c332ff30f5cba25241c88dd26710d4f77 Mon Sep 17 00:00:00 2001 From: Maxim Tereshko Date: Sun, 30 Apr 2023 17:56:19 +0200 Subject: [PATCH 2/3] fix: fixed spaces --- src/content/learn/react-developer-tools.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index dd20c008e..f13c90567 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -38,7 +38,6 @@ npm install -g react-devtools ``` Затем откройте инструменты разработчика из терминала: - ```bash react-devtools ``` @@ -56,7 +55,6 @@ react-devtools ## Мобильные устройства (React Native) {/*mobile-react-native*/} React Developer Tools также может использоваться для отладки приложений, созданных с помощью [React Native](https://reactnative.dev/). - Самый простой способ использования React Developer Tools - установить их глобально: ```bash @@ -68,7 +66,6 @@ npm install -g react-devtools ``` Откройте инструменты разработчика в терминале. - ```bash react-devtools ``` From 27433f734fdcaab9a2834942b744411a2b8060ee Mon Sep 17 00:00:00 2001 From: Maxim Tereshko Date: Tue, 2 May 2023 10:14:03 +0200 Subject: [PATCH 3/3] Update src/content/learn/react-developer-tools.md Co-authored-by: Khamzat <67521340+XamzatJR@users.noreply.github.com> --- src/content/learn/react-developer-tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index f13c90567..c554df9c6 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -54,7 +54,7 @@ react-devtools ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) ## Мобильные устройства (React Native) {/*mobile-react-native*/} -React Developer Tools также может использоваться для отладки приложений, созданных с помощью [React Native](https://reactnative.dev/). +React Developer Tools также можно использовать для отладки приложений, созданных с помощью [React Native](https://reactnative.dev/). Самый простой способ использования React Developer Tools - установить их глобально: ```bash