Skip to content

translate react-developer-tools page to persian #471

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

Merged
merged 4 commits into from
Jun 1, 2025
Merged

translate react-developer-tools page to persian #471

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de63829
translate react-developer-tools page
arashMqs May 26, 2025
bf63903
improve clarity and consistency in Persian localization of react-deve…
arashMqs May 31, 2025
2b4c5ab
Update src/content/learn/react-developer-tools.md
arashMqs May 31, 2025
873045c
Update src/content/learn/react-developer-tools.md
arashMqs May 31, 2025
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
36 changes: 18 additions & 18 deletions src/content/learn/react-developer-tools.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
---
title: React Developer Tools
title: ابزار توسعه ری‌اکت
---

<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.
از ابزار توسعه ری‌اکت برای بررسی [کامپوننت‌ها](/learn/your-first-component)، ویرایش [prop](/learn/passing-props-to-a-component) و [state](/learn/state-a-components-memory) و همچنین شناسایی مشکلات عملکردی استفاده می‌شود.

</Intro>

<YouWillLearn>

* How to install 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:
نصب افزونه ابزار توسعه ری‌اکت ساده‌ترین روش برای اشکال‌زدایی وب‌سایت‌های ساخته‌شده با ری‌اکت است. این افزونه برای چند مرورگر محبوب در دسترس است.

* [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=en)
* [نصب برای **Firefox**](https://addons.mozilla.org/en-US/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.
اکنون، اگر از یک وب‌سایت **ساخته‌شده با ری‌اکت** بازدید کنید، پانل‌های _Components_ و _Profiler_ را خواهید دید.

![React Developer Tools extension](/images/docs/react-devtools-extension.png)

### 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:
### سافاری و سایر مرورگر ها {/*safari-and-other-browsers*/}
برای سایر مرورگر ها (مانند سافاری) پکیج [`react-devtools`](https://www.npmjs.com/package/react-devtools) را نصب کنید.
```bash
# Yarn
yarn global add react-devtools
Expand All @@ -36,26 +36,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*/}
## موبایل (ری‌اکت نیتیو) {/*mobile-react-native*/}

To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/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.
برای بررسی برنامه‌هایی که با [ری‌اکت نیتیو](https://reactnative.dev/) ساخته شده‌اند، می‌توانید از [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) استفاده کنید. این ابزار اشکال‌زدای داخلی است که به‌طور کامل با ابزار توسعه ری‌اکت ادغام شده است. همه ویژگی‌ها، از جمله برجسته‌سازی و انتخاب عناصر بومی، به‌طور دقیق مشابه نسخه افزونه مرورگر کار می‌کنند.

[Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging)
[در مورد اشکال زدایی در ری‌اکت نیتیو بیشتر بخوانید.](https://reactnative.dev/docs/debugging)

> For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the [Safari and other browsers](#safari-and-other-browsers) guide above.
> برای نسخه‌های ری‌اکت نیتیو قبل از 0.76، لطفاً از نسخه مستقل React DevTools مطابق [راهنمای سافاری و سایر مرورگرها](#safari-and-other-browsers) در بالا استفاده کنید.