| Thực hiện theo các bước đơn giản bên dưới để biên dịch và thực thi bất kỳ chương trình JavaScript trực tuyến nào bằng trình duyệt yêu thích của bạn mà không cần có bất kỳ thiết lập nào trên máy cục bộ của bạn Bước 1 Nhập nguồn của bạn bằng trình soạn thảo văn bản có sẵn Bước 2 Nhấp vào Chạy để nhận Đầu ra Ghi chú. Trước khi Biên dịch, bạn phải biết về JavaScript Mã này có thể chỉnh sửa. Nhấp vào Chạy để thực thi
<html>
<body>
<h1>My Web Page</h1>
<script>
document.write("My JavaScript");
</script>
</body>
</html>Bạn có thể thích- Trình biên dịch Java trực tuyến. Biên dịch, chạy và thực thi chương trình Java
- Trình biên dịch Python trực tuyến (Trình chỉnh sửa/Thông dịch viên/IDE) để chạy mã
- Trình chạy HTML. Biên dịch, chạy và thực thi mã HTML trực tuyến
Hướng dẫn này dạy cho bạn quy trình làm việc cơ bản để gỡ lỗi bất kỳ sự cố JavaScript nào trong DevTools. Đọc tiếp hoặc xem phiên bản video của hướng dẫn này bên dưới # Bước 1. Tái tạo lỗiTìm một loạt các hành động 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 Nhấp vào Mở bản trình diễn. Bản trình diễn mở trong một tab mới Mở bản trình diễn Nhập function onClick() {
1 vào hộp văn bản Số 1Nhập function onClick() {
2 vào hộp văn bản Số 2Nhấp vào Thêm số 1 và số 2. Nhãn bên dưới nút cho biết function onClick() {
3. Kết quả phải là function onClick() {
4. Đây là lỗi bạn sẽ sửa
Trong ví dụ này, kết quả của 5 + 1 là 51. Nó phải là 6 # Bước 2. Làm quen với giao diện người dùng bảng NguồnDevTools cung cấp rất nhiều công cụ khác nhau cho các tác vụ khác nhau, chẳng hạn như thay đổi CSS, định hình hiệu suất tải trang và giám sát các yêu cầu mạng. Bảng Nguồn là nơi bạn gỡ lỗi JavaScript Mở DevTools bằng cách nhấn Command+Option+I (Mac) hoặc Control+Shift+I (Windows, Linux). Phím tắt này mở bảng Console Nhấp vào tab Nguồn
Giao diện người dùng bảng Nguồn có 3 phần - Ngăn Điều hướng tệp. Mọi tệp mà trang yêu cầu được liệt kê ở đây
- Khung Code Editor. Sau khi chọn một tệp trong ngăn Điều hướng tệp, nội dung của tệp đó được hiển thị ở đây
- Ngăn gỡ lỗi JavaScript. Các công cụ khác nhau để kiểm tra JavaScript của trang. Nếu cửa sổ DevTools của bạn rộng, khung này sẽ hiển thị ở bên phải của khung Code Editor
# Bước 3. Tạm dừng mã với một điểm dừngMột phương pháp phổ biến để gỡ lỗi một vấn đề như thế này là chèn nhiều câu lệnh function onClick() {
5 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 pháp function onClick() {
5 có thể hoàn thành công việc, nhưng các điểm ngắt có thể hoàn thành công việc nhanh hơn. Điểm dừng cho phép bạn tạm dừng mã của mình ở giữa quá trình thực thi và kiểm tra tất cả các giá trị tại thời điểm đó. Điểm dừng có một vài lợi thế so với phương pháp function onClick() {
5- Với
function onClick() {
5, bạn cần mở mã nguồn theo cách thủ công, tìm mã liên quan, chèn câu lệnh function onClick() {
5 rồi tải lại trang để xem thông báo trong Bảng điều khiển. Với các điểm dừng, bạn có thể tạm dừng mã có liên quan mà không cần biết mã được cấu trúc như thế nào - Trong câu lệnh
function onClick() {
5 của bạn, bạn cần chỉ định rõ ràng từng giá trị mà bạn muốn kiểm tra. Với các điểm dừng, DevTools hiển thị cho bạn giá trị của tất cả các biến tại thời điểm đó. Đôi khi có những biến số ảnh hưởng đến mã của bạn mà bạn thậm chí không biết
Tóm lại, các điểm ngắt có thể giúp bạn tìm và sửa lỗi nhanh hơn phương pháp function onClick() {
5Nếu bạn lùi lại một bước và suy nghĩ về cách ứng dụng hoạt động, bạn có thể đoán rằng tổng sai ( function onClick() {
3) được tính trong trình xử lý sự kiện function onClick() {
6 được 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 function onClick() {
6 thực thi. Event Listener Breakpoints cho phép bạn làm chính xác điều đóTrong ngăn Gỡ lỗi JavaScript, nhấp vào Điểm ngắt của trình xử lý sự kiện để mở rộng phần. DevTools hiển thị danh sách các danh mục sự kiện có thể mở rộng, chẳng hạn như Hoạt ảnh và Bảng tạm Bên cạnh danh mục sự kiện Chuột, hãy nhấp vào Mở rộng . DevTools hiển thị danh sách các sự kiện chuột, chẳng hạn như nhấp chuột và di chuột xuống. Mỗi sự kiện có một hộp kiểm bên cạnh nó. Kiểm tra hộp kiểm nhấp chuột. DevTools hiện được thiết lập để tự động tạm dừng khi bất kỳ trình xử lý sự kiện function onClick() {
6 nào thực thiQuay lại bản demo, nhấp lại vào Thêm Số 1 và Số 2. DevTools tạm dừng bản trình diễn và đánh dấu một dòng mã trong bảng Nguồn. DevTools nên được tạm dừng trên dòng mã này function onClick() {
Nếu bạn đang tạm dừng trên một dòng mã khác, hãy nhấn 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. Ghi chú. Nếu bạn tạm dừng trên một dòng khác, bạn có tiện ích mở rộng trình duyệt đăng ký trình xử lý sự kiện function onClick() {
6 trên mỗi trang bạn truy cập. Bạn đã bị tạm dừng trong trình nghe function onClick() {
6 của tiện ích mở rộng. Nếu bạn sử dụng Chế độ ẩn danh để duyệt web ở chế độ riêng tư, chế độ này sẽ tắt tất cả các tiện ích mở rộng, thì bạn có thể thấy rằng mỗi lần bạn tạm dừng trên đúng dòng mã
Event Listener Breakpoint chỉ là một trong nhiều loại breakpoint có sẵn trong DevTools. Thật đáng để ghi nhớ tất cả các loại khác nhau, bởi vì mỗi loại cuối cùng sẽ giúp bạn gỡ lỗi các tình huống khác nhau nhanh nhất có thể. Xem Tạm dừng mã của bạn với điểm dừng để tìm hiểu thời điểm và cách sử dụng từng loại # Bước 4. Bước qua mãMột nguyên nhân phổ biến gây ra lỗi là khi tập lệnh thực thi sai thứ tự. Bước qua mã của bạn cho phép bạn xem qua quá trình thực thi mã của mình, từng dòng một và tìm ra chính xác vị trí mã đang thực thi theo thứ tự khác với thứ tự bạn mong đợi. Thử ngay bây giờ Trên bảng Nguồn của DevTools, nhấp vào Bước vào cuộc gọi chức năng tiếp theo để chuyển qua thực thi chức năng if (inputsAreEmpty()) {
1, mỗi lần một dòng. DevTools làm nổi bật dòng mã sau. ________số 8Nhấp Bước qua lệnh gọi chức năng tiếp theo . DevTools thực thi if (inputsAreEmpty()) {
2 mà không cần bước vào đó. Lưu ý cách DevTools bỏ qua một vài dòng mã. Điều này là do if (inputsAreEmpty()) {
2 được đánh giá là sai, vì vậy khối mã của câu lệnh if (inputsAreEmpty()) {
4 không thực thi.
Đó là ý tưởng cơ bản của bước qua mã. Nếu bạn xem mã trong if (inputsAreEmpty()) {
5, bạn có thể thấy rằng lỗi có thể nằm ở đâu đó trong hàm if (inputsAreEmpty()) {
6. Thay vì duyệt từng dòng mã, bạn có thể sử dụng một loại điểm dừng khác để tạm dừng mã gần vị trí có thể xảy ra lỗi hơn# Bước 5. Đặ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 mã cụ thể mà bạn muốn tạm dừng, hãy sử dụng điểm ngắt dòng mã Nhìn vào dòng mã cuối cùng trong if (inputsAreEmpty()) {
6function 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;
}
6Ở bên trái mã, bạn có thể thấy số dòng của dòng mã cụ thể này, là 32. Bấm vào 32. DevTools đặt một biểu tượng màu xanh lam lên trên 32. Điều này có nghĩa là có một điểm dừng dòng mã trên dòng này. DevTools hiện luôn tạm dừng trước khi dòng mã này được thực thi Nhấp vào Tiếp tục thực thi tập lệnh . 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, DevTools in ra các giá trị của if (inputsAreEmpty()) {
8, if (inputsAreEmpty()) {
9 và 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;
}
60 ở bên phải dấu chấm phẩy của mỗi dòng.
 Trong ví dụ này, DevTools tạm dừng trên điểm ngắt dòng mã trên dòng 32 # Bước 6. Kiểm tra giá trị biếnCác giá trị của if (inputsAreEmpty()) {
8, if (inputsAreEmpty()) {
9 và 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;
}
60 có vẻ đáng ngờ. Chúng được bao bọc trong dấu ngoặc kép, có nghĩa là chúng là các chuỗi. Đây là một giả thuyết tốt để giải thích nguyên nhân của lỗi. Bây giờ là lúc để thu thập thêm thông tin. DevTools cung cấp rất nhiều công cụ để kiểm tra các giá trị của biến# Cách 1. Ngăn Phạm viKhi bạn tạm dừng trên một dòng mã, khung Phạm vi sẽ hiển thị cho bạn những biến cục bộ và biến toàn cục nào hiện được xác định, cùng với giá trị của từng biến. Nó cũng hiển thị các biến đóng, khi áp dụng. Bấm đúp vào một giá trị biến để chỉnh sửa nó. Khi bạn không tạm dừng trên một dòng mã, ngăn Phạm vi sẽ trống # Cách 2. Xem biểu thứcTab Biểu thức theo dõi cho phép bạn theo dõi giá trị của các biến theo thời gian. Như tên ngụ ý, Biểu thức xem không chỉ giới hạn ở các biến. Bạn có thể lưu trữ bất kỳ biểu thức JavaScript hợp lệ nào trong Biểu thức xem. Thử ngay bây giờ - Nhấp vào tab Xem
- Nhấp vào Thêm biểu thức .
- Nhập
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;
}
64 - nhấn Enter. DevTools hiển thị
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;
}
65. Giá trị ở bên phải dấu hai chấm là kết quả của Biểu thức xem của bạn
Ảnh chụp màn hình ở trên hiển thị ngăn Biểu thức xem (dưới cùng bên phải) sau khi tạo biểu thức xem 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;
}
64. Nếu cửa sổ DevTools của bạn lớn, thì ngăn Biểu thức xem ở bên phải, phía trên ngăn Điểm ngắt của trình xử lý sự kiệnNhư nghi ngờ, 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;
}
60 đang được đánh giá là một chuỗi, trong khi nó phải là một số. Bây giờ bạn đã xác nhận rằng đây là nguyên nhân gây ra lỗi# Cách 3. Bàn điều khiểnNgoài việc xem các thông báo của function onClick() {
5, bạn cũng có thể sử dụng Bảng điều khiển để đánh giá các câu lệnh JavaScript tùy ý. Về gỡ lỗi, bạn có thể sử dụng Bảng điều khiển để kiểm tra các bản sửa lỗi tiềm ẩn. Thử ngay bây giờ- Nếu bạn chưa mở ngăn Console, hãy nhấn Escape để mở. Nó mở ở cuối cửa sổ DevTools của bạn
- Trong Bảng điều khiển, nhập
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;
}
69. Câu lệnh này hoạt động vì bạn đang tạm dừng trên một dòng mã trong đó if (inputsAreEmpty()) {
8 và if (inputsAreEmpty()) {
9 nằm trong phạm vi - nhấn Enter. DevTools đánh giá câu lệnh và in ra
function onClick() {
4, đây là kết quả mà bạn mong đợi bản trình diễn tạo ra
Ảnh chụp màn hình ở trên hiển thị ngăn Bảng điều khiển sau khi đánh giá 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;
}
69# Bước 7. Áp dụng một sửa chữaBạn đã tìm thấy bản sửa lỗi. Tất cả những gì còn lại là thử sửa lỗi của bạn bằng cách chỉnh sửa mã và chạy lại bản demo. Bạn không cần rời khỏi DevTools để áp dụng bản sửa lỗi. Bạn có thể chỉnh sửa mã JavaScript trực tiếp trong DevTools UI. Thử ngay bây giờ - Nhấp vào Tiếp tục thực thi tập lệnh .
- Trong Trình chỉnh sửa mã, thay thế dòng 31,
function onClick() {
14, bằng function onClick() {
15 - Nhấn Command + S (Mac) hoặc Control + S (Windows, Linux) để lưu thay đổi của bạn
- Nhấp vào Vô hiệu hóa điểm ngắt . Màu của nó thay đổi thành màu xanh để cho biết nó đang hoạt động. Trong khi điều này được thiết lập, DevTools sẽ bỏ qua bất kỳ điểm dừng nào bạn đã thiết lập.
- Hãy thử bản demo với các giá trị khác nhau. Bản demo hiện tính toán chính xác
thận trọng Quy trình công việc này chỉ áp dụng bản sửa lỗi cho mã đang chạy trong trình duyệt của bạn. Nó sẽ không sửa mã cho tất cả người dùng truy cập trang của bạn. Để làm điều đó, bạn cần sửa mã trên máy chủ của mình. Tuy nhiên, bạn có thể chỉnh sửa tệp trong DevTools và lưu chúng vào nguồn của mình bằng Workspaces Gotchas Bắt đầu từ phiên bản Chrome 105, bạn có thể Chỉnh sửa chức năng bị tạm dừng trực tiếp # Bước tiếp theoXin chúc mừng. Bây giờ bạn đã biết cách tận dụng tối đa DevTools của Chrome khi gỡ lỗi JavaScript. Các công cụ và phương pháp bạn học được trong hướng dẫn này có thể giúp bạn tiết kiệm vô số thời gian Hướng dẫn này chỉ cho bạn thấy hai cách để đặt điểm dừng. DevTools cung cấp nhiều cách khác, bao gồm - Điểm dừng có điều kiện chỉ được kích hoạt khi điều kiện mà bạn cung cấp là đúng
- Điểm dừng trên các ngoại lệ bị bắt hoặc chưa được bắt
- Điểm dừng 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
Xem Tạm dừng mã của bạn với điểm dừng để tìm hiểu thời điểm và cách sử dụng từng loại Có một vài điều khiển bước mã không được giải thích trong hướng dẫn này. Xem Bước qua dòng mã để tìm hiểu thêm
Các chương trình JavaScript được thực thi như thế nào?
Bối cảnh thực thi chứa mã hiện đang chạy và mọi thứ hỗ trợ thực thi mã đó. Trong thời gian chạy Ngữ cảnh thực thi, mã cụ thể được trình phân tích cú pháp phân tích cú pháp, các biến và hàm được lưu trữ trong bộ nhớ, mã byte thực thi được tạo và mã được thực thi
Thực thi trong JavaScript là gì?
Bối cảnh thực thi trong JavaScript có ba loại như. Bối cảnh thực thi toàn cầu (GEC). Đây là bối cảnh thực thi mặc định trong đó mã JS bắt đầu thực thi khi tệp tải lần đầu trong trình duyệt
Làm cách nào tôi có thể học JavaScript từng bước?
5 cách tốt nhất để học JavaScript nhanh . Các trang web và khóa học tự hướng dẫn. Trên hết, Internet là một kho kiến thức. . Sách. Khi nghi ngờ, hãy đọc một cuốn sách. . Trại khởi động mã hóa. Có thể con đường tự học không dành cho bạn. . Sự kiện gặp gỡ và kết nối mạng. . Bắt đầu các dự án của riêng bạn Tôi có thể học JavaScript trong 5 ngày không?
Đây là một hướng dẫn trực tuyến miễn phí, rất phù hợp cho các lập trình viên mới làm quen. Nó cung cấp một hướng dẫn trong hai loại, JavaScript cơ bản và JavaScript nâng cao. Bạn có thể tìm hiểu tất cả kiến thức cơ bản về JavaScript trong khoảng 5 ngày theo hướng dẫn này . Guru99 đã cung cấp các khóa học trực tuyến miễn phí trong vài năm qua. | 
