React Хөгжүүлэгчийн хэрэгсэл

React Хөгжүүлэгчийн хэрэгслийг ашиглан component-үүдийг хянах, props болон state-үүдийг засварлах, гүйцэтгэлийн асуудлуудыг тодорхойлох боломжтой.

Агуулга

React Хөгжүүлэгчийн хэрэгслийг хэрхэн суулгах талаар

Вэб хөтчийн өргөтгөл

React ашиглан бүтсэн вэб сайтуудыг дибаг хийх хамгийн хялбар арга бол React Хөгжүүлэгчийн хэрэгсэл өргөтгөлийг суулгах явдал юм. Үүнийг та хэд хэдэн түгээмэл ашиглагддаг вэб хөтчүүд дээр ашиглах боломжтой:

Суулгасны дараагаар, хэрэв та React ашиглан бүтсэн вэб сайтад зочилбол Components болон Profiler самбаруудыг харах болно.

Safari болон бусад хөтчүүд

Бусад хөтчүүдийн хувьд (жишээ нь Safari) react-devtools npm package суулгана уу:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

Дараа нь терминалаас хөгжүүлэгчийн хэрэгслийг нээнэ үү:

react-devtools

Дараа нь вэб сайтынхаа <head>-ийн эхэнд дараах <script> тагийг нэмж вэб сайтаа холбоно уу:

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

Одоо харин хөгжүүлэгчийн хэрэгслээр үзэхийн тулд вэб сайтаа хөтөч дээр дахин ачаална уу.

Mobile (React Native)

React Native ашиглан бүтээсэн аппуудыг шалгахын тулд React Developer Tools-тэй гүнзгий уялдсан суурилагдсан debugger болох React Native DevTools-ийг ашиглаж болно. Native элементийг тодруулах болон сонгох зэрэг бүх боломж нь browser extension-тэй ижил ажиллана.

React Native дээр debugging хийх талаар дэлгэрэнгүй уншина уу.

React Native-ийн 0.76-аас өмнөх хувилбаруудад дээрх Safari болон бусад browser зааврыг дагаж React DevTools-ийн standalone хувилбарыг ашиглана уу.

PreviousUsing TypeScript

NextReact Compiler