Cách gỡ lỗi JavaScript với Google Chrome DevTools và Visual Studio Code

Học cách gỡ lỗi là một kỹ năng cần thiết cho các nhà phát triển, vì nó cho phép họ sửa lỗi một cách hiệu quả trong quá trình phát triển. Biết cách sử dụng các công cụ gỡ lỗi có thể không phải lúc nào cũng rõ ràng khi làm việc với JavaScript bên ngoài môi trường nhà phát triển tích hợp (IDE).

---

Hướng dẫn này sẽ xem xét cách gỡ lỗi JavaScript với Google Chrome DevTools, cũng như với editor phổ biến Visual Studio Code (VS Code).

Yêu cầu

Để hoàn thành hướng dẫn này, bạn cần những thứ sau:

• Phiên bản Google Chrome mới nhất được cài đặt trên máy của bạn.
• Phiên bản mới nhất của Visual Studio Code được cài đặt trên máy của bạn.
• Node.js được cài đặt local mà bạn có thể thực hiện theo Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ .

Đối với hướng dẫn này, bạn có thể áp dụng các bài học cho một trong các dự án JavaScript của bạn có thể chạy trên server Node, nhưng cũng có tùy chọn để làm theo bằng ứng dụng mẫu nếu bạn thích.

Bước 1 - Tạo ứng dụng mẫu (Tùy chọn)

Nếu bạn không có dự án JavaScript để theo dõi, bạn có thể hoàn thành bước này để tạo dự án Trò chuyện nhanh .

Bạn sử dụng Git để sao chép repo Design-and-Build-a-Chat-Application-with-Socket.io . Hoặc bạn có thể download file zip và extract nội dung.

Lưu ý: Nếu bạn cần cài đặt Git trên hệ thống của bạn , hãy tham khảo Bắt đầu với Git .

Theo mục đích của hướng dẫn này, bạn sẽ sử dụng mã từ Phần 8 . Hãy dành một chút thời gian để tự làm quen với cách bạn muốn ứng dụng hoạt động.

Bắt đầu bằng cách chuyển đến folder dự án và vào folder part-8 :

cd Design-and-Build-a-Chat-Application-with-Socket.io 
cd part-8 

Tiếp theo, cài đặt các gói npm cho dự án:

npm install 

Sau đó, khởi động server :

npm start 

Nếu bạn truy cập 127.0.0.1:3000 trong Chrome, bạn sẽ thấy dấu nhắc về tên user . Sau khi cung cấp tên user và nhấp vào Trò chuyện! , bạn sẽ được chuyển hướng đến ứng dụng trò chuyện và xem như sau:

Output
User joined the chat... 

Bằng lệnh văn bản vào mục nhập ở cuối cửa sổ và nhấp vào nút Gửi , tin nhắn của bạn sẽ hiển thị trong cửa sổ trò chuyện.

Nếu bạn mở tab trình duyệt mới và truy cập cùng một URL, bạn có thể đăng nhập với quyền user khác và quan sát tin nhắn trò chuyện được gửi đến cửa sổ trò chuyện trong cả hai tab trình duyệt. Đây là chức năng mong đợi cho ứng dụng này.

Giới thiệu lỗi

Bây giờ, bạn sẽ cố tình đưa ra một lỗi nhỏ không thể đăng ký user là ai sau khi họ đã đăng nhập.

Mở part-8/public/app.js trong editor và tìm line 96 :

  //set the username and create logged in message   username = usernameInput.value; 

Thay đổi dòng này thành sau:

  //set the username and create logged in message   username = usernameInput.text; // added bug 

Làm mới tab trình duyệt của bạn. Đăng nhập và quan sát những điều sau:

Output
undefined joined the chat... 

Ứng dụng lấy nhầm tên user của user bằng cách tham chiếu usernameInput.text thay vì usernameInput.value . Ta sẽ sử dụng điều này để thực hành gỡ lỗi.

Bước 2 - Hiểu khái niệm cơ bản về gỡ lỗi

Trước khi bạn bắt đầu gỡ lỗi ứng dụng của bạn , sẽ rất hữu ích nếu bạn làm quen với cách hoạt động của gỡ lỗi. Ý tưởng gỡ lỗi là có thể (có điều kiện) kích hoạt những gì được gọi là điểm ngắt để tạm dừng việc thực thi mã của bạn. Điều này cung cấp cho bạn cơ hội xem xét trạng thái ứng dụng của bạn bằng cách thực hiện một hành động như kiểm tra các biến. Bạn thậm chí có thể tiến thêm một bước nữa và 'xem' các biến bạn chọn, để khi nào ứng dụng của bạn bị tạm dừng, bạn có thể kiểm tra cụ thể các giá trị cho các biến này.

Sau khi kích hoạt điểm ngắt, bạn thường sẽ có các tùy chọn sau:

• Tiếp tục thực hiện chương trình của bạn.
• Bước qua từng dòng mã của bạn.
• Bước ra khỏi chức năng hiện tại mà bạn đang sử dụng.
• Bước vào cuộc gọi chức năng tiếp theo.

Ngoài ra, bạn sẽ có quyền truy cập để xem ngăn xếp cuộc gọi. Nói cách khác, khi các hàm gọi các hàm khác trong chương trình của bạn, bạn có thể kiểm tra lịch sử của các lệnh gọi hàm đó.

Đến đây bạn đã nắm được những kiến thức cơ bản về cách hoạt động của gỡ lỗi, bạn đã sẵn sàng để bắt đầu gỡ lỗi ứng dụng của bạn .

Bước 3 - Gỡ lỗi trong Google Chrome

Để bắt đầu gỡ lỗi trong Chrome, hãy thêm câu lệnh debugger vào ứng dụng của bạn.

Nếu bạn đang theo dõi cùng với ứng dụng mẫu, bạn có thể thêm nó vào trình xử lý sự kiện lần nhấp loginBtn :

loginBtn.addEventListener('click', e => {   debugger; // added debugger   e.preventDefault();   if (!usernameInput.value) {     return console.log('Must supply a username');   }    //set the username and create logged in message   username = usernameInput.text; // added bug   sendMessage({ author: username, type: messageTypes.LOGIN });    //show chat window and hide login   loginWindow.classList.add('hidden');   chatWindow.classList.remove('hidden'); }); 

Khi đạt đến câu lệnh này, ứng dụng của bạn sẽ bị tạm dừng và các công cụ gỡ lỗi sẽ tự động được kích hoạt. Bạn sẽ nhận thấy rằng ứng dụng sẽ chuyển sang màu xám để biểu thị rằng nó đã bị dừng. Bạn cũng sẽ thấy tab Nguồn trong Chrome DevTools đã xuất hiện:

Hãy phân tích những gì ta đang thấy.

Nguồn

Điều đầu tiên bạn có thể nhận thấy là những gì dường như là một bản sao mã của bạn. Đây là mã mà trình duyệt đã tải và đang chạy dưới dạng ứng dụng của bạn. Bạn cũng có thể thấy rằng dòng debugger được đánh dấu bằng màu xanh lam để cho bạn biết rằng đây là nơi ứng dụng của bạn đã bị tạm dừng:

Chrome cung cấp cho bạn khả năng xem mã này vì một lý do. Với mã trước mặt bạn, bây giờ bạn có thể đặt các điểm ngắt . Điểm ngắt là một điểm dừng hoặc tạm dừng có chủ ý trong một chương trình.

Để thêm điểm ngắt, hãy nhấp vào rãnh hoặc khoảng trống, ở bên trái số dòng. Khi bạn làm như vậy, hãy lưu ý Chrome hiện thêm điểm ngắt này vào danh sách các điểm ngắt phía dưới.

Phạm vi

Trong tab Phạm vi, bạn có khả năng kiểm tra các biến trong ứng dụng của bạn . Bạn sẽ nhận thấy có một phần Cục bộ (phạm vi local đối với chức năng có điểm ngắt), phần Global (phạm vi global ) và phần Tập lệnh . Trong phần Tập lệnh , bạn có thể xem các biến trong phạm vi của tập lệnh hiện tại:

Đây là nơi mà một lượng đáng kể thời gian gỡ lỗi của bạn sẽ được sử dụng. Đây là một sự thay thế hiệu quả hơn nhiều để viết ra nhiều câu lệnh console.log() .

Đồng hồ đeo tay

Ngoài việc xem các biến trong tab Phạm vi , bạn cũng có thể xác định các biến mà bạn muốn xem xét cụ thể. Bằng cách thêm một biến vào tab Watch , mỗi khi bạn đạt đến điểm ngắt, bạn có thể nhanh chóng tìm thấy giá trị của biến đó (có thể undefined được undefined tùy thuộc vào vị trí của bạn trong mã). Sử dụng biểu tượng thêm (+) và nhập tên của biến bạn muốn theo dõi.

Nếu bạn đang theo dõi cùng với ứng dụng mẫu, bạn có thể sử dụng:

usernameInput 

Chức năng bước, Ngăn xếp cuộc gọi và Danh sách điểm ngắt

Các phần cuối cùng sẽ cho phép bạn xem danh sách các điểm ngắt, ngăn xếp cuộc gọi, v.v.

Nếu bạn đang theo dõi cùng với ứng dụng mẫu, ngăn xếp cuộc gọi sẽ chứa hàm được liệt kê cho trình xử lý sự kiện cho nút đăng nhập ( loginBtn.addEventListener.e ). Hàm này được liệt kê bởi vì nó là hàm duy nhất được gọi cho đến nay. Khi các hàm gọi nhiều hàm hơn, chuỗi đó sẽ được cập nhật một cách thích hợp.

Cũng chú ý đến các node mũi tên ở đầu trình gỡ lỗi.

Chúng tương ứng với các chức năng được tham chiếu để tiếp tục thực thi mã của bạn hoặc chuyển qua từng dòng hoặc theo chức năng. Kiểm tra các node này một chút để làm quen với cách bạn chuyển việc thực thi mã của bạn .

Cuối cùng, có nhiều loại điểm ngắt khác nhau có thể được cài đặt . Hãy xem cách tạo một điểm ngắt có điều kiện, một điểm sẽ chỉ được kích hoạt nếu một điều kiện nhất định được đáp ứng. Nhấp chuột phải vào máng xối và chọn Thêm điểm ngắt có điều kiện… .

Nếu bạn đang theo dõi cùng với ứng dụng mẫu, bạn có thể tạo một điểm ngắt khi user cố gắng đăng nhập mà không cần nhập tên user . Đặt một điểm ngắt có điều kiện với điều kiện sau:

usernameInput.text === '' 

Trong trường hợp gỡ lỗi ứng dụng mẫu, nếu bạn nhấn nút đăng nhập mà không nhập tên user , điểm ngắt này sẽ được kích hoạt. Nếu không, mã sẽ tiếp tục thực thi như bình thường.

Lưu ý có nhiều tùy chọn điểm ngắt hơn có sẵn mà không được đề cập ở đây.

Bước 4 - Gỡ lỗi trong Mã VS

Như bạn đã thấy cho đến nay, Công cụ dành cho nhà phát triển của Chrome cung cấp trải nghiệm tuyệt vời để gỡ lỗi ứng dụng của bạn với nhiều chức năng. Tuy nhiên, Visual Studio Code theo nhiều cách có chức năng gỡ lỗi phù hợp được tích hợp liền mạch hơn vào môi trường của bạn.

Để bắt đầu gỡ lỗi trong VS Code, hãy cài đặt tiện ích mở rộng Debugger cho Chrome :

Hãy xem nhanh tab gỡ lỗi trong thanh bên (ở bên trái editor theo mặc định). Mở tab gỡ lỗi bằng cách nhấp vào biểu tượng trông giống như một lỗi:

Khi mở ngăn này, bạn sẽ thấy các công cụ tương tự như những gì ta đã thấy trong Chrome: biến, đồng hồ, ngăn xếp cuộc gọi và các điểm ngắt.

Phần lớn các chức năng mà bạn nhận được trong Chrome DevTools có sẵn ngay tại đây bên trong VS Code.

Đến đây bạn đã thấy tab Gỡ lỗi, hãy tạo cấu hình chạy cho VS Code biết cách gỡ lỗi ứng dụng của bạn. VS Code lưu trữ các cấu hình gỡ lỗi trong một file có tên là launch.json bên trong một folder có tên .vscode .

Để yêu cầu VS Code tạo file này cho bạn, bạn có thể nhấp vào liên kết được đề cập trong thông báo Để tùy chỉnh Chạy và Gỡ lỗi tạo file chạy .json trong ngăn. Bạn cũng có thể thực hiện điều này bằng cách chuyển qua menu và chọn Chạy, sau đó là Thêm cấu hình… . Sau đó, bạn sẽ chọn Chrome .

Cấu hình cụ thể mà bạn đã tạo sẽ tự động đính kèm vào ứng dụng tại cổng đã xác định.

Bạn có thể cần áp dụng các thay đổi đối với cấu hình này để trỏ chính xác đến mã nguồn của ứng dụng.

Nếu bạn đang theo dõi cùng với ứng dụng mẫu, bạn nên thay đổi cổng từ 8080 thành 3000 .

Ứng dụng mẫu được cung cấp từ folder public và bạn nên cập nhật webRoot để phản ánh điều đó.

Để gỡ lỗi ứng dụng mẫu, file launch.json sẽ giống như sau:

{   "version": "0.2.0",   "configurations": [     {       "type": "chrome",       "request": "launch",       "name": "Launch Chrome",       "url": "http://localhost:3000",       "webRoot": "${workspaceFolder}/public"     }   ] } 

Lưu ý: Lưu ý ứng dụng của bạn phải đang chạy local tại một cổng nhất định để ứng dụng này hoạt động.

Với cấu hình được xác định, bây giờ bạn có thể bắt đầu phiên gỡ lỗi của bạn bằng cách nhấp vào nút phát màu xanh lục ở đầu ngăn. Bạn cũng có thể sử dụng menu ( Chạy và sau đó Bắt đầu gỡ lỗi ) và các phím tắt.

Ứng dụng của bạn sẽ bật lên trong cửa sổ Chrome.

Bạn sẽ nhận thấy thanh menu gỡ lỗi bật lên ở nền bên trong VS Code. Với thanh công cụ gỡ lỗi này, bạn có thể tạm dừng, khởi động lại, tiếp tục và sử dụng các chức năng từng bước để chuyển mã của bạn và tương tác với trình gỡ lỗi.

Với gỡ lỗi được kết nối, bạn có thể đặt điểm ngắt trong mã giống như bạn đã làm trong Chrome. Nhấp vào rãnh bên cạnh số dòng.

Nếu bạn đang theo dõi cùng với ứng dụng mẫu, hãy tạo một điểm ngắt ở cùng vị trí như trước, ngay bên trong lệnh gọi lại sự kiện đăng nhập.

Bây giờ, khi cố gắng đăng nhập mà không nhập tên user , điểm ngắt sẽ kích hoạt và chuyển ngữ cảnh trở lại Mã VS để điều tra thêm.

Từ đây, chức năng mà ta đã thảo luận trong Chrome sẽ chuyển trực tiếp sang VS Code. Nếu bạn muốn thêm một điểm ngắt có điều kiện, hãy nhấp chuột phải vào rãnh và chọn Thêm điểm ngắt có điều kiện … với một số điều kiện. Nếu bạn muốn xem một biến, hãy nhấp để thêm một biến mới và nhập tên của biến để xem. Nếu bạn muốn khám phá các biến, hãy chuyển đến tab Biến .

Kết luận

Trong hướng dẫn này, bạn đã sử dụng cả Chrome và Visual Studio Code để gỡ lỗi ứng dụng của bạn . Biết cách hoạt động của cả hai tùy chọn này sẽ cho phép bạn áp dụng quy trình làm việc phù hợp nhất với mình.

Thực hiện bước tiếp theo với quyền là nhà phát triển bao gồm việc tận dụng hệ sinh thái các công cụ có sẵn cho ngôn ngữ lập trình của bạn. Gỡ lỗi là một trong những chủ đề cần một thời gian và nỗ lực để bắt đầu, nhưng cuối cùng lợi ích sẽ lớn hơn chi phí.

---

---

Các tin liên quan

Thanh tiến trình trang với các biến JavaScript và CSS
2020-04-16
Xem xét API JavaScript của trình quan sát thay đổi kích thước
2020-04-16
Xem xét API control panel JavaScript
2020-04-16
Xem xét Đề xuất Nhà điều hành Đường ống JavaScript
2020-04-16
Cách triển khai các phương thức mảng JavaScript từ Scratch
2020-04-09
Các đống nhị phân và hàng đợi ưu tiên qua JavaScript
2020-04-05
JavaScript bất biến có thể thay đổi
2020-04-02
Hiểu các tham số mặc định trong JavaScript
2020-03-31
Cookie là gì và cách làm việc với chúng bằng JavaScript
2020-03-19
Tham quan nhanh về date-fns, Thư viện ngày JavaScript đơn giản
2020-03-18