Hướng dẫn này chỉ cho bạn quy trình làm việc cơ bản để gỡ lỗi mọi vấn đề về JavaScript trong Công cụ cho nhà phát triển. Đã đọc hoặc xem phiên bản video của hướng dẫn này.
Tái hiện lỗi
Việc tìm một loạt hành động giúp tái tạo lỗi một cách nhất quán luôn là bước đầu tiên để gỡ lỗi.
- Mở bản minh hoạ này trong một thẻ mới.
- Nhập
5
vào hộp Số 1. - Nhập
1
vào hộp Số 2. - Nhấp vào Thêm số 1 và số 2. Nhãn bên dưới nút cho biết
5 + 1 = 51
. Kết quả phải là6
. Đây là lỗi bạn sẽ khắc phục.
Trong ví dụ này, kết quả của 5 + 1 là 51. Phải là 6.
Làm quen với giao diện người dùng của bảng điều khiển Nguồn
Công cụ cho nhà phát triển cung cấp nhiều công cụ cho nhiều tác vụ, chẳng hạn như thay đổi CSS, phân tích trang tải hiệu suất và giám sát các yêu cầu mạng. Bảng điều khiển Sources (Nguồn) là nơi bạn gỡ lỗi JavaScript.
Mở Công cụ cho nhà phát triển rồi chuyển đến bảng điều khiển Nguồn.
Bảng điều khiển Sources (Nguồn) có 3 phần:
- Thẻ Page (Trang) có cây tệp. Mọi tệp mà trang yêu cầu đều được liệt kê ở đây.
- Phần Trình soạn thảo mã. Sau khi chọn một tệp trong tab Trang, nội dung của tệp đó được hiển thị tại đây.
Mục Debugger (Trình gỡ lỗi). Nhiều công cụ để kiểm tra JavaScript của trang.
Nếu cửa sổ Công cụ cho nhà phát triển rộng, theo mặc định, Trình gỡ lỗi sẽ nằm ở bên phải Trình soạn thảo mã. Trong trường hợp này, thẻ Phạm vi và Xem sẽ kết hợp Điểm ngắt, Ngăn xếp cuộc gọi và các thẻ khác dưới dạng những mục có thể thu gọn.
Tạm dừng mã có điểm ngắt
Một phương pháp phổ biến để gỡ lỗi như thế này là chèn nhiều câu lệnh console.log()
vào mã để kiểm tra các giá trị khi tập lệnh thực thi. Ví dụ:
function updateLabel() {
var addend1 = getNumber1();
console.log('addend1:', addend1);
var addend2 = getNumber2();
console.log('addend2:', addend2);
var sum = addend1 + addend2;
console.log('sum:', sum);
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}
Phương thức console.log()
có thể hoàn thành công việc, nhưng điểm ngắt có thể hoàn thành công việc nhanh hơn. Đáp
điểm ngắt cho phép bạn tạm dừng mã ở giữa quá trình thực thi và kiểm tra tất cả giá trị tại điểm ngắt đó
từng thời điểm. Điểm ngắt có một số ưu điểm so với phương thức console.log()
:
- Với
console.log()
, bạn cần phải mở mã nguồn, tìm mã có liên quan theo cách thủ công, chèn các câu lệnhconsole.log()
, sau đó tải lại trang để xem các thông báo trong Bảng điều khiển. Với các điểm ngắt, bạn có thể tạm dừng trên đoạn mã có liên quan mà không cần biết mã đó như thế nào có cấu trúc. - Trong các câu lệnh
console.log()
, bạn cần chỉ định rõ từng giá trị mà mình muốn kiểm tra. Với các điểm ngắt, Công cụ cho nhà phát triển hiển thị cho bạn giá trị của tất cả biến tại thời điểm đó. Đôi khi, có những biến ảnh hưởng đến mã của bạn mà bạn thậm chí không biết.
Tóm lại, điểm ngắt có thể giúp bạn tìm và sửa lỗi nhanh hơn phương thức console.log()
.
Nếu lùi lại một chút và suy nghĩ về cách hoạt động của ứng dụng, bạn có thể đưa ra một phỏng đoán có cơ sở rằng
tổng không chính xác (5 + 1 = 51
) được tính trong trình nghe sự kiện click
liên kết với
Nút Thêm số 1 và số 2. Do đó, bạn có thể muốn tạm dừng mã trong khoảng thời gian
mà trình nghe click
thực thi. Điểm ngắt trình xử lý sự kiện cho phép bạn thực hiện chính xác việc đó:
- Trong mục Debugger (Trình gỡ lỗi), hãy nhấp vào Event Listener Breakpoints (Điểm ngắt trình xử lý sự kiện) để mở rộng . Công cụ cho nhà phát triển cho thấy danh sách các danh mục sự kiện có thể mở rộng, chẳng hạn như Ảnh động và Bảng nhớ tạm.
- Bên cạnh danh mục sự kiện Chuột, hãy nhấp vào arrow_right Mở rộng. Công cụ cho nhà phát triển cho thấy danh sách các sự kiện chuột, chẳng hạn như nhấp chuột và nhấp chuột. Mỗi sự kiện đều có một hộp đánh dấu bên cạnh.
Đánh dấu vào hộp nhấp. Công cụ cho nhà phát triển hiện được thiết lập để tự động tạm dừng khi bất kỳ
click
nào trình nghe sự kiện sẽ thực thi.Quay lại bản minh hoạ, nhấp lại vào Thêm số 1 và Số 2. Công cụ cho nhà phát triển tạm dừng bản minh hoạ và đánh dấu một dòng mã trong bảng điều khiển Sources (Nguồn). Bạn nên tạm dừng Công cụ cho nhà phát triển trên dòng này mã:
function onClick() {
Nếu bạn đang tạm dừng trên một dòng mã khác, hãy nhấn vào Tiếp tục Tiếp tục thực thi tập lệnh cho đến khi bạn tạm dừng trên đúng dòng.
Điểm ngắt trình xử lý sự kiện chỉ là một trong nhiều loại điểm ngắt có trong Công cụ cho nhà phát triển. Bây giờ đáng để khám phá tất cả các loại khác nhau, bởi vì mỗi loại cuối cùng đều giúp bạn gỡ lỗi các loại nhanh nhất có thể. Xem bài viết Tạm dừng mã có điểm ngắt để tìm hiểu thời điểm và cách hãy sử dụng từng loại.
Duyệt qua mã
Một nguyên nhân phổ biến gây ra lỗi là do một tập lệnh thực thi không đúng thứ tự. Duyệt qua mã của bạn cho phép bạn xem qua quá trình thực thi mã, từng dòng một và tìm ra chính xác vị trí nó đang thực thi theo thứ tự khác với dự kiến. Hãy thử ngay:
Trên bảng điều khiển Nguồn của Công cụ cho nhà phát triển, hãy nhấp vào step_into Bước vào lệnh gọi hàm tiếp theo để thực thi từng dòng
onClick()
. Công cụ cho nhà phát triển làm nổi bật dòng mã sau:if (inputsAreEmpty()) {
Nhấp vào step_over Bước qua lệnh gọi hàm tiếp theo.
Công cụ cho nhà phát triển thực thi
inputsAreEmpty()
mà không can thiệp vào. Lưu ý cách Công cụ cho nhà phát triển bỏ qua một vài dòng của . Điều này là doinputsAreEmpty()
được đánh giá là false, vì vậy, khối của câu lệnhif
là không thực thi mã.
Đó là ý tưởng cơ bản khi thực hiện các bước trong mã. Nếu xem mã trong get-started.js
, bạn có thể
thấy rằng lỗi có thể nằm ở đâu đó trong hàm updateLabel()
. Thay vì bước qua
mỗi dòng mã, bạn có thể sử dụng một loại điểm ngắt khác để tạm dừng mã gần với khả năng
vị trí của lỗi.
Đặt điểm ngắt dòng mã
Điểm ngắt dòng mã là loại điểm ngắt phổ biến nhất. Khi bạn có một dòng cụ thể mã mà bạn muốn tạm dừng, hãy sử dụng điểm ngắt dòng mã:
Xem dòng mã cuối cùng trong
updateLabel()
:label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
Ở bên trái của mã, bạn có thể thấy số dòng của dòng mã cụ thể này, tức là 32. Nhấp vào 32. Công cụ cho nhà phát triển đặt một biểu tượng màu xanh dương lên trên 32. Điều này có nghĩa là điểm ngắt dòng mã trên dòng này. Công cụ cho nhà phát triển hiện luôn tạm dừng trước khi dòng mã này thực thi.
Nhấp vào Tiếp tục Tiếp tục thực thi tập lệnh. Chiến lược phát hành đĩa đơn tập lệnh tiếp tục thực thi cho đến khi đến dòng 32. Trên các dòng 29, 30 và 31, Công cụ cho nhà phát triển hiển thị các giá trị của
addend1
,addend2
vàsum
cùng dòng bên cạnh nội dung khai báo của chúng.
Trong ví dụ này, Công cụ cho nhà phát triển sẽ tạm dừng tại điểm ngắt dòng mã trên dòng 32.
Kiểm tra các giá trị của biến
Các giá trị của addend1
, addend2
và sum
có vẻ đáng ngờ. Chúng được đặt trong dấu ngoặc kép,
có nghĩa là chúng là chuỗi. Đây là một giả thuyết phù hợp cho việc giải thích nguyên nhân gây ra lỗi. Bây giờ
đã đến lúc thu thập thêm thông tin. Công cụ cho nhà phát triển cung cấp nhiều công cụ để kiểm tra biến
giá trị.
Phương pháp 1: Kiểm tra phạm vi
Khi bạn tạm dừng một dòng mã, thẻ Phạm vi sẽ cho bạn biết những biến cục bộ và biến toàn cục được xác định tại thời điểm này trong thực thi cùng với giá trị của mỗi biến. Công cụ này cũng cho biết các biến về trạng thái đóng, khi có thể áp dụng. Khi bạn không tạm dừng trên một dòng mã, thẻ Scope (Phạm vi) sẽ trống.
Hãy nhấp đúp vào một giá trị biến để chỉnh sửa giá trị đó.
Phương pháp 2: Biểu thức theo dõi
Thẻ Xem cho phép bạn theo dõi giá trị của các biến theo thời gian. Xem không chỉ giới hạn ở các biến. Bạn có thể lưu trữ mọi JavaScript hợp lệ trong thẻ Watch (Xem).
Hãy thử ngay:
- Nhấp vào thẻ Xem.
- Nhấp vào add Thêm biểu thức theo dõi.
- Nhập
typeof sum
. - Nhấn Enter. Công cụ cho nhà phát triển cho thấy
typeof sum: "string"
. Giá trị ở bên phải dấu hai chấm là kết quả của biểu thức.
Ảnh chụp màn hình này cho thấy thẻ Xem (ở dưới cùng bên phải) sau khi tạo đồng hồ typeof sum
biểu thức.
Như nghi ngờ, sum
sẽ được đánh giá dưới dạng một chuỗi khi lẽ ra phải là một số. Bạn đã xác nhận xong
đây là nguyên nhân gây ra lỗi.
Phương thức 3: Bảng điều khiển
Ngoài việc xem thông báo console.log()
, bạn cũng có thể sử dụng Bảng điều khiển để đánh giá
Câu lệnh JavaScript. Về mặt gỡ lỗi, bạn có thể sử dụng Console để thử nghiệm các bản sửa lỗi tiềm năng
để phát hiện lỗi. Hãy thử ngay:
- Nếu bạn không mở ngăn Console, hãy nhấn phím Escape để mở ngăn đó. Cửa sổ này sẽ mở ở cuối cửa sổ Công cụ cho nhà phát triển.
- Trong Bảng điều khiển, nhập
parseInt(addend1) + parseInt(addend2)
. Câu lệnh này có hiệu quả vì bạn bị tạm dừng trên một dòng mã trong đóaddend1
vàaddend2
thuộc phạm vi. - Nhấn Enter. Công cụ cho nhà phát triển đánh giá câu lệnh và xuất ra
6
. Đây là kết quả mà bạn mong đợi bản minh hoạ để sản xuất.
Ảnh chụp màn hình này hiển thị ngăn Bảng điều khiển sau khi đánh giá parseInt(addend1) + parseInt(addend2)
.
Áp dụng cách khắc phục
Bạn đã tìm thấy bản sửa lỗi cho lỗi này. Bạn chỉ cần thử khắc phục vấn đề bằng cách chỉnh sửa mã và chạy lại bản minh hoạ. Bạn không cần phải rời khỏi Công cụ cho nhà phát triển để áp dụng bản sửa lỗi. Bạn có thể chỉnh sửa mã JavaScript ngay trong giao diện người dùng Công cụ cho nhà phát triển. Hãy thử ngay:
- Nhấp vào Tiếp tục Tiếp tục thực thi tập lệnh.
- Trong Trình soạn thảo mã, hãy thay thế dòng 31,
var sum = addend1 + addend2
bằngvar sum = parseInt(addend1) + parseInt(addend2)
. - Nhấn Command + S (máy Mac) hoặc Control + S (Windows, Linux) để lưu thay đổi của bạn.
- Nhấp vào label_off Huỷ kích hoạt điểm ngắt. Màu của nút chuyển sang màu xanh dương để cho biết rằng nút này đang hoạt động. Khi đặt tuỳ chọn này, Công cụ cho nhà phát triển sẽ bỏ qua mọi điểm ngắt mà bạn đã đặt.
- Hãy thử bản minh hoạ với các giá trị khác nhau. Bản minh hoạ hiện tính toán chính xác.
Các bước tiếp theo
Hướng dẫn này chỉ cho bạn biết hai cách đặt điểm ngắt. Công cụ cho nhà phát triển cung cấp nhiều cách khác bao gồm:
- Điểm ngắt có điều kiện chỉ được kích hoạt khi điều kiện bạn cung cấp là true.
- Điểm ngắt trong các trường hợp ngoại lệ phát hiện được hoặc chưa nắm bắt được.
- Điểm ngắt XHR được kích hoạt khi URL được yêu cầu khớp với chuỗi con mà bạn cung cấp.
Hãy xem bài viết Tạm dừng mã có điểm ngắt để tìm hiểu thời điểm và cách sử dụng từng loại.
Có một số biện pháp kiểm soát bước mã không được giải thích trong hướng dẫn này. Xem phần Bước qua dòng mã để tìm hiểu thêm.