@@ -4,30 +4,31 @@ title: React Developer Tools
4
4
5
5
<Intro >
6
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.
7
+ ໃຊ້ React Developer Tools ເພື່ອ ກວດ React [ components] ( /learn/your-first-component ) , ແກ້ໄຂ [ props] ( /learn/passing-props-to-a-component ) ແລະ [ state] ( /learn/state-a-components-memory ) , ແລະ ລະບຸບັນຫາດ້ານປະສິດທິພາບ.
8
+
8
9
9
10
</Intro >
10
11
11
12
<YouWillLearn >
12
13
13
- * How to install React Developer Tools
14
+ * ວິທີຕິດຕັ້ງ React Developer Tools
14
15
15
16
</YouWillLearn >
16
17
17
18
## Browser extension {/* browser-extension* /}
18
19
19
- 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 :
20
+ ວິທີການທີ່ງ່າຍທີ່ສຸດໃນການ debug ເວັບໄຊທີ່ເຮັດດ້ວຍ React ແມ່ນຕິດຕັ້ງ React Developer Tools browser extension. ໃຊ້ໄດ້ກັບ browser ທີ່ນິຍົມກັນຫຼາຍໂຕ :
20
21
21
- * [ Install for ** Chrome** ] ( https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en )
22
- * [ Install for ** Firefox** ] ( https://addons.mozilla.org/en-US/firefox/addon/react-devtools/ )
23
- * [ Install for ** Edge** ] ( https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil )
22
+ * [ ຕິດຕັ້ງສຳລັບ ** Chrome** ] ( https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en )
23
+ * [ ຕິດຕັ້ງສຳລັບ ** Firefox** ] ( https://addons.mozilla.org/en-US/firefox/addon/react-devtools/ )
24
+ * [ ຕິດຕັ້ງສຳລັບ ** Edge** ] ( https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil )
24
25
25
- Now, if you visit a website ** built with React,** you will see the _ Components_ and _ Profiler_ panels.
26
+ ປັດຈຸບັນ, ຖ້າທ່ານເຂົ້າເວັບໄຊ ** built with React,** ທ່ານຈະເຫັນ _ Components_ ແລະ _ Profiler_ panels.
26
27
27
28
![ React Developer Tools extension] ( /images/docs/react-devtools-extension.png )
28
29
29
- ### Safari and other browsers {/* safari-and-other-browsers* /}
30
- For other browsers (for example , Safari), install the [ ` react-devtools ` ] ( https://www.npmjs.com/package/react-devtools ) npm package:
30
+ ### Safari ແລະ browser ອື່ນ {/* safari-and-other-browsers* /}
31
+ ສຳລັບ browser ອື່ນ (ຕົວຢ່າງ , Safari), ຕິດຕັ້ງ [ ` react-devtools ` ] ( https://www.npmjs.com/package/react-devtools ) npm package:
31
32
``` bash
32
33
# Yarn
33
34
yarn global add react-devtools
@@ -36,26 +37,26 @@ yarn global add react-devtools
36
37
npm install -g react-devtools
37
38
```
38
39
39
- Next open the developer tools from the terminal:
40
+ ຈາກນັ້ນເປີດ developer tools ຜ່ານ terminal:
40
41
``` bash
41
42
react-devtools
42
43
```
43
44
44
- Then connect your website by adding the following ` <script> ` tag to the beginning of your website's ` <head> ` :
45
+ ຕໍ່ໄປແມ່ນເຊື່ອມຕໍ່ເວັບໄຊໂດຍການເພີ່ມ ` <script> ` tag ໃນບ່ອນເລີ່ມຕົ້ນ ` <head> ` ຂອງເວັບໄຊທ່ານ :
45
46
``` html {3}
46
47
<html >
47
48
<head >
48
49
<script src =" http://localhost:8097" ></script >
49
50
```
50
51
51
- Reload your website in the browser now to view it in developer tools.
52
+ ໂຫຼດເວັບໄຊຂອງທ່ານຄືນໃໝ່ໃນ browser ຕອນນີ້ ເພື່ອເບິ່ງໃນ developer tools.
52
53
53
54
![ React Developer Tools standalone] ( /images/docs/react-devtools-standalone.png )
54
55
55
- ## Mobile (React Native) {/* mobile-react-native* /}
56
- React Developer Tools can be used to inspect apps built with [ React Native] ( https://reactnative.dev/ ) as well .
56
+ ## ມືຖື (React Native) {/* mobile-react-native* /}
57
+ React Developer Tools ສາມາດໃຊ້ກວດແອັບຯທີ່ສ້າງດ້ວຍ [ React Native] ( https://reactnative.dev/ ) ໄດ້ຄືກັນ .
57
58
58
- The easiest way to use React Developer Tools is to install it globally :
59
+ ວິທີການທີ່ງ່າຍທີ່ສຸດແມ່ນໃຊ້ React Developer Tools ທີ່ຕິດຕັ້ງມັນໃນທົ່ວເຄື່ອງທ່ານ :
59
60
``` bash
60
61
# Yarn
61
62
yarn global add react-devtools
@@ -64,13 +65,13 @@ yarn global add react-devtools
64
65
npm install -g react-devtools
65
66
```
66
67
67
- Next open the developer tools from the terminal.
68
+ ຈາກນັ້ນເປີດ developer tools ຜ່ານ terminal.
68
69
``` bash
69
70
react-devtools
70
71
```
71
72
72
- It should connect to any local React Native app that's running .
73
+ ມັນຄວນເຊື່ອມຕໍ່ກັບແອັບ React Native ໃນເຄື່ອງທີ່ກຳລັງເຮັດວຽກຢູ່ .
73
74
74
- > Try reloading the app if developer tools doesn't connect after a few seconds.
75
+ > ລອງໂຫຼດແອັບໃໝ່ຖ້າ developer tools ບໍ່ມີການເຊື່ອມຕໍ່ໃນໄລຍະເວລາຕໍ່ມາ.
75
76
76
- [ Learn more about debugging React Native.] ( https://reactnative.dev/docs/debugging )
77
+ [ ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບ debug ໃນ React Native.] ( https://reactnative.dev/docs/debugging )
0 commit comments