Khám phá quy trình gỡ lỗi mới qua tài liệu tham khảo toàn diện về cách gỡ lỗi Công cụ của Chrome cho nhà phát triển các tính năng AI mới.
Hãy xem bài viết Bắt đầu gỡ lỗi JavaScript trong Công cụ của Chrome cho nhà phát triển để tìm hiểu những kiến thức cơ bản về cách gỡ lỗi.
Tạm dừng mã có điểm ngắt
Đặt điểm ngắt để bạn có thể tạm dừng mã ở giữa quá trình thực thi. Để tìm hiểu cách đặt điểm ngắt, hãy xem nội dung Tạm dừng mã có điểm ngắt.
Kiểm tra các giá trị khi tạm dừng
Trong khi quá trình thực thi bị tạm dừng, trình gỡ lỗi sẽ đánh giá tất cả biến, hằng số và đối tượng trong hàm hiện tại cho đến một điểm ngắt. Trình gỡ lỗi hiển thị các giá trị hiện tại cùng dòng bên cạnh nội dung khai báo tương ứng.
Bạn có thể sử dụng Console để truy vấn các biến, hằng số và đối tượng được đánh giá.
Xem trước thuộc tính lớp/hàm khi di chuột
Trong khi quá trình thực thi bị tạm dừng, hãy di chuột qua tên lớp hoặc hàm để xem trước các thuộc tính của lớp hoặc hàm đó.
Mã bước thực hiện
Khi mã của bạn bị tạm dừng, hãy duyệt qua từng biểu thức một, kiểm tra luồng điều khiển và giá trị thuộc tính trong quá trình thực hiện.
Bước qua dòng mã
Khi bị tạm dừng trên một dòng mã có chứa một hàm không liên quan đến vấn đề gỡ lỗi, hãy nhấp vào Bước qua để thực thi hàm mà không can thiệp vào việc đó.
Ví dụ: giả sử bạn đang gỡ lỗi đoạn mã sau:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name); // D
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name; // C
}
Bạn đã bị tạm dừng trên A
. Bằng cách nhấn Bước qua, Công cụ cho nhà phát triển sẽ thực thi tất cả mã trong hàm mà
mà bạn đang bước qua, đó là B
và C
. Sau đó, Công cụ cho nhà phát triển sẽ tạm dừng trên D
.
Bước vào dòng mã
Khi bị tạm dừng trên một dòng mã có chứa lệnh gọi hàm liên quan đến bài toán bạn đang gặp phải gỡ lỗi, hãy nhấp vào Bước vào để kiểm tra hàm đó thực tế hơn.
Ví dụ: giả sử bạn đang gỡ lỗi đoạn mã sau:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name);
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name;
}
Bạn đã bị tạm dừng trên A
. Khi nhấn vào Bước vào, Công cụ cho nhà phát triển sẽ thực thi dòng mã này, sau đó tạm dừng vào
B
.
Bước ra khỏi dòng mã
Khi bị tạm dừng bên trong một hàm không liên quan đến vấn đề mà bạn đang gỡ lỗi, hãy nhấp vào Bước để thực thi phần còn lại của mã của hàm.
Ví dụ: giả sử bạn đang gỡ lỗi đoạn mã sau:
function updateHeader() {
var day = new Date().getDay();
var name = getName();
updateName(name); // C
}
function getName() {
var name = app.first + ' ' + app.last; // A
return name; // B
}
Bạn đã bị tạm dừng trên A
. Bằng cách nhấn Rời khỏi, Công cụ cho nhà phát triển sẽ thực thi phần mã còn lại trong
getName()
, chỉ là B
trong ví dụ này, sau đó tạm dừng vào C
.
Chạy tất cả mã cho đến một dòng nhất định
Khi gỡ lỗi một hàm dài, có thể có nhiều mã không liên quan đến vấn đề mà bạn đang gặp phải gỡ lỗi.
Bạn có thể thực hiện tất cả các bước, nhưng việc này có thể tẻ nhạt. Bạn có thể đặt một dòng mã điểm ngắt trên dòng bạn quan tâm, sau đó nhấn Tiếp tục thực thi tập lệnh , nhưng có một cách nhanh hơn.
Nhấp chuột phải vào dòng mã mà bạn quan tâm, rồi chọn Tiếp tục đến đây. DevTools chạy tất cả mã cho đến thời điểm đó rồi tạm dừng trên dòng đó.
Tiếp tục thực thi tập lệnh
Để tiếp tục thực thi tập lệnh sau khi tạm dừng, hãy nhấp vào Tiếp tục thực thi tập lệnh . DevTools thực thi tập lệnh cho đến điểm ngắt tiếp theo, nếu có.
Buộc thực thi tập lệnh
Để bỏ qua tất cả các điểm ngắt và buộc tập lệnh của bạn tiếp tục thực thi, hãy nhấp và giữ Resume Script Thực thi rồi chọn Buộc thực thi tập lệnh .
Thay đổi ngữ cảnh của chuỗi
Khi làm việc với nhân viên web hoặc trình chạy dịch vụ, hãy nhấp vào một ngữ cảnh được liệt kê trong ngăn Threads (Luồng) để hãy chuyển sang ngữ cảnh đó. Biểu tượng mũi tên màu xanh dương thể hiện bối cảnh hiện đang được chọn.
Ngăn Threads (Luồng) trong ảnh chụp màn hình ở trên có đường viền màu xanh dương.
Ví dụ: giả sử bạn bị tạm dừng ở một điểm ngắt trong cả tập lệnh chính và dịch vụ của bạn tập lệnh trình chạy. Bạn muốn xem các thuộc tính cục bộ và toàn cầu cho ngữ cảnh của trình chạy dịch vụ, nhưng bảng điều khiển Nguồn đang hiển thị ngữ cảnh tập lệnh chính. Bằng cách nhấp vào mục nhập của trình chạy dịch vụ trong Ngăn Threads (Chuỗi), bạn có thể chuyển sang ngữ cảnh đó.
Di chuyển qua các biểu thức được phân tách bằng dấu phẩy
Thao tác di chuyển qua các biểu thức được phân tách bằng dấu phẩy cho phép bạn gỡ lỗi mã rút gọn. Ví dụ: hãy xem xét đoạn mã sau:
function foo() {}
function bar() {
foo();
foo();
return 42;
}
bar();
Khi rút gọn, tệp này chứa biểu thức foo(),foo(),42
được phân tách bằng dấu phẩy:
function foo(){}function bar(){return foo(),foo(),42}bar();
Debugger (Trình gỡ lỗi) cũng thực hiện các bước như vậy thông qua các biểu thức như vậy.
Do đó, hành vi bước là giống hệt nhau:
- Giữa mã rút gọn và mã đã tạo.
- Khi sử dụng bản đồ nguồn để gỡ lỗi mã rút gọn theo mã gốc. Nói cách khác, khi thấy dấu chấm phẩy, bạn luôn có thể duyệt qua các dấu chấm phẩy đó ngay cả khi nguồn thực tế mà bạn đang gỡ lỗi được giảm bớt.
Xem và chỉnh sửa các thuộc tính địa phương, đóng cửa và toàn cầu
Trong khi đang tạm dừng trên một dòng mã, hãy sử dụng ngăn Phạm vi để xem và chỉnh sửa giá trị của các thuộc tính và trong phạm vi cục bộ, phạm vi đóng và phạm vi toàn cục.
- Hãy nhấp đúp vào một giá trị của một tài sản để thay đổi giá trị đó.
- Các thuộc tính không liệt kê được có màu xám.
Ngăn Scope (Phạm vi) trong ảnh chụp màn hình ở trên có đường viền màu xanh dương.
Xem ngăn xếp lệnh gọi hiện tại
Trong khi bị tạm dừng trên một dòng mã, hãy sử dụng ngăn Ngăn xếp cuộc gọi để xem ngăn xếp cuộc gọi đã giúp bạn đến được bước này điểm.
Nhấp vào một mục nhập để chuyển đến dòng mã nơi hàm đó được gọi. Biểu tượng mũi tên màu xanh dương thể hiện chức năng nào trong Công cụ cho nhà phát triển đang làm nổi bật.
Ngăn Ngăn xếp cuộc gọi trong ảnh chụp màn hình ở trên có đường viền màu xanh dương.
Khởi động lại một hàm (khung) trong ngăn xếp lệnh gọi
Để quan sát hành vi của một hàm và chạy lại hàm đó mà không cần phải bắt đầu lại toàn bộ quy trình gỡ lỗi, bạn có thể bắt đầu lại quá trình thực thi một hàm đơn lẻ khi hàm này bị tạm dừng. Nói cách khác, bạn có thể khởi động lại khung của hàm trong ngăn xếp lệnh gọi.
Cách khởi động lại một khung:
- Tạm dừng thực thi hàm tại một điểm ngắt. Ngăn Ngăn xếp lệnh gọi ghi lại thứ tự các lệnh gọi hàm.
Trong ngăn Ngăn xếp cuộc gọi, hãy nhấp chuột phải vào một hàm rồi chọn Khởi động lại khung hình từ trình đơn thả xuống.
Để hiểu cách hoạt động của khung khởi động lại, hãy xem xét đoạn mã sau:
function foo(value) {
console.log(value);
bar(value);
}
function bar(value) {
value++;
console.log(value);
debugger;
}
foo(0);
Hàm foo()
lấy 0
làm đối số, ghi lại đối số đó và gọi hàm bar()
. Sau đó, hàm bar()
sẽ tăng đối số.
Hãy thử khởi động lại khung của cả hai chức năng theo cách sau:
- Sao chép mã ở trên vào một đoạn mã mới và chạy đoạn mã đó. Quá trình thực thi sẽ dừng ở điểm ngắt dòng mã
debugger
. - Lưu ý rằng trình gỡ lỗi cho bạn thấy giá trị hiện tại bên cạnh phần khai báo hàm:
value = 1
. - Khởi động lại khung
bar()
. - Bước qua câu lệnh tăng giá trị bằng cách nhấn
F9
. Lưu ý rằng giá trị hiện tại sẽ tăng:value = 2
. - (Không bắt buộc) Trong ngăn Scope (Phạm vi), hãy nhấp đúp vào giá trị để chỉnh sửa và đặt giá trị mong muốn.
Hãy thử khởi động lại khung
bar()
và thao tác với câu lệnh tăng thêm vài lần nữa. Giá trị này tiếp tục tăng lên.
Quá trình khởi động lại khung không đặt lại các đối số. Nói cách khác, quá trình khởi động lại sẽ không khôi phục trạng thái ban đầu khi gọi hàm. Thay vào đó, hàm này chỉ di chuyển con trỏ thực thi đến đầu hàm.
Do đó, giá trị đối số hiện tại vẫn tồn tại trong bộ nhớ khi khởi động lại cùng một hàm.
- Bây giờ, hãy khởi động lại khung
foo()
trong Ngăn xếp lệnh gọi. Lưu ý rằng giá trị lại là0
.
Trong JavaScript, các thay đổi đối với đối số không hiển thị (được phản ánh) bên ngoài hàm. Hàm lồng nhau nhận giá trị chứ không phải vị trí của các hàm đó trong bộ nhớ.
1. Tiếp tục thực thi tập lệnh (F8
) để hoàn tất hướng dẫn này.
Hiện các khung có trong danh sách bỏ qua
Theo mặc định, ngăn Ngăn xếp cuộc gọi chỉ cho thấy những khung có liên quan đến mã của bạn và bỏ qua mọi tập lệnh được thêm vào Cài đặt > Danh sách bỏ qua.
Để xem toàn bộ ngăn xếp lệnh gọi, bao gồm cả các khung của bên thứ ba, hãy bật tuỳ chọn Hiển thị các khung có trong danh sách bỏ qua trong phần Ngăn xếp lệnh gọi.
Hãy thử thực hiện trên trang minh hoạ này:
- Trong bảng điều khiển Sources (Nguồn), hãy mở
src
>app
>app.component.ts
. - Đặt điểm ngắt tại hàm
increment()
. - Trong phần Ngăn xếp lệnh gọi, đánh dấu hoặc bỏ đánh dấu hộp Hiển thị các khung có trong danh sách bỏ qua rồi quan sát danh sách có liên quan hoặc đầy đủ các khung trong ngăn xếp lệnh gọi.
Xem khung không đồng bộ
Nếu được khung mà bạn đang sử dụng hỗ trợ, Công cụ cho nhà phát triển có thể theo dõi các hoạt động không đồng bộ bằng cách liên kết cả hai phần của mã không đồng bộ với nhau.
Trong trường hợp này, Ngăn xếp lệnh gọi cho thấy toàn bộ nhật ký cuộc gọi, bao gồm cả các khung lệnh gọi không đồng bộ.
Sao chép dấu vết ngăn xếp
Nhấp chuột phải vào một vị trí bất kỳ trong ngăn Call Stack (Ngăn xếp lệnh gọi) rồi chọn Copy stack trace (Sao chép dấu vết ngăn xếp) để sao chép lệnh gọi hiện tại vào bảng nhớ tạm.
Dưới đây là một ví dụ về kết quả:
getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)
Thao tác trong cây tệp
Sử dụng ngăn Trang để điều hướng trong cây tệp.
Nhóm các tệp đã tạo và triển khai trong cây tệp
Khi phát triển ứng dụng web bằng các khung (ví dụ: React hoặc Angular), bạn có thể gặp khó khăn trong việc điều hướng các nguồn do các tệp đã rút gọn do các công cụ xây dựng tạo ra (ví dụ: webpack hoặc Vite).
Để giúp bạn điều hướng các nguồn, hãy nhấp vào Nguồn > Ngăn Page (Trang) có thể nhóm các tệp thành 2 danh mục:
- Đã tạo. Tương tự như các tệp nguồn mà bạn xem trong IDE. Công cụ cho nhà phát triển tạo các tệp này dựa trên bản đồ nguồn do công cụ xây dựng của bạn cung cấp.
- Đã triển khai. Các tệp thực mà trình duyệt đọc. Thông thường, các tệp này được giảm kích thước.
Để bật tính năng nhóm, hãy bật > Tuỳ chọn Nhóm tệp theo Đã tạo/Đã triển khai trong trình đơn có biểu tượng ba dấu chấm ở đầu cây tệp.
Ẩn những nguồn có trong danh sách bỏ qua khỏi cây tệp
Để giúp bạn chỉ tập trung vào các mã mà bạn tạo, hãy tham khảo phần Nguồn > Ngăn Page (Trang) sẽ chuyển sang màu xám mọi tập lệnh hoặc thư mục được thêm vào Settings > Danh sách bỏ qua theo mặc định.
Để ẩn hoàn toàn các tập lệnh như vậy, hãy chọn Nguồn > Trang > > Ẩn các nguồn có trong danh sách bỏ qua .
Bỏ qua tập lệnh hoặc mẫu tập lệnh
Bỏ qua một tập lệnh để bỏ qua tập lệnh đó trong khi gỡ lỗi. Khi bị bỏ qua, một tập lệnh sẽ bị che khuất trong ngăn Call Stack (Ngăn xếp lệnh gọi) và bạn không bao giờ truy cập được vào các hàm của tập lệnh khi thực hiện thông qua mã của bạn.
Ví dụ: giả sử bạn đang bước qua mã này:
function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
A
là thư viện bên thứ ba mà bạn tin tưởng. Nếu bạn tự tin rằng vấn đề mình đang gỡ lỗi
không liên quan đến thư viện của bên thứ ba, thì bạn nên bỏ qua tập lệnh.
Bỏ qua một tập lệnh hoặc thư mục trong cây tệp
Cách bỏ qua một tập lệnh riêng lẻ hoặc toàn bộ thư mục:
- Trong mục Nguồn > Trang, hãy nhấp chuột phải vào thư mục hoặc tệp tập lệnh.
- Chọn Thêm thư mục/tập lệnh vào danh sách bỏ qua.
Nếu không ẩn các nguồn có trong danh sách bỏ qua, bạn có thể chọn một nguồn như vậy trong cây tệp rồi nhấp vào Xoá khỏi danh sách bị bỏ qua hoặc Định cấu hình trên biểu ngữ cảnh báo .
Nếu không, bạn có thể xoá các thư mục và tập lệnh bị ẩn và bị bỏ qua khỏi danh sách trong phần Cài đặt > Danh sách bỏ qua.
Bỏ qua tập lệnh trong ngăn Trình chỉnh sửa
Cách bỏ qua tập lệnh trong ngăn Editor (Trình chỉnh sửa):
- Mở tệp.
- Nhấp chuột phải vào vị trí bất kỳ.
- Chọn Thêm tập lệnh vào danh sách bỏ qua.
Bạn có thể xoá một tập lệnh khỏi danh sách tập lệnh bị bỏ qua trong phần Cài đặt > Danh sách bỏ qua.
Bỏ qua tập lệnh trong ngăn Ngăn xếp lệnh gọi
Cách bỏ qua tập lệnh trong ngăn Call Stack (Ngăn xếp lệnh gọi):
- Nhấp chuột phải vào một hàm trong tập lệnh.
- Chọn Thêm tập lệnh vào danh sách bỏ qua.
Bạn có thể xoá một tập lệnh khỏi danh sách tập lệnh bị bỏ qua trong phần Cài đặt > Danh sách bỏ qua.
Bỏ qua tập lệnh trong phần Cài đặt
Xem Cài đặt > Danh sách bỏ qua.
Chạy các đoạn mã gỡ lỗi từ trang bất kỳ
Nếu bạn thấy mình chạy cùng một mã gỡ lỗi trong Console nhiều lần, hãy cân nhắc sử dụng Đoạn mã. Đoạn mã là các tập lệnh có thể thực thi mà bạn viết, lưu trữ và chạy trong Công cụ cho nhà phát triển.
Xem bài viết Chạy đoạn mã từ trang bất kỳ để tìm hiểu thêm.
Xem các giá trị của biểu thức JavaScript tuỳ chỉnh
Sử dụng ngăn Xem để xem các giá trị của biểu thức tuỳ chỉnh. Bạn có thể xem mọi JavaScript hợp lệ biểu thức.
- Nhấp vào Thêm biểu thức để tạo một biểu thức theo dõi mới.
- Nhấp vào biểu tượng Làm mới để làm mới giá trị của tất cả biểu thức hiện tại. Các giá trị sẽ tự động làm mới trong khi xem xét mã.
- Di chuột qua một biểu thức rồi nhấp vào Xoá biểu thức để xoá dữ liệu đó.
Kiểm tra và chỉnh sửa tập lệnh
Khi bạn mở một tập lệnh trong ngăn Trang, Công cụ cho nhà phát triển sẽ hiển thị cho bạn nội dung của tập lệnh trong ngăn Trình chỉnh sửa. Trong ngăn Editor (Trình chỉnh sửa), bạn có thể duyệt xem và chỉnh sửa mã của mình.
Ngoài ra, bạn có thể ghi đè nội dung trên thiết bị hoặc tạo một không gian làm việc rồi lưu những thay đổi mà bạn thực hiện trong Công cụ cho nhà phát triển trực tiếp vào các nguồn cục bộ.
Làm cho tệp được rút gọn có thể đọc được
Theo mặc định, bảng điều khiển Sources (Nguồn) sẽ in đẹp các tệp rút gọn. Khi được in đẹp, Trình chỉnh sửa có thể hiện một dòng mã dài trong nhiều dòng, với -
để cho biết đó là phần tiếp tục dòng.
Để xem tệp đã giảm kích thước khi tải, hãy nhấp vào { }
ở góc dưới cùng bên trái của Trình chỉnh sửa.
Gấp các khối mã
Để thu gọn một khối mã, hãy di chuột qua số dòng trong cột bên trái rồi nhấp vào Thu gọn.
Để mở khối mã, hãy nhấp vào biểu tượng {...}
bên cạnh khối mã đó.
Để định cấu hình hành vi này, hãy xem Cài đặt > Lựa chọn ưu tiên > Nguồn.
Chỉnh sửa tập lệnh
Khi sửa lỗi, thông thường, bạn nên kiểm tra một số thay đổi đối với mã JavaScript. Bạn không cần để thực hiện thay đổi trong trình duyệt bên ngoài, sau đó tải lại trang. Bạn có thể chỉnh sửa tập lệnh trong Công cụ cho nhà phát triển.
Cách chỉnh sửa tập lệnh:
- Mở tệp trong ngăn Editor (Trình chỉnh sửa) của bảng điều khiển Sources (Nguồn).
- Thực hiện thay đổi trong ngăn Editor (Trình chỉnh sửa).
Nhấn Command+S (máy Mac) hoặc Ctrl+S (Windows, Linux) để lưu. Công cụ cho nhà phát triển vá toàn bộ tệp JS vào công cụ JavaScript của Chrome.
Ngăn Trình chỉnh sửa trong ảnh chụp màn hình ở trên có đường viền màu xanh dương.
Chỉnh sửa trực tiếp một hàm bị tạm dừng
Trong khi quá trình thực thi bị tạm dừng, bạn có thể chỉnh sửa hàm hiện tại và áp dụng các thay đổi trực tiếp với các giới hạn sau:
- Bạn chỉ có thể chỉnh sửa hàm cấp cao nhất trong Ngăn xếp lệnh gọi.
- Không được có lệnh gọi đệ quy đến cùng một hàm ở phía dưới ngăn xếp.
Cách chỉnh sửa trực tiếp một hàm:
- Tạm dừng quá trình thực thi bằng một điểm ngắt.
- Chỉnh sửa hàm bị tạm dừng.
- Nhấn Command / Control + S để áp dụng các thay đổi. Trình gỡ lỗi tự động khởi động lại hàm.
- Tiếp tục thực thi.
Xem video dưới đây để tìm hiểu quy trình làm việc này.
Trong ví dụ này, ban đầu các biến addend1
và addend2
có loại string
không chính xác. Vì vậy, thay vì thêm số, các chuỗi được nối với nhau. Để khắc phục lỗi này, chúng tôi sẽ thêm các hàm parseInt()
trong quá trình chỉnh sửa trực tiếp.
Tìm kiếm và thay thế văn bản trong một tập lệnh
Cách tìm kiếm văn bản trong một tập lệnh:
- Mở tệp trong ngăn Editor (Trình chỉnh sửa) của bảng điều khiển Sources (Nguồn).
- Để mở thanh tìm kiếm tích hợp sẵn, hãy nhấn Command+F (máy Mac) hoặc Ctrl+F (Windows, Linux).
- Trong thanh, hãy nhập truy vấn của bạn.
Nếu muốn, bạn có thể:
- Nhấp vào Khớp chữ hoa chữ thường để làm cho truy vấn của bạn phân biệt chữ hoa chữ thường.
- Nhấp vào Sử dụng biểu thức chính quy để tìm kiếm bằng biểu thức RegEx.
- Nhấn Enter. Để chuyển đến kết quả tìm kiếm trước đó hoặc tiếp theo, hãy nhấn nút lên hoặc xuống.
Để thay thế văn bản bạn tìm thấy:
- Trên thanh tìm kiếm, hãy nhấp vào nút Thay thế.
- Nhập văn bản để thay thế, sau đó nhấp vào Thay thế hoặc Thay thế tất cả.
Tắt JavaScript
Hãy xem bài viết Tắt JavaScript bằng Công cụ của Chrome cho nhà phát triển.