IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript Debugging - Gỡ lỗi trong JavaScript

JavaScript Debugging - Gỡ lỗi trong JavaScript

by GokiSoft.Com - 21:50 18/05/2020 2,141 Lượt Xem


Các lỗi có thể sẽ xảy ra, mỗi khi bạn viết một vài dòng code trên máy tính.



Gỡ lỗi code(Code Debugging)


Code lập trình có thể chứa các lỗi cú pháp, hoặc các lỗi logic.

Nhiều trong số những lỗi này rất khó để chuẩn đoán.

Thường thì, khi code lập trình chứa các lỗi, không có gì sẽ xảy ra. Không có các thông báo lỗi, và bạn sẽ không có được chỉ dẫn đến nơi có thể tìm các lỗi.

Tìm đến (và sửa chữa) các lỗi trong code lập trình được gọi là gỡ lỗi(debugging).



Các trình gỡ lỗi JavaScript(JavaScript Debuggers)


Gỡ lỗi không dễ. Nhưng may mắn thay, tất cả các trình duyệt hiện đại có các trình gỡ lỗi xây dựng trong JavaScript.

Các trình gỡ lỗi xây dựng bên trong có thể bật và tắt, ép các lỗi phải được báo cho người dùng.

Với một trình gỡ lỗi, bạn cũng có thể đặt điểm dừng (những nơi thực thi code có thể bị dừng), và kiểm trả các biến trong khi code đang được thực thi.

Thông thường, nếu không làm theo các bước ở cuối của trang này, bạn kích hoạt gỡ lỗi trong trình duyệt với nút F12, và chọn "Console" trong menu debugger.



Phương thức console.log()


Nếu trình duyệt của bạn hỗ trợ gỡ lỗi, bạn có thể sử dụng console.log() để hiển thị các giá trị JavaScript trong cửa sổ gỡ lỗi:

ví dụ

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html> 


Tip: Đọc nhiều hơn về phương thức console.log() trong chương JavaScript Console Reference.



Đặt các điểm dừng(Setting Breakpoints)


Trong cửa sổ gỡ lỗi, bạn có thể đặt các điểm dừng trong JavaScript code.

Tại mỗi điểm dừng, JavaScript sẽ dừng việc thực thi, và để bạn kiểm tra các giá trị JavaScript.

Sau khi kiểm tra các giá trị, bạn có thể bắt đầu thực thi tiếp code (thông thường là với nút play).



Từ khóa debugger


Từ khóa debugger debugger dừng sự thực thi của JavaScript, và gọi (nếu có hiệu lực) hàm gỡ lỗi.

Điều này có tác dụng giống như cài đặt một điểm dừng trong trình gỡ lỗi.

Nếu không có gỡ lỗi nào có sẵn, câu lệnh của trình gỡ lỗi không có hiệu lực.

Với trình gỡ lỗi được bật, code sau đa sẽ dừng thực thi trước khi nó thực thi dòng thức ba.

ví dụ

var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
<!DOCTYPE html>
<html>
<head>
</head>

<body>

<p id="demo"></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>



Công cụ gỡ lỗi chính của trình duyệt(Major Browsers' Debugging Tools)


Thông thường, bạn kích hoạt gỡ lỗi trong trình duyệt bằng F12, và chọn "Console" trong menu của trình gỡ lỗi.

Nếu không, hãy làm theo các bước sau:

Chrome

  • Mở trình duyệt.
  • Từ menu , chọn "More tools".
  • Từ tools, chọn "Developer tools".
  • Cuối cùng, chọn Console.

Firefox

  • Mở trình duyệt.
  • Từ menu, chọn "Web Developer".
  • Cuối cùng, chọn "Web Console".

Edge

  • Mở trình duyệt.
  • Từ menu, chọn "Developer Tools".
  • Cuối cùng, chọn "Console".

Opera

  • Mở trình duyệt.
  • Từ menu, chọn "Developer".
  • From "Developer", chọn "Developer tools".
  • Cuối cùng, chọn  "Console".

Safari

  • Mở Safari, Preferences, Advanced trong menu chính.
  • Kiểm tra "Enable Show Develop menu trong thanh menu".
  • Khi lựa chọn mới "Develop", xuất hiện trong menu:
    Chọn "Show Error Console".



Bạn có biết?


Gỡ lỗi là một quá trình của việc kiểm tra, tìm kiếm, và giảm thiểu các bug (lỗi) trong chương trình máy tính.

Bug(bọ) máy tính được biết đến đầu tiên là một con bọ thực sự (một con côn trùng) kẹt trong thiết bị điện tử =))))))).




Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!