Làm cách nào để tôi thấy bảng điều khiển javascript trong chrome?

Gỡ lỗi là quá trình tìm và sửa lỗi trong tập lệnh. Tất cả các trình duyệt hiện đại và hầu hết các môi trường khác đều hỗ trợ các công cụ gỡ lỗi – một giao diện người dùng đặc biệt trong các công cụ dành cho nhà phát triển giúp việc gỡ lỗi dễ dàng hơn nhiều. Nó cũng cho phép theo dõi mã từng bước để xem chính xác những gì đang diễn ra

Chúng tôi sẽ sử dụng Chrome ở đây, vì nó có đủ tính năng, hầu hết các trình duyệt khác đều có quy trình tương tự

Phiên bản Chrome của bạn có thể trông hơi khác một chút nhưng vẫn phải rõ ràng có gì ở đó

• Mở trang ví dụ trong Chrome
• Bật công cụ dành cho nhà phát triển bằng F12 [Mac. Cmd + Chọn + I].
• Chọn bảng điều khiển

  // open console to see
  for [let i = 0; i < 5; i++] {
    console.log["value,", i];
  }

  2

Đây là những gì bạn nên xem nếu bạn đang làm điều đó lần đầu tiên

Nút chuyển đổi mở tab có tệp

Hãy nhấp vào nó và chọn

// open console to see
for [let i = 0; i < 5; i++] {
  console.log["value,", i];
}

3 trong chế độ xem dạng cây. Đây là những gì sẽ hiển thị

Bảng Nguồn có 3 phần

1. Ngăn Trình điều hướng tệp liệt kê HTML, JavaScript, CSS và các tệp khác, bao gồm cả hình ảnh được đính kèm vào trang. Tiện ích mở rộng của Chrome cũng có thể xuất hiện ở đây
2. Khung Code Editor hiển thị mã nguồn
3. Khung Gỡ lỗi JavaScript dùng để gỡ lỗi, chúng ta sẽ sớm khám phá nó

Bây giờ, bạn có thể nhấp lại vào cùng một trình chuyển đổi để ẩn danh sách tài nguyên và cung cấp cho mã một khoảng trống

Nếu chúng ta nhấn Esc, thì bảng điều khiển sẽ mở ra bên dưới. Chúng ta có thể gõ lệnh vào đó và nhấn Enter để thực hiện

Sau khi một câu lệnh được thực thi, kết quả của nó được hiển thị bên dưới

Ví dụ, ở đây

// open console to see
for [let i = 0; i < 5; i++] {
  console.log["value,", i];
}

4 cho kết quả là

// open console to see
for [let i = 0; i < 5; i++] {
  console.log["value,", i];
}

5, trong khi lệnh gọi hàm

// open console to see
for [let i = 0; i < 5; i++] {
  console.log["value,", i];
}

6 không trả về kết quả nào, vì vậy kết quả là

// open console to see
for [let i = 0; i < 5; i++] {
  console.log["value,", i];
}

7

Hãy kiểm tra những gì đang xảy ra trong mã của trang ví dụ. Trong

// open console to see
for [let i = 0; i < 5; i++] {
  console.log["value,", i];
}

3, nhấp vào dòng số

// open console to see
for [let i = 0; i < 5; i++] {
  console.log["value,", i];
}

9. Có, ngay trên chữ số

// open console to see
for [let i = 0; i < 5; i++] {
  console.log["value,", i];
}

9, không phải trên mã

Xin chúc mừng. Bạn đã đặt một điểm dừng. Vui lòng nhấp vào số cho dòng

// open console to see
for [let i = 0; i < 5; i++] {
  console.log["value,", i];
}

1

Nó sẽ trông như thế này [màu xanh là nơi bạn nên nhấp vào]

Điểm dừng là một điểm mã nơi trình gỡ lỗi sẽ tự động tạm dừng thực thi JavaScript

Trong khi mã bị tạm dừng, chúng ta có thể kiểm tra các biến hiện tại, thực thi các lệnh trong bảng điều khiển, v.v. Nói cách khác, chúng ta có thể gỡ lỗi nó

Chúng tôi luôn có thể tìm thấy danh sách các điểm ngắt trong bảng bên phải. Điều đó hữu ích khi chúng ta có nhiều điểm ngắt trong các tệp khác nhau. Nó cho phép chúng tôi

• Nhanh chóng chuyển đến điểm ngắt trong mã [bằng cách nhấp vào điểm đó trong bảng bên phải]
• Tạm thời vô hiệu hóa điểm ngắt bằng cách bỏ chọn nó
• Xóa điểm dừng bằng cách nhấp chuột phải và chọn Xóa
• …Và như thế

Điểm dừng có điều kiện

Nhấp chuột phải vào số dòng cho phép tạo điểm dừng có điều kiện. Nó chỉ kích hoạt khi biểu thức đã cho, mà bạn nên cung cấp khi tạo nó, là trung thực

Điều đó rất hữu ích khi chúng ta chỉ cần dừng đối với một giá trị biến nhất định hoặc đối với các tham số chức năng nhất định

Chúng ta cũng có thể tạm dừng mã bằng cách sử dụng lệnh

// open console to see
for [let i = 0; i < 5; i++] {
  console.log["value,", i];
}

2 trong đó, như thế này

function hello[name] {
  let phrase = `Hello, ${name}!`;

  debugger;  //