Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Translation for "React Developer Tools" #863

Merged
merged 3 commits into from
Jul 5, 2023
Merged

Translation for "React Developer Tools" #863

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e901c03
chore: added russian translation
xxtereshko Apr 30, 2023
4940267
fix: fixed spaces
xxtereshko Apr 30, 2023
27433f7
Update src/content/learn/react-developer-tools.md
xxtereshko May 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 22 additions & 21 deletions src/content/learn/react-developer-tools.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,31 @@ title: React Developer Tools

<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 Developer Tools для инспекции [компонентов](/learn/your-first-component) React, редактирования [пропсов](/learn/passing-props-to-a-component) и [состояния](/learn/state-a-components-memory), а также для выявления проблем с производительностью.

</Intro>

<YouWillLearn>

* How to install React Developer Tools
* Как установить React Developer Tools

</YouWillLearn>

## 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
Expand All @@ -36,26 +37,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 `<script>` tag to the beginning of your website's `<head>`:
И подключите свой сайт, добавив следующий тег `<script>` в начало секции `<head>` вашего сайта:
```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 Native) {/*mobile-react-native*/}
React Developer Tools также может использоваться для отладки приложений, созданных с помощью [React Native](https://reactnative.dev/).
xxtereshko marked this conversation as resolved.
Show resolved Hide resolved
Самый простой способ использования React Developer Tools - установить их глобально:

The easiest way to use React Developer Tools is to install it globally:
```bash
# Yarn
yarn global add react-devtools
Expand All @@ -64,13 +65,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)