Trực quan hóa khi chạy mã chương trình

Giả sử bạn cần giải một bài toán 35. Search Insert Position, tìm giá trị index của target trong một mảng được sắp xếp theo thứ tự tăng dần, nếu không có thì trả về giá trị index cần chèn target vào.

Sau khi tìm hiểu về binary search, bạn đưa ra một đoạn mã sau:

function searchInsert(nums, target) {
    let l = 0, r = nums.length - 1;
    while(l < r) {
        let m = l + (r - l) % 2;
        if (nums[m] == target) {
            return m;
        }
        if (nums[m] < target) {
            l = m + 1;
        } else {
            r = m - 1;
        }
    }
    return l  
};

Giả sử mảng được truyền vào là [1,3,5,6] và target là 5, gọi searchInsert([1,3,5,6], 5) trả về kết quả là 2 , là giá trị index đúng của 5

Tuy nhiên, cũng với mảng trên, target là 2 , tức gọi searchInsert([1,3,5,6], 2), trả về 0 là sai. Kết quả mong đợi là 1.

 

Vậy làm sao để debug đoạn mã trên?

Giới thiệu đến bạn một công cụ Visualize Code Running có tên là pythontutor.com giúp bạn xem được từng bước được mô tả một cách trực quan. Dù là pythontutor nhưng công cụ này hỗ trợ nhiều loại ngôn ngữ như Python, JavaScript, C, C++, and Java.

Bạn vào trang pythontutor.com sau đó chọn Start writing and visualizing code now và chọn ngôn ngữ muốn viết.

Ở đây mình chọn JavaScript và copy/paste đoạn mã trên vào. Lưu ý là nhớ gọi searchInsert([1,3,5,6], 2) để hàm có thể thực thi nhé.

 

Tiếp theo nhấn nút Visualize Execution để bắt đầu xem code thực thi ra sao. Bấm Next để di chuyển đến bước tiếp theo.

Hình minh họa:

Nửa màn hình bên trái chứa code, các nút bấm để di chuyển đến bước tiếp theo Next, bước trước đó Prev, bước cuối cùng Last và bước đầu tiên First

– Mũi tên xanh lá câu nhạt chỉ dòng vừa mới thực thi

– Mũi tên đỏ chỉ dòng sẽ thực thi tiếp theo

Nửa màn hình bên phải là visualize code thực thi

– Global Frame chứa hàm searchInsert

– Khung màu xanh nhạt chứa các thông tin khi gọi hàm searchInsert như nums, target, l, r, m

– Từ nums có mũi tên trỏ xuống mảng màu vàng chính là giá trị của danh sách nums

Sau khi quan sát từng bước thì mình phát hiện bước này có giá trị lr đều là 0 dẫn đến thoát khỏi vòng lặp

Và giá trị trả về là l, tức 0

Vậy vấn đề ở đây là nếu lr đều có giá trị bằng nhau thì vẫn cần nằm trong vòng lặp while để có thể xác định vị trí của lm+1 nếu giá trị này nhỏ hơn target.

Cập nhật điều kiện while (l <= r) và thử lại ta thấy l ở dòng 9 sẽ bằng m+1 tức 0+11

Khi đó l là 1 không nhỏ hơn r0 nên thoát ra khỏi vòng lặp và trả về 1 là kết quả đúng.

Trên đây là một ví dụ cụ thể về cách bạn có thể sử dụng pythontutor để debug một đoạn logic và xem từng bước chạy như thế nào.

Thay vì đi console.log mọi nơi thì cách này xịn xò hơn hẳn phải không?

Lại chúc mọi người debug vui vẻ và giải thêm được nhiều bài toán thú vị nhé.

Nếu bạn nghĩ những nội dung này là hữu ích, bạn có thể khích lệ mình bằng cách:

Mời mình ☕️ cafe qua Ko-fi hay Momo

Theo dõi 👀 để nhận các bài viết mới trên: Careerly, fanpage, linkedin

Subscribe channel Youtube BeautyOnCode giúp mình với! 

🤘 Nhắn mình nhé 🤘

Hẹn gặp mọi người một ngày nào đó!

RELATED POST

Web Developer Learning Resources

Developer Roadmap roadmap.sh is a community effort to create roadmaps, guides and other educational content to help guide developers in…

Git

Bài này note lại vài tài liệu hay về git. How Git Commands work? https://www.youtube.com/watch?v=e9lnsKot_SQ Git Merge vs. Git Rebase…

Relation fields in Django Rest Framework Serializer

The Django model offers various types of relationships such as OneToOneField, ForeignKey, ManyToManyField, and GenericForeignKey.  To present or write data…

Tìm hiểu về DNS

DNS là gì ? Người dùng sử dụng web thông qua các tên miền (domain) của trang web như beautyoncode.com.&nbsp;Các…