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;  // <-- the debugger stops here

  say(phrase);
}

Lệnh này chỉ hoạt động khi các công cụ phát triển được mở, nếu không thì trình duyệt sẽ bỏ qua nó

Trong ví dụ của chúng tôi,

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

3 được gọi trong quá trình tải trang, vì vậy cách dễ nhất để kích hoạt trình gỡ lỗi (sau khi chúng tôi đặt điểm dừng) là tải lại trang. Vì vậy, hãy nhấn F5 (Windows, Linux) hoặc Cmd + R (Mac).

Khi điểm ngắt được đặt, quá trình thực thi tạm dừng ở dòng thứ 4

Vui lòng mở menu thả xuống thông tin ở bên phải (được đánh dấu bằng mũi tên). Chúng cho phép bạn kiểm tra trạng thái mã hiện tại

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

   4 – hiển thị các giá trị hiện tại cho bất kỳ biểu thức nào

   Bạn có thể nhấp vào dấu cộng

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

   5 và nhập một biểu thức. Trình sửa lỗi sẽ hiển thị giá trị của nó, tự động tính toán lại nó trong quá trình thực hiện

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

   6 – hiển thị chuỗi cuộc gọi lồng nhau

   Tại thời điểm hiện tại, trình gỡ lỗi đang ở trong cuộc gọi

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

   3, được gọi bởi một tập lệnh trong

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

   8 (không có chức năng nào ở đó, vì vậy nó được gọi là "ẩn danh")

   Nếu bạn bấm vào một mục ngăn xếp (e. g. “anonymous”), trình gỡ lỗi nhảy tới mã tương ứng và tất cả các biến của nó cũng có thể được kiểm tra

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

   9 – biến hiện tại

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

   20 hiển thị các biến hàm cục bộ. Bạn cũng có thể thấy các giá trị của chúng được đánh dấu ngay trên nguồn

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

   21 có các biến toàn cục (ngoài bất kỳ chức năng nào)

   Ngoài ra còn có

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

   22 từ khóa mà chúng tôi chưa nghiên cứu, nhưng chúng tôi sẽ làm điều đó sớm thôi

Bây giờ là lúc để theo dõi kịch bản

Có các nút cho nó ở trên cùng của bảng điều khiển bên phải. Hãy thu hút họ

- "Bản tóm tắt". tiếp tục thực hiện, phím nóng F8

Tiếp tục thực hiện. Nếu không có điểm dừng bổ sung, thì quá trình thực thi sẽ tiếp tục và trình gỡ lỗi sẽ mất quyền kiểm soát

Đây là những gì chúng ta có thể thấy sau khi nhấp vào nó

Quá trình thực thi đã tiếp tục, đạt đến một điểm dừng khác bên trong

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

23 và tạm dừng ở đó. Hãy xem “Call Stack” ở bên phải. Nó đã tăng thêm một cuộc gọi. Bây giờ chúng ta đang ở trong

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

23

- "Bước chân". chạy lệnh tiếp theo, phím nóng F9

Chạy câu lệnh tiếp theo. Nếu chúng tôi nhấp vào nó ngay bây giờ,

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

25 sẽ được hiển thị

Nhấp đi bấm lại vào đây sẽ lần lượt duyệt qua tất cả các câu lệnh trong tập lệnh

- "Bước qua". chạy lệnh tiếp theo, nhưng không vào chức năng, phím nóng F10

Tương tự như lệnh “Bước” trước đó, nhưng hoạt động khác nếu câu lệnh tiếp theo là một lệnh gọi hàm (không phải hàm tích hợp sẵn, như

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

25, mà là một hàm của riêng chúng tôi)

Nếu chúng ta so sánh chúng, lệnh “Step” sẽ đi vào lệnh gọi hàm lồng nhau và tạm dừng việc thực thi ở dòng đầu tiên, trong khi “Step over” thực thi lệnh gọi hàm lồng nhau mà chúng ta không nhìn thấy được, bỏ qua nội dung hàm

Việc thực thi sau đó bị tạm dừng ngay sau lệnh gọi hàm đó

Điều đó thật tốt nếu chúng ta không muốn xem điều gì xảy ra bên trong lệnh gọi hàm

– “Bước vào”, phím nóng F11

Điều đó tương tự như "Bước", nhưng hoạt động khác trong trường hợp gọi hàm không đồng bộ. Nếu bạn chỉ mới bắt đầu học JavaScript, thì bạn có thể bỏ qua sự khác biệt, vì chúng tôi chưa có lệnh gọi không đồng bộ

Trong tương lai, chỉ cần lưu ý rằng lệnh “Bước” bỏ qua các hành động không đồng bộ, chẳng hạn như

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

27 (gọi hàm theo lịch trình), thực thi sau. “Bước vào” đi vào mã của họ, đợi họ nếu cần. Xem để biết thêm chi tiết

– “Bước ra ngoài”. tiếp tục thực hiện cho đến khi kết thúc chức năng hiện tại, phím nóng Shift +F11

Tiếp tục thực hiện và dừng nó ở dòng cuối cùng của chức năng hiện tại. Điều đó rất hữu ích khi chúng tôi vô tình nhập một cuộc gọi lồng nhau bằng cách sử dụng , nhưng chúng tôi không quan tâm và chúng tôi muốn tiếp tục kết thúc cuộc gọi đó càng sớm càng tốt

- bật / tắt tất cả các điểm dừng

Nút đó không di chuyển việc thực hiện. Chỉ cần bật/tắt hàng loạt cho các điểm dừng

- bật / tắt tạm dừng tự động trong trường hợp có lỗi

Khi được bật, nếu các công cụ dành cho nhà phát triển đang mở, một lỗi trong quá trình thực thi tập lệnh sẽ tự động tạm dừng nó. Sau đó, chúng tôi có thể phân tích các biến trong trình gỡ lỗi để xem điều gì đã xảy ra. Vì vậy, nếu tập lệnh của chúng ta chết do lỗi, chúng ta có thể mở trình gỡ lỗi, bật tùy chọn này và tải lại trang để xem tập lệnh chết ở đâu và bối cảnh tại thời điểm đó là gì

Tiếp tục đến đây

Nhấp chuột phải vào một dòng mã sẽ mở menu ngữ cảnh với một tùy chọn tuyệt vời có tên là “Tiếp tục đến đây”

Điều đó rất hữu ích khi chúng tôi muốn di chuyển nhiều bước về phía trước dòng, nhưng chúng tôi quá lười để đặt điểm ngắt

Để xuất thứ gì đó ra bảng điều khiển từ mã của chúng tôi, có chức năng

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

28

Chẳng hạn, điều này xuất các giá trị từ

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

29 đến

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

9 sang bảng điều khiển

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

Người dùng thông thường không thấy đầu ra đó, nó nằm trong bảng điều khiển. Để xem nó, hãy mở bảng điều khiển của các công cụ dành cho nhà phát triển hoặc nhấn Esc khi đang ở bảng điều khiển khác. mở giao diện điều khiển ở phía dưới

Nếu chúng tôi có đủ thông tin đăng nhập vào mã của mình, thì chúng tôi có thể xem điều gì đang diễn ra từ các bản ghi mà không cần trình gỡ lỗi

Như chúng ta có thể thấy, có ba cách chính để tạm dừng tập lệnh

1. một điểm dừng
2. Các câu lệnh

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

   2
3. Lỗi (nếu công cụ dành cho nhà phát triển đang mở và nút đang “bật”)

Khi tạm dừng, chúng tôi có thể gỡ lỗi. kiểm tra các biến và theo dõi mã để xem nơi thực thi sai

Có nhiều tùy chọn hơn trong các công cụ dành cho nhà phát triển ngoài những gì được đề cập ở đây. Hướng dẫn đầy đủ có tại https. // nhà phát triển. Google. com/web/công cụ/chrome-devtools

Thông tin từ chương này là đủ để bắt đầu gỡ lỗi, nhưng sau này, đặc biệt nếu bạn làm nhiều thứ trên trình duyệt, vui lòng vào đó và xem qua các khả năng nâng cao hơn của các công cụ dành cho nhà phát triển

Ồ, và bạn cũng có thể nhấp vào các vị trí khác nhau của công cụ dành cho nhà phát triển và chỉ cần xem những gì đang hiển thị. Đó có lẽ là con đường nhanh nhất để tìm hiểu các công cụ dành cho nhà phát triển. Đừng quên nhấp chuột phải và menu ngữ cảnh