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 đó!

Leave a Reply

Your email address will not be published. Required fields are marked *

RELATED POST

Cặp đôi hủy diệt code xấu: DRY và Orthogonality

Bạn có nghĩ giai đoạn bảo trì (maintenance) là sau khi chương trình được phát hành (release)? Và trong giai…

Nguyên tắc SOLID trong lập trình hướng đối tượng (OOP) – thực hành cùng ngôn ngữ Python

SOLID là gì? SOLID là 5 nguyên tắc nền tảng trong lập trình hướng đối tượng OOP (Object Oriented Programming),&nbsp;giúp…

Bốn bước để học và viết trong thời gian dài

Bài blog này mình muốn gửi đến 4 bước mình đã làm để có thể duy trì việc học và rèn luyện…

BeautyOnCode đạt top 1 trên Careerly

Time flies! Nhanh thật, vậy là mình đã đồng hành cùng các đọc giả trên Careerly được hơn 6 tháng,…

%d bloggers like this: