Skip to content

Commit ebdd031

Browse files
carburocarburo
authored
translate React Developer Tools (beta docs) (#513)
1 parent 827fc87 commit ebdd031

File tree

1 file changed

+22
-22
lines changed

1 file changed

+22
-22
lines changed

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

+22-22
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
---
2-
title: React Developer Tools
2+
title: Herramientas de Desarrollo de React
33
---
44

55
<Intro>
66

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.
7+
Utiliza las Herramientas de Desarrollo de React (*React Developer Tools*) para inspeccionar [componentes](/learn/your-first-component) de React, editar [props](/learn/passing-props-to-a-component) y [estado](/learn/state-a-components-memory), e identificar problemas de rendimiento.
88

99
</Intro>
1010

11-
## Browser extension {/*browser-extension*/}
11+
## Extensión del navegador {/*browser-extension*/}
1212

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:
13+
La forma más fácil de depurar sitios web construidos con React es instalar la extensión de las Herramientas de Desarrollo de React. Está disponible para varios de los navegadores más populares:
1414

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)
15+
* [Instálalas para **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
16+
* [Instálalas para **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
17+
* [Instálalas para **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
1818

19-
Now, if you visit a website **built with React**, you will see the _Components_ and _Profiler_ panels.
19+
Ahora, si visitas un sitio web **construido con React**, verás los paneles de _Components_ (componentes) y _Profiler_ (perfilador o generador de perfiles).
2020

21-
![React Developer Tools extension](/images/docs/react-devtools-extension.png)
21+
![Extensión de las Herramientas de Desarrollo de React](/images/docs/react-devtools-extension.png)
2222

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:
23+
### Safari y otros navegadores {/*safari-and-other-browsers*/}
24+
Para otros navegadores (por ejemplo, Safari), instala el paquete de npm [`react-devtools`](https://www.npmjs.com/package/react-devtools):
2525
```bash
2626
# Yarn
2727
yarn global add react-devtools
@@ -30,26 +30,26 @@ yarn global add react-devtools
3030
npm install -g react-devtools
3131
```
3232

33-
Next open the developer tools from the terminal:
33+
A continuación abre las herramientas de desarrollo desde la terminal:
3434
```bash
3535
react-devtools
3636
```
3737

38-
Then connect your website by adding the following `<script>` tag to the beginning of your website's `<head>`:
38+
Luego conecta tu sitio web añadiendo la siguiente etiqueta `<script>` al inicio del `<head>` de tu sitio web:
3939
```html {3}
4040
<html>
4141
<head>
4242
<script src="http://localhost:8097"></script>
4343
```
4444

45-
Reload your website in the browser now to view it in developer tools.
45+
Ahora recarga tu sitio web en el navegador para verlo en las herramientas de desarrollo.
4646

47-
![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
47+
![Versión autónoma de las Herramientas de Desarrollo de React](/images/docs/react-devtools-standalone.png)
4848

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.
49+
## Móvil (React Native) {/*mobile-react-native*/}
50+
Las Herramientas de Desarrollo de React se pueden utilizar también para inspeccionar aplicaciones escritas con [React Native](https://reactnative.dev/):
5151

52-
The easiest way to use React Developer Tools is to install it globally:
52+
Las forma más fácil de usar las Herramientas de Desarrollo de React es instalarlas globalmente:
5353
```bash
5454
# Yarn
5555
yarn global add react-devtools
@@ -58,13 +58,13 @@ yarn global add react-devtools
5858
npm install -g react-devtools
5959
```
6060

61-
Next open the developer tools from the terminal.
61+
Luego abre las herramientas de desarrollo desde la terminal.
6262
```bash
6363
react-devtools
6464
```
6565

66-
It should connect to any local React Native app that's running.
66+
Debería conectarse a cualquier aplicación local de React Native que se esté ejecutando.
6767

68-
> Try reloading the app if developer tools doesn't connect after a few seconds.
68+
> Prueba recargar la aplicación si las herramientas de desarrollo no se conectan después de algunos segundos.
6969
70-
[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging)
70+
[Aprende más sobre la depuración en React Native.](https://reactnative.dev/docs/debugging)

0 commit comments

Comments
 (0)