của Priyanka Garg
Đối tượng dự định của tôi cho hướng dẫn này là những lập trình viên mới bắt đầu. Bạn sẽ tìm hiểu về cách gỡ lỗi không gây thất vọng bằng các công cụ dành cho nhà phát triển chrome.
Người mới bắt đầu thân mến, một lúc trước, tôi đã ở nơi bạn đang ở! Sau rất nhiều khó khăn, tôi cảm thấy như mình đã tiến xa trong hành trình học tập của mình. Tôi hiện đang ở giai đoạn cấp cao của một bootcamp nhập vai, nơi tôi đang xây dựng các ứng dụng ngăn xếp đầy đủ.
Mỗi ngày, tôi học hỏi và vấp ngã biết bao điều mà tôi ước gì mình biết trước đó. Bài viết này là một nỗ lực để chia sẻ một ý tưởng như vậy sẽ làm cho cuộc sống của bạn dễ dàng hơn.
Như bạn đã học, cách tốt nhất để học lập trình là thực hành. Bây giờ, khi bạn bắt đầu thực hành viết mã, đôi khi (hoặc hầu hết các trường hợp) mã của bạn sẽ không hoạt động; nói cách khác, sẽ có LỖI trong mã của bạn. Và bạn có thể đã thử và học một số cách tiếp cận để gỡ lỗi. Bài viết này không phải là về bất kỳ phương pháp gỡ lỗi nào, mà là cách thiết lập để gỡ lỗi mã của bạn để thực hành lập trình.
Nếu bạn đang thực hành trên môi trường phát triển trực tuyến, rất có thể bạn đã thiết lập trong đó có trình chỉnh sửa, sự cố và bộ kiểm tra để kiểm tra chương trình của bạn.
Bạn đã viết mã và có một số lỗi, và tại một số điểm, các lỗi do bộ kiểm tra đưa ra không thực sự hữu ích.
Tôi sẽ không nói chi tiết về việc gỡ lỗi có thể trở nên tẻ nhạt như thế nào ở đây — thay vào đó, hãy để tôi đi thẳng vào một số mẹo dành cho người mới bắt đầu.
Vấn đề
Ví dụ, tôi đang viết một trình kiểm tra palindrome trong trình soạn thảo của FreeCodeCamp. Giải pháp của tôi không thành công. Trong trường hợp này, chúng tôi có thể sử dụng kết quả của bộ thử nghiệm để gỡ lỗi.
Nhưng hãy giả sử rằng bộ thử nghiệm này không cung cấp cho tôi những gợi ý tuyệt vời về lỗi chính xác. (Đây có thể không phải là ví dụ lý tưởng về lỗi logic. Vấn đề là bạn sẽ gặp phải các vấn đề mà bộ kiểm tra sẽ không trực tiếp chỉ ra lỗi logic.)
Mẹo: Sử dụng bảng điều khiển của các công cụ dành cho nhà phát triển.
Tôi chạy cùng một đoạn mã trong bảng điều khiển với trường hợp thử nghiệm bị lỗi và tôi thấy nó trả về ‘không xác định’. Điều đó có nghĩa là mã không trả lại bất kỳ giá trị nào. Tôi có thể nhanh chóng thấy rằng tôi đã quên trả lại ‘true ‘ nếu chuỗi được phát hiện là một bảng màu nhạt.
Đây là một lỗi rất đơn giản. Hầu hết các trường hợp bạn sẽ gặp lỗi cần kiểm tra các biến của mình. Một cách tiếp cận để kiểm tra các biến là console.log(
Tuy nhiên, tôi khuyên bạn nên sử dụng trình gỡ lỗi công cụ dev thay thế. Trong chương trình của mình, bạn có thể chỉ định điểm mà bạn muốn bắt đầu nhận trợ giúp từ trình gỡ lỗi.
Trình gỡ lỗi sẽ hiển thị cho bạn tất cả các biến trong ngăn xếp lệnh gọi và cho phép bạn thực hiện từng bước các lệnh gọi hàm mà bạn sẽ thấy rất hữu ích.
Bạn sẽ quen với việc sử dụng trình gỡ lỗi sau khi bạn đã sử dụng nó một vài lần. Chú ý các mũi tên trong hộp phía dưới bên trái? Chúng sẽ cho phép bạn kiểm soát luồng chương trình và hiển thị cho bạn các biến khi chúng thay đổi.
Bây giờ chúng ta hãy hướng tới một mánh khóe.
Thủ thuật: Thực hiện thiết lập gỡ lỗi cá nhân
Như đã thấy ở trên, với trình gỡ lỗi và bảng điều khiển, chúng ta có thể xác định vấn đề một cách dễ dàng. Tuy nhiên, nếu tôi muốn chạy lại chương trình đã sửa trên bàn điều khiển chỉ với một dòng thay đổi, tôi sẽ phải nhập lại chương trình đó.
Ngay cả sau đó, tôi vẫn gặp lỗi:
Lỗi này là do tôi đã sử dụng chức năng mũi tên và không thể khai báo lại hăng sô. Điều này có nghĩa là tôi sẽ phải mở một tab mới và bảng điều khiển mới mỗi khi tôi thay đổi mã của mình. Thêm chi phí, phải không?
Hãy tìm một cách giải quyết. Trên hệ thống của bạn, tạo một thư mục và cd vào thư mục đó.
Bây giờ hãy tạo hai tệp: index.js và index.html. Nhập mã HTML sau vào index.html:
Bây giờ hãy di chuyển mã của bạn từ bảng điều khiển sang index.js. Lưu ý rằng tôi đã bắt đầu trình gỡ lỗi ở dòng 2 trong mã.
Bây giờ hãy chạy tệp index.html trong trình duyệt. Mở bảng điều khiển hoặc công cụ dành cho nhà phát triển (bạn có thể phải làm mới để xem trình gỡ lỗi). Bạn có thể gỡ lỗi mã của mình tại đây.
Giờ đây, mỗi khi bạn thực hiện thay đổi đối với index.js, bạn chỉ cần nhấn làm mới trên tab này và mã sẽ chạy lại. Không cần đóng mở tab, không cần gõ lại cả chương trình.
Giữ thư mục bạn vừa tạo tiện dụng. Bất cứ khi nào bạn cần thử hoặc gỡ lỗi một đoạn mã, hãy đưa đoạn mã đó vào index.js và thử nghiệm!!
Bớt tư tưởng
Nếu bạn đã biết điều này, xin chúc mừng bạn đã lãng phí 4 phút quý giá;)
Cuối cùng, hãy nhớ sai lầm là con người! Đừng lo lắng về lỗi — chúng sẽ dạy cho bạn những bài học quý giá nhất về lập trình… và sau đó… Ồ! những nơi bạn sẽ đến…
