Skip to content

Commit fffd7c6

Browse files
jakubdrozdekjakubdrozdek
authored
Translate React Developer Tools page (#292)
1 parent 5e55241 commit fffd7c6

File tree

3 files changed

+81
-72
lines changed

3 files changed

+81
-72
lines changed

‎beta/src/pages/learn/installation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ React został zaprojektowany z myślą o stopniowym wdrażaniu. Dzięki temu zaw
1313
- [Jak dodać Reacta do strony HTML](/learn/add-react-to-a-website)
1414
- [Jak wystartować nowy projekt reactowy](/learn/start-a-new-react-project)
1515
- [Jak skonfigurować edytor kodu](/learn/editor-setup)
16-
- [Jak zainstalować React Developer Tools](/learn/react-developer-tools)
16+
- [Jak zainstalować narzędzia deweloperskie dla Reacta](/learn/react-developer-tools)
1717

1818
</YouWillLearn>
1919

‎beta/src/pages/learn/react-developer-tools.md

Lines changed: 79 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,79 @@
1-
---
2-
title: React Developer Tools
3-
---
4-
5-
<Intro>
6-
7-
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.
8-
9-
</Intro>
10-
11-
## Browser extension {/*browser-extension*/}
12-
13-
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:
14-
15-
* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
16-
* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
17-
* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
18-
19-
Now, if you visit a website **built with React**, you will see the _Components_ and _Profiler_ panels.
20-
21-
![React Developer Tools extension](/images/docs/react-devtools-extension.png)
22-
23-
### Safari and other browsers {/*safari-and-other-browsers*/}
24-
For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package:
25-
```bash
26-
# Yarn
27-
yarn global add react-devtools
28-
29-
# Npm
30-
npm install -g react-devtools
31-
```
32-
33-
Next open the developer tools from the terminal:
34-
```bash
35-
react-devtools
36-
```
37-
38-
Then connect your website by adding the following `<script>` tag to the beginning of your website's `<head>`:
39-
```html {3}
40-
<html>
41-
<head>
42-
<script src="http://localhost:8097"></script>
43-
```
44-
45-
Reload your website in the browser now to view it in developer tools.
46-
47-
![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
48-
49-
## Mobile (React Native) {/*mobile-react-native*/}
50-
React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well.
51-
52-
The easiest way to use React Developer Tools is to install it globally:
53-
```bash
54-
# Yarn
55-
yarn global add react-devtools
56-
57-
# Npm
58-
npm install -g react-devtools
59-
```
60-
61-
Next open the developer tools from the terminal.
62-
```bash
63-
react-devtools
64-
```
65-
66-
It should connect to any local React Native app that's running.
67-
68-
> Try reloading the app if developer tools doesn't connect after a few seconds.
69-
70-
[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging)
1+
---
2+
title: Narzędzia deweloperskie dla Reacta
3+
---
4+
5+
<Intro>
6+
7+
Użyj narzędzi deweloperskich dla Reacta, aby zbadać [komponenty reactowe](/learn/your-first-component), zmienić ich [właściwości (_ang._ props)](/learn/passing-props-to-a-component) oraz [stan (_ang._ state)](/learn/state-a-components-memory), a także zidentyfikować problemy wydajnościowe w aplikacji.
8+
9+
</Intro>
10+
11+
## Rozszerzenie dla przeglądarki {/_browser-extension_/}
12+
13+
Najprostszym sposobem na debugowanie stron internetowych stworzonych w Reakcie jest zainstalowanie rozszerzenia dla przeglądarki o nazwie React Developer Tools (_pol._ narzędzia deweloperskie dla Reacta). Jest ono dostępne dla kilku popularnych przeglądarek:
14+
15+
- [Zainstaluj rozszerzenie dla **Chrome'a**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
16+
- [Zainstaluj rozszerzenie dla **Firefoksa**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
17+
- [Zainstaluj rozszerzenie dla **Edge'a**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
18+
19+
Teraz, gdy wejdziesz na stronę **zbudowaną w Reakcie**, zobaczysz dodatkowe zakładki o nazwie _Components_ oraz _Profiler_.
20+
21+
![Narzędzia deweloperskie dla Reacta w przeglądarce](/images/docs/react-devtools-extension.png)
22+
23+
### Safari i inne przeglądarki {/_safari-and-other-browsers_/}
24+
25+
Jeśli używasz innej przeglądarki (na przykład Safari), zainstaluj pakiet npm-owy o nazwie [`react-devtools`](https://www.npmjs.com/package/react-devtools):
26+
27+
```bash
28+
# Yarn
29+
yarn global add react-devtools
30+
31+
# Npm
32+
npm install -g react-devtools
33+
```
34+
35+
Następnie otwórz narzędzia deweloperskie w terminalu:
36+
37+
```bash
38+
react-devtools
39+
```
40+
41+
Później podłącz się do swojej strony internetowej dodając poniższy tag `<script>` na początku sekcji `<head>`:
42+
43+
```html {3}
44+
<html>
45+
<head>
46+
<script src="http://localhost:8097"></script>
47+
</head>
48+
</html>
49+
```
50+
51+
Na koniec odśwież stronę w przeglądarce, aby podejrzeć ją w narzędziach deweloperskich.
52+
53+
![Narzędzia deweloperskie dla Reacta - wersja samodzielna](/images/docs/react-devtools-standalone.png)
54+
55+
## Aplikacje mobilne (React Native) {/_mobile-react-native_/}
56+
57+
Narzędzi deweloperskicj dla Reacta można z powodzeniem używać do podglądania aplikacji napisanych w [React Native](https://reactnative.dev/) as well.
58+
59+
Najprościej jest zainstalować je globalnie:
60+
61+
```bash
62+
# Yarn
63+
yarn global add react-devtools
64+
65+
# Npm
66+
npm install -g react-devtools
67+
```
68+
69+
Teraz uruchom narzędzia deweloperskie z terminala.
70+
71+
```bash
72+
react-devtools
73+
```
74+
75+
Powinno nastąpić połączenie do lokalnie działającej aplikacji.
76+
77+
> Jeśli połączenie nie nastąpi w ciągu następnych kilku sekund, spróbuj załadować aplikację ponownie.
78+
79+
[Dowiedz się więcej o debuggowaniu w React Native.](https://reactnative.dev/docs/debugging)

‎beta/src/sidebarLearn.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"path": "/learn/editor-setup"
2525
},
2626
{
27-
"title": "React Developer Tools",
27+
"title": "Narzędzia deweloperskie dla Reacta",
2828
"path": "/learn/react-developer-tools"
2929
}
3030
]

0 commit comments

Comments
 (0)