Skip to content

react-developer-tools.md

Latest commit

 

History

History
84 lines (59 loc) · 4.59 KB

react-developer-tools.md

File metadata and controls

84 lines (59 loc) · 4.59 KB
title Інструменти React розробника

Використовуйте інструменти React розробника (React Developer Tools) для інспектування React компонентів, редагування їх пропсів і стану, а також для виявлення проблем з продуктивністю.

  • Як встановити інструменти React розробника

Розширення браузера {/browser-extension/}

Найпростіший спосіб налагодження вебсайтів, створених за допомогою React — встановити розширення браузера "Інструменти React розробника" (React Developer Tools). Воно доступне для декількох популярних браузерів:

Тепер, якщо ви відвідаєте вебсайт, який створений за допомогою React, ви побачите вкладки Components і Profiler.

Розширення 'Інструменти React розробника'

Safari та інші браузери {/safari-and-other-browsers/}

Для інших браузерів (наприклад, Safari) встановіть npm-пакет react-devtools:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Далі відкрийте інструменти розробника з терміналу:

react-devtools

Потім під'єднайте ваш вебсайт, вказавши наступний тег <script> на початку елементу <head> у коді вашого вебсайту:

<html>
  <head>
    <script src="http://localhost:8097"></script>

Перезавантажте вебсайт у браузері, щоб переглянути його в інструментах розробника.

Автономні 'Інструменти React розробника'

<<<<<<< HEAD

Мобільний застосунок (React Native) {/mobile-react-native/}

Інструменти React розробника також можна використовувати для інспектування застосунків, створених за допомогою React Native.

Найпростіший спосіб використання інструментів — встановити їх глобально:

# Yarn
yarn global add react-devtools
=======
## Mobile (React Native) {/*mobile-react-native*/}

To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/debugging/react-native-devtools), the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection.
>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04

[Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging)

<<<<<<< HEAD
Далі відкрийте інструменти розробника з терміналу:
```bash
react-devtools

Вони повинні під'єднатися до будь-якого локально працюючого застосунку React Native.

Спробуйте перезавантажити застосунок, якщо інструменти розробки не під'єднуються протягом кількох секунд.

Дізнатися більше про налагодження React Native.

For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the Safari and other browsers guide above.

3b02f828ff2a4f9d2846f077e442b8a405e2eb04