Tiếp theo Thế giới JS share về cách debugging trong javascript. Đây là kỹ năng khá quan trọng bạn cần biết khi lập trình. Thường xảy ra lỗi khi viết code và lỗi có thể do cú pháp hoặc logic. Những lỗi này tạo ra rất nhiều sự mơ hồ trong logic và sự hiểu biết của cả người dùng và lập trình viên. Cũng có thể có lỗi trong code mà người lập trình không thể nhìn thấy và có thể gây ra sự tàn phá. Để xác định những lỗi này, chúng tôi cần Trình gỡ lỗi có thể xem qua toàn bộ code hoặc chương trình, xác định lỗi và cũng có thể sửa chúng.

1) trình gỡ lỗi(debugger)

Từ khóa trình gỡ lỗi(debugger) được sử dụng trong code để buộc dừng thực thi code tại điểm dừng và gọi hàm gỡ lỗi. Chức năng trình gỡ lỗi được thực thi nếu cần gỡ lỗi, nếu không thì không có hành động nào được thực hiện.

Hãy xem chương trình JavaScript về gỡ lỗi:

<!-- // https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->

<h4>Debugging demonstrations using Debugger keyword</h4>
    The solution of 20 * 5 is:
        <p id="test"></p>
  
  
<p>If the debugger is turned on the code stops 
execution at the start of the debugger</p>
  
      
var x = 20;
var y = 5;
var z = x * y;
debugger;
document.getElementById("test").innerHTML = z;

Đầu ra:

Việc triển khai các trình gỡ lỗi trước đây rất khó khăn nhưng theo thời gian và với sự ra đời của các trình duyệt hiện đại, nhiều trình gỡ lỗi tích hợp sẵn đã được triển khai. Như đã đề cập trước đây, việc thiết lập các điểm ngắt sẽ ngắt dòng code và chuyển điều khiển sang một khu vực khác từ nơi nó được gọi. Điều này có thể được thực hiện trong cửa sổ gỡ lỗi của trình duyệt. Ngoài ra, việc thiết lập các điểm dừng trong javascript hoạt động tương tự như các điểm dừng trong Java khi việc thực thi code dừng lại và việc kiểm tra các giá trị được thực hiện bởi trình duyệt. Người ta có thể tiếp tục điều khiển luồng sau khi kiểm tra xong. Việc gỡ lỗi có thể được bật hoặc tắt tùy thuộc vào sự thuận tiện của người dùng. Tất cả điều này có thể được thực hiện thông qua “Bảng điều khiển(console)” của menu trình gỡ lỗi.

2) Sử dụng phương thức console.log()

Có một cách khác để hiển thị các giá trị JS trong cửa sổ trình gỡ lỗi.

Hãy xem chương trình JavaScript sử dụng console.log():

<!-- // https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
 -->

<h3>vpsus</h3>
<h4>Hello vpsus</h4>
  
<p>
1. To view the result activate debugging of your 
browser(preferred the latest) by pressing F12 <br>
2. Select "Console" in the debugger menu.
</p>
  
  
x = "Where do you work?"
y = "I work at vpsus.vn"
console.log(x);
console.log(y);

Đầu ra:

vpsus
Hello vpsus
1. To view the result activate debugging of your browser(preferred the latest) by pressing F12
2. Select "Console" in the debugger menu.

x = "Where do you work?" y = "I work at vpsus.vn" console.log(x); console.log(y);

3) Đặt điểm ngắt(Break):

Console.log() là một cách hay để gỡ lỗi nhưng đặt điểm ngắt là phương pháp nhanh hơn, hiệu quả hơn và tốt hơn. Trong phương pháp này, các Điểm ngắt(Break Points) được đặt trong code sẽ dừng việc thực thi code tại thời điểm đó để có thể kiểm tra giá trị của các biến tại thời điểm đó.

Dưới đây là một số ưu điểm của việc sử dụng Breakpoint so với phương thức console.log():

Trong phương thức console.log(), người dùng phải hiểu code và đặt console.log() theo cách thủ công tại các điểm trong code. Nhưng trong phương pháp điểm dừng, chúng ta có thể đặt điểm ngắt thông qua công cụ Nhà phát triển ở bất kỳ đâu trong code mà không hề biết.

Trong phương thức console.log() chúng ta phải in thủ công các giá trị của các biến khác nhau nhưng tại một điểm dừng nhất định, tất cả các giá trị của tất cả các biến được hiển thị tự động trong công cụ Nhà phát triển.
Nhập phần Công cụ dành cho nhà phát triển bằng cách nhấn phím F12 và chuyển đến nguồn.
Trong phần nguồn, chọn tệp javascript và đặt điểm dừng bằng cách chọn từ danh sách được cung cấp như điểm dừng DOM hoặc điểm dừng Trình nghe sự kiện dừng thực thi code bất cứ khi nào xảy ra sự kiện

HOẶC đặt điểm dừng bằng cách nhấp vào số dòng được hiển thị trong code. Trong hình ảnh sau đây, điểm ngắt được đặt ở dòng 23. (code được sử dụng giống như ví dụ trên)

Như trong hình, code dừng ở dòng 23 và hiển thị tất cả giá trị của các biến trong code tại thời điểm đó.
Vì chúng ta có thể thấy giá trị của I ban đầu là 1 và tại điểm dừng là 5. Do đó, WikiCode được in 5-1=4 lần.

Trên đây là tất cả những gì về debugging trong javascript mà bạn cần biết. Nếu bạn có bất kỳ câu hỏi liên quan tới debugging, hãy chủ động liên hệ và inbox cho chúng tôi, để giúp đỡ bạn sớm nhất

Tiếp theo, hãy cùng Thế giới JS tìm hiểu thêm các kiến thức về Javascript trong các bài tiếp theo trong series học miễn phí Javascript từ cơ bản tới nâng cao.

Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:

• Group Facebook
• Fanpage
• Twitter
• Home page

Share to learn more than!