اشکال زدایی هنر حذف اشکالات و خطاهاست است. امروز در این راهنما ، روش های مختلفی برای اشکال زدایی React را به شما نشان خواهیم داد. از نظر React ، ما می توانیم انواع مختلفی از اشکالات را به شرح زیر داشته باشیم :

  • اشکالات رابط کاربری - مشکلی در رابط کاربری رخ داده است ، مثلا خوب به نظر نمیرسد.
  • اشکالات منطقی- برنامه همانطوری که انتظار داریم، رفتار نمی کند
  • اشکالات شبکه - اگرچه منطق صحیح است ، اما یک سرویس شخص ثالث آنطوری که انتظار داریم رفتار نمی کند.
  • ریگرسیون یا پسرفت - یک ویژگی  که در گذشته کار می کرد و امروز دیگر کار نمی کند.

ext

دسته های بیشتری از این وجود دارد ، اما همین موارد بالا برای شروع اشکال زدایی در React کافی است. بیایید در مورد ایجاد یک برنامه کوچک در ری اکت و چگونگی اشکال زدایی در آن صحبت کنیم.

چگونه Node.js و npm را نصب کنیم؟

قبل از شروع ، حتماً نسخه جدیدی از Node.js و npm را نصب کنید. توصیه می کنم از جدیدترین نسخه LTS (پشتیبانی طولانی مدت) استفاده کنید. از آنجا که npm با Node.js همراه است ، دیگر لازم نیست آن را جداگانه نصب کنید. برای اینکه مطمئن شوید Node.js را به درستی نصب کرده اید ، دستور v- را در ترمینال (خط فرمان) خود اجرا کنید. شما باید چیزی شبیه به این را ببینید:

$ node -v
v10.15.1

اکنون آماده هستیم تا پروژه شما را ایجاد کنیم.

نحوه راه اندازی یک پروژه React

برای شروع ، بیایید یک پروژه را با استفاده از Create React App ایجاد کنیم. این یک پروژه محبوب است ، به خصوص برای یادگیری React. این امر به این دلیل است که بسیاری از بهترین روشهای مرتبط با محیط را در بر می گیرد. برای ایجاد یک پروژه React ، دستور npm create-react-app counter-demo را اجرا کنید. این روند مدتی طول خواهد کشید ، زیرا یک دایرکتوری counter-demo ایجاد کرده و تمام وابستگی های مورد نیاز را نصب می کند.

با استفاده از دستور cd counter-demo به دایرکتوری مربوطه رفته بروید و دستور npm start را اجرا کنید. با این کار یک برگه جدید در مرورگر شما باز می شود و باید برنامه در آن اجرا شود. مرحله بعدی اضافه کردن چیزی برای اشکال زدایی در آنجا است.

نحوه ایجاد یک برنامه شمارنده با ری اکت

برای ساده کردن کار قرار نیست در این مقاله به شما آموزش دهم که چگونه از ری اکت استفاده کنید. آموزش کامل این فریمورک محبوب در اینترنت موجود است. در زیر من یک برنامه شمارنده در ری اکت را ایجاد کرده ام. برای سادگی کار میتوانید کد زیر را در فایل src/App.js خود کپی کنید.

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

پس از اینکه کد فوق را در فایل مربوطه کپی کردید، باید دکمه ای با عنوان "روی من کلیک کنید" را ببینید. با فشردن آن باید مقدار قابل مشاهده در بالای دکمه افزایش یابد. تصویر زیر برنامه را پس از اجرا نشان میدهد :
clicked
نحوه اشکال زدایی React با استفاده از عبارات کنسول

یکی از روش های کلاسیک برای اشکال زدایی یک برنامه ، استفاده از log است. در وب می توانید با استفاده از console.log ، console.warn ، console.error و عبارات مشابه به این هدف دست پیدا کنید. بعنوان مثال ، برای بررسی وضعیت برنامه ، می توانید (console.log (count را اجرا کنید. سپس نتیجه را در inspector مرورگر مشاهده خواهید کرد.

برنامه نویسان از این روش استفاده می کنند ، زیرا اجرای آن سریع است و به مهارت های استدلال شما متکی است. گفته می شود ، استفاده از inspector مرورگر یک رویکرد قدرتمندتر است، زیرا تصویر بهتری از آنچه اتفاق می افتد به شما می دهد.
console
حال ممکن است از شما پرسیده شود که چگونه inspector مرورگر را باز میکنیم. inspector به طور پیش فرض نشان داده نمی شود. شما باید آن را با استفاده از میانبر یا منوی مرورگر (معمولاً به نام توسعه دهنده یا چیز مشابه) فعال کنید.

نحوه اشکال زدایی React با استفاده از inspector مرورگر

inspector مرورگر شامل بسیاری از ابزارهای قدرتمند ، از جمله  یک debugger است. می توان آن را از طریق کد با استفاده از عبارت ;debugger فعال کرد. اشکال زدایی با استفاده از inspector مرورگر به شکل زیر به نظر میرسد :
browser-inspector
برای شروع این کار موارد زیر را انجام دهید:

  • کد بالا را تغییر دهید ، بنابراین یک عبارت ;debugger  در تابع Counter خواهید داشت. مثلاً آن را بعد از خطی که const در آن قرار گرفته وارد کنید.
  • اگر از قبل باز نیست ، inspector مرورگر خود را باز کنید.
  • صفحه را ریفرش کنید.
  • توجه داشته باشید که به جای اجرای برنامه ، مرورگر اجرای برنامه را متوقف می کند. شما چیزی مانند Paused in debugger یا اصطلاحات مشابه آن را مشاهده کنید. همچنین inspector باید اکنون به کد شما اشاره کند.

اکنون که برنامه در حالت یخ زده (Paused ) قرار دارد ، می توانید به روش های مختلف آن را بازرسی کنید. مثالهای زیر را در نظر بگیرید:

  • وقتی بر روی عباراتی که اجرا شده اند با نشانگر موس قرار میگیرید، باید مقادیر جاری به شما نشان داد شود.
  • شما می توانید دستورات را قدم به قدم جلو بروید و آنها را اجرا کنید و یا اینکه کل دستورات را سریع اجرا کنید.

عملکردی غیر از این هم  وجود دارد ، از جمله استفاده از value watchers ها. اما موارد فوق کافی است تا به شما ایده ای بدهد که چطور اشکال زدایی قدرتمند در یک مرورگر می تواند به انجام شود.

چگونه با استفاده از React DevTools به اشکال زدایی بپردازیم؟

برای اشکال زدایی بهتر React بهتر است ابزار React Developer Tools را نصب کنید. این برنامه یک افزودنی برای مرورگرهای مبتنی بر Chrome و Mozilla Firefox است که عملکرد اشکال زدایی ویژه برای React را پیاده سازی می کند. پس از نصب این افزونه ، سربرگ React را در مرورگر خود باز کنید. شما باید به سربرگ Elements و Profiler توجه کنید.

چطور ساختار درختی عناصر ری اکت را اشکال زدایی کنیم؟

سربرگ Elements از افزونه به شما امکان می دهد ساختار عناصر برنامه و حالت مرتبط با آن را ببینید. در مورد برنامه ما ، اگر روی عنصر Counter کلیک کنید ، می توانید مقدار فعلی را مشاهده کنید. همچنین می توان با استفاده از جستجو، عناصر قابل مشاهده را کاهش داد.
react-element-tree

چطور میتوان کارایی ری اکت را اشکال زدایی کرد؟

به منظور اشکال زدایی در مورد مسائل مربوط به کارایی، افزونه از profiler  که برای React طراحی شده است، استفاده میکند. برای استفاده از profiler، موارد زیر را انجام دهید:

  • با کلیک روی حلقه قرمز ، ضبط یک session را شروع کنید
  • بر روی برنامه کار کنید (یعنی چند بار دکمه را فشار دهید)
  • برای پایان session، دوباره حلقه قرمز را فشار دهید. در نتیجه این کار باید زمانبندی اختصاصی قطعات را مشاهده کنید.

در مورد این برنامه ، چیز های زیادی برای نمایش وجود ندارد ، اما این مورد هنگام اشکال زدایی چیزهای پیچیده ، عملکردی با ارزش است.

چگونه میتوان مشکلات مربوط به شبکه را در ری اکت اشکال زدایی کرد؟

معمولاً یک برنامه به یک backend از راه دور متصل می شود. اتصال به یک منبع خارجی خود اشکالات زیادی را به ارمغان می آورد ، زیرا ممکن است داده هایی که از backend  دریافت می کنید ، همان چیزی نباشد که انتظار دارید. یا شاید خود شما در پرس و جوی خود اشتباه کرده اید. برای اشکال زدایی در این نوع مسائل ، از تب Networking از inspectorاستفاده کنید. همه درخواست های ارسال شده شبکه را در آنجا مشاهده خواهید کرد ، و می توانید محتویات آنها را بازرسی کنید.

انجام این کار به همراه یک تکنیک دیگر مانند قرار دادن ;debugger می تواند یک روش مناسب برای اشکالزدایی از این موارد باشد.

نحوه اشکال زدایی React و Redux

اگر از برنامه Redux با برنامه خود استفاده می کنید ، Redux DevTools Extension به شما این امکان را می دهد تا در یک زمان معین از وضعیت برنامه خود آگاهی داشته باشید. با استفاده از این افزونه همچنین میتوانید تا بین وضعیت های مختلف حرکت کنید.

نحوه اشکال زدایی رگرسیون های React

با فرض اینکه از Git برای مدیریت نسخه نویسی برنامه خود استفاده می کنید ، یک دستور ویژه وجود دارد که می توانید برای گرفتن رگرسیون در برنامه خود استفاده کنید. اگر می دانید که یک عملکرد خاص در گذشته کار می کرده است اما اکنون خراب است ، Git می تواند به شما کمک کند تا  در جایی که این عملکرد خراب شده است را پیدا کنید. به این دستور git bisect گفته می شود.

ملاحضات پایانی

هنگام اشکال زدایی React ، ابتدا باید تعیین کنید که چه مشکلی دارید. سپس می توانید براساس آن تصمیم بگیرید که از چه تکنیکی استفاده کنید. اشکال زدایی معمولاً یک فرآیند تعاملی است که در آن شما از برنامه سؤال می کنید و از این طریق مشکل را پیدا میکنید. در این مقاله به روش هایی برای اشکال زدایی در ری اکت پرداختیم، امیدوارم بتوانید از آنها در برنامه های خود استفاده کنید.

برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام لرن سورس عضو شوید.