- vừa được xem lúc

Hướng dẫn debug trực tiếp ứng dụng ReactJS trong VScode

0 0 23

Người đăng: Harry

Theo Viblo Asia

Hướng dẫn debug trực tiếp ứng dụng ReactJS trong VScode

1. Giới thiệu

Visual studio code là ứng dụng code phổ biến hiện nay đối với các lập trình viên được phát triển bởi Microsoft. Microsoft đã rất nổi tiếng với IDE lập trình Visual Studio. Đối với các anh em lập trình ASP.Net hay C# với ứng dụng Winform hay WPF đã quá quen với IDE này và các anh em cũng quen với sư nặng nề của ứng dụng này. Đối với máy tính thời sinh viên 4GB RAM thì khó thể gánh được ứng dụng này.

  • Đối với Visual studio code thì lại là 1 câu chuyện khác. Lập trình viên có thể cài các Extention mà họ cần mà không cần thiết cài một ứng dụng quá nặng như Visual studio. Đây là ưu điểm cũng là nhược điểm của VScode. Đối với VisualStudio tôi có thể debug một cách dễ dàng với 1 Break point màu đỏ rất đẹp ở đây nhưng khi lập trình ứng dụng ReactJS trong VScode, tôi đã không thể dễ dàng debug trực tiếp ứng dụng ReactJS của mình mà phải thông qua console.log() trên browser. Điều này thật quá khó chịu đối với các state của ReactJS thì thật khó theo dõi luồng của code đang chạy
  • Sau đây tôi sẽ hướng dẫn các bạn Debug trực tiếp ứng dụng ReactJS trong VScode. Hãy quên console.log() đi nhé các bạn😊😊😊. Lét go👌👌

2. Tải 1 ứng dụng ReactJS và sử dụng trình Editor là VScode

  • Bước 1. Tạo 1 ứng dụng ReactJS sử dụng câu lệnh sau trên Terminal
    npx create-react-app my-app

  • Khi download thành công ứng dụng ReactJS bạn chuyển tới thư mục my-app bằng lệnh cd my-app và chạy ứng dụng myapp bằng câu lệnhnpm start

  • Bạn sẽ thấy ứng dụng ReactJS mặc định như sau

  • Mở ứng dụng ReactJS đang chạy với VScode bằng lệnhcode .

  • Bạn sẽ thấy đoạn code trong file App.js như sau: Vậy là xong bước thứ nhất cài đặt 1 ứng dụng ReactJS.

3. Thiết lập debug ứng dụng ReactJS trong VScode

  • Bước 1. Bạn click vào biểu tượng Debug bên trái và click nút Run and Debug
  • Bước 2. Click Web App Chrome để tạo file config VScode sẽ tạo ra file launch.json trong thư mục.vscode Bạn hãy thay đổi file config như sau:
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src" } ]
}

Như vậy là đã xong phần thiết lập.

4. Thực hiện việc debug ReactJS trực tiếp trên VScode

  • Trong file App.js tôi viết 1 ví dụ sau để kiểm tra giá trị của biến tên debug.
  • Click chuột trái vào dòng bạn muốn debug trên Vscode Click và nút Run and debug hoặc nhấn phím F5 Ứng dụng ReactJS của bạn đã dừng tại nơi bạn đặt break point và bạn có thê xem giá trị của biến đó khi hover chuột. Ở ví dụ trên biến có giá trị bằng 1. Bạn nhấn F10 để chạy tiếp chương trình. Phím tắt này sẽ giống như trên Visual Studio.

5. Kết luận

Như vậy tôi đã hướng dẫn các bạn debug trực tiếp ứng dụng ReactJS trong VScode. Hy vọng nó sẽ giúp các bạn tìm ra các bug một cách nhanh nhất. Hẹn gặp lại các bạn trong các bài viết tiếp theo. See you!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Cùng tìm hiểu về các hook trong React hooks

Đối với ai đã từng làm việc với React thì chắc hẳn đã có những lúc cảm thấy bối rối không biết nên dùng stateless (functional) component hay là stateful component. Nếu có dùng stateful component thì cũng sẽ phải loay hoay với đống LifeCycle 1 cách khổ sở Rất may là những nhà phát triển React đã kịp

0 0 100

- vừa được xem lúc

Khi nào nên (và không nên) sử dụng Redux

. Công việc quản lý state với những hệ thống lớn và phức tạp là một điều khá khó khăn cho đến khi Redux xuất hiện. Lấy cảm hứng từ design pattern Flux, Redux được thiết kế để quản lý state trong các project JavaScript.

0 0 127

- vừa được xem lúc

ReactJS: Props và State

Nếu bạn đã học ReactJS hay React Native, bạn sẽ thấy các Props và State được sử dụng rất nhiều. Vậy chính xác chúng là gì? Làm thế nào để chúng ta sử dụng chúng đúng mục đích đây.

0 0 59

- vừa được xem lúc

State và Props trong Reactjs

Hello các bạn, tiếp tục seri tìm hiểu về ReactJs hôm nay mình xin giới thiệu đến các bạn hai thứ mình cho là thú vị nhất của ReactJs là State và Props. State bạn có thể hiểu đơn giản là một nơi mà bạn lưu trữ dữ liệu của Component, từ đó bạn có thể luân chuyển dữ liệu đến các thành phần trong Compon

0 0 54

- vừa được xem lúc

Memoization trong React

. 1.Introduction. Memoization có liên quan mật thiết đến bộ nhớ đệm, và dưới đây là một ví dụ đơn giản:. const cache = {}.

0 0 51

- vừa được xem lúc

Nâng cao hiệu suất React Hooks với React.memo, Memoization và Callback Functions

1.Ngăn Re-render và React.memo. React.

0 0 80