Thông báo nhật ký trong Bảng điều khiển

Kayce Basques
Kayce Basques
X GitHub

Hướng dẫn tương tác này cho bạn biết cách ghi nhật ký và lọc thông báo trong Bảng điều khiển Chrome DevTools.

Thông báo trong Bảng điều khiển.

Bạn nên hoàn thành hướng dẫn này theo thứ tự. Tài liệu này giả định rằng bạn hiểu các kiến thức cơ bản về phát triển web, chẳng hạn như cách sử dụng JavaScript để thêm tính tương tác vào một trang.

Thiết lập bản minh hoạ và Công cụ cho nhà phát triển

Hướng dẫn này được thiết kế để bạn có thể mở bản minh hoạ và tự mình thử tất cả quy trình công việc. Khi thực hiện theo cách thủ công, bạn sẽ có nhiều khả năng nhớ được quy trình làm việc sau này.

  1. Mở bản minh hoạ.

  2. Không bắt buộc: Di chuyển bản minh hoạ sang một cửa sổ riêng. Trong ví dụ này, hướng dẫn ở bên trái và bản minh hoạ ở bên phải.

    Hướng dẫn này ở bên trái và bản minh hoạ ở bên phải.

  3. Lấy tiêu điểm vào bản minh hoạ, sau đó nhấn tổ hợp phím Control+Shift+J hoặc Command+Option+J (Mac) để mở Công cụ cho nhà phát triển. Theo mặc định, Công cụ cho nhà phát triển sẽ mở ở bên phải bản minh hoạ.

    Công cụ cho nhà phát triển sẽ mở ra ở bên phải bản minh hoạ.

  4. Không bắt buộc: Ghim Công cụ cho nhà phát triển xuống cuối cửa sổ hoặc gỡ ghim vào một cửa sổ riêng.

    Công cụ cho nhà phát triển được gắn vào cuối bản minh hoạ: Công cụ cho nhà phát triển được gắn vào cuối bản minh hoạ.

    Công cụ cho nhà phát triển được gỡ vào một cửa sổ riêng biệt: Công cụ cho nhà phát triển được tách ra trong một cửa sổ riêng.

Xem thông báo được ghi lại từ JavaScript

Hầu hết thông báo mà bạn thấy trong Bảng điều khiển đều đến từ các nhà phát triển web đã viết JavaScript của trang. Mục tiêu của phần này là giới thiệu cho bạn các loại thông báo mà bạn có thể thấy trong Bảng điều khiển, đồng thời giải thích cách bạn có thể tự ghi nhật ký từng loại thông báo từ JavaScript của riêng mình.

  1. Nhấp vào nút Log Info (Thông tin nhật ký) trong bản minh hoạ. Hello, Console! sẽ được ghi vào nhật ký trên Bảng điều khiển.

    Bảng điều khiển sau khi nhấp vào Nhật ký thông tin.

  2. Bên cạnh thông báo Hello, Console! trong Bảng điều khiển, hãy nhấp vào log.js:2. Bảng điều khiển Nguồn sẽ mở ra và làm nổi bật dòng mã khiến thông báo được ghi vào Bảng điều khiển.

    Công cụ cho nhà phát triển sẽ mở bảng điều khiển Nguồn sau khi bạn nhấp vào log.js:2.

    Thông báo này được ghi lại khi JavaScript của trang gọi console.log('Hello, Console!').

  3. Chuyển về Console bằng một trong những quy trình sau:

    • Nhấp vào thẻ Bảng điều khiển.
    • Nhấn tổ hợp phím Control+[ hoặc Command+[ (Mac) cho đến khi Bảng điều khiển được lấy làm trọng tâm.
    • Mở Trình đơn lệnh, bắt đầu nhập Console, chọn lệnh Show Console Panel (Hiện bảng điều khiển), rồi nhấn Enter (Nhập).

  4. Nhấp vào nút Log Warning (Ghi cảnh báo) trong bản minh hoạ. Abandon Hope All Ye Who Enter sẽ được ghi vào Bảng điều khiển.

    Bảng điều khiển sau khi nhấp vào Log Warning (Ghi nhật ký cảnh báo).

    Những thông báo có định dạng như thế này là cảnh báo.

  5. Không bắt buộc: Nhấp vào log.js:12 để xem mã khiến thông báo được định dạng như thế này, sau đó quay lại Console khi bạn hoàn tất. Hãy làm việc này bất cứ khi nào bạn muốn xem mã khiến một thông báo được ghi nhật ký theo một cách nhất định.

  6. Nhấp vào biểu tượng Mở rộng Mở rộng. ở phía trước Abandon Hope All Ye Who Enter. Công cụ cho nhà phát triển cho thấy dấu vết ngăn xếp dẫn đến lệnh gọi.

    Dấu vết ngăn xếp.

    Dấu vết ngăn xếp cho bạn biết rằng một hàm có tên là logWarning đã được gọi, hàm này lần lượt gọi một hàm có tên là quoteDante. Nói cách khác, lệnh gọi xảy ra đầu tiên nằm ở cuối dấu vết ngăn xếp. Bạn có thể ghi lại dấu vết ngăn xếp bất cứ lúc nào bằng cách gọi console.trace().

  7. Nhấp vào Log Error (Ghi nhật ký lỗi). Thông báo lỗi sau đây sẽ được ghi vào nhật ký: I'm sorry, Dave. I'm afraid I can't do that.

    Một thông báo lỗi.

  8. Nhấp vào Log Table (Bảng nhật ký). Một bảng về các nghệ sĩ nổi tiếng sẽ được ghi vào Bảng điều khiển.

    Một bảng trong Bảng điều khiển.

    Lưu ý rằng cột birthday chỉ được điền sẵn cho một hàng. Kiểm tra mã để tìm hiểu lý do.

  9. Nhấp vào Log Group (Nhóm nhật ký). Tên của 4 chú rùa nổi tiếng chuyên chống tội phạm được nhóm lại theo nhãn Adolescent Irradiated Espionage Tortoises.

    Một nhóm thông báo trong Bảng điều khiển.

  10. Nhấp vào Log Custom (Ghi nhật ký tuỳ chỉnh). Một thông báo có đường viền màu đỏ và nền màu xanh dương sẽ được ghi vào Bảng điều khiển.

    Một thông báo có định dạng tuỳ chỉnh trong Bảng điều khiển.

Ý tưởng chính ở đây là khi muốn ghi thông báo vào Bảng điều khiển từ JavaScript, bạn sẽ sử dụng một trong các phương thức console. Mỗi phương thức định dạng thông báo theo cách khác nhau.

Có nhiều phương thức hơn cả những phương thức đã được minh hoạ trong phần này. Khi kết thúc hướng dẫn này, bạn sẽ tìm hiểu cách khám phá các phương thức còn lại.

Xem các thông báo do trình duyệt ghi lại

Trình duyệt cũng ghi nhật ký các thông báo vào Bảng điều khiển. Điều này thường xảy ra khi trang gặp vấn đề.

  1. Nhấp vào Lỗi 404. Trình duyệt ghi lại lỗi mạng 404 vì JavaScript của trang đã cố gắng tìm nạp một tệp không tồn tại.

    Lỗi 404 trong Bảng điều khiển.

  2. Nhấp vào Gây ra lỗi. Trình duyệt ghi lại một TypeError chưa được phát hiện vì JavaScript đang cố gắng cập nhật một nút DOM không tồn tại.

    Lỗi TypeError trong Bảng điều khiển.

  3. Nhấp vào trình đơn thả xuống Log Levels (Cấp nhật ký) rồi bật lựa chọn Verbose (Chi tiết) nếu lựa chọn này đang tắt. Bạn sẽ tìm hiểu thêm về việc lọc trong phần tiếp theo. Bạn cần làm việc này để đảm bảo rằng thông báo tiếp theo mà bạn ghi lại sẽ xuất hiện. Lưu ý: Nếu trình đơn thả xuống Cấp độ mặc định bị tắt, bạn có thể cần đóng Thanh bên của bảng điều khiển. Lọc theo Nguồn thông báo bên dưới để biết thêm thông tin về Thanh bên của Console.

    Bật cấp độ nhật ký Chi tiết.

  4. Nhấp vào Nguyên nhân vi phạm. Trang này sẽ không phản hồi trong vài giây, sau đó trình duyệt sẽ ghi thông báo [Violation] 'click' handler took 3000ms vào Bảng điều khiển. Thời lượng chính xác có thể khác nhau.

    Vi phạm trong Console.

Lọc thông báo

Trên một số trang, bạn sẽ thấy Bảng điều khiển tràn ngập thông báo. Công cụ cho nhà phát triển cung cấp nhiều cách để lọc ra những thông báo không liên quan đến tác vụ hiện tại.

Lọc theo cấp độ nhật ký

Mỗi phương thức console.* được chỉ định một mức độ nghiêm trọng: Verbose, Info, Warning hoặc Error. Ví dụ: console.log() là thông báo cấp Info, trong khi console.error() là thông báo cấp Error.

Cách lọc theo cấp độ nhật ký:

  1. Nhấp vào trình đơn thả xuống Log Levels (Cấp nhật ký) rồi tắt Errors (Lỗi). Một cấp độ sẽ bị vô hiệu hoá khi không còn dấu kiểm bên cạnh cấp độ đó. Các thông báo ở cấp Error sẽ biến mất.

    Tắt thông báo cấp lỗi trong Bảng điều khiển.

  2. Nhấp lại vào trình đơn thả xuống Cấp nhật ký rồi bật lại Lỗi. Thông báo cấp Error sẽ xuất hiện lại.

Lọc theo văn bản

Khi bạn chỉ muốn xem những thông báo có chứa một chuỗi chính xác, hãy nhập chuỗi đó vào hộp Bộ lọc.

  1. Nhập Dave vào hộp Bộ lọc. Tất cả những tin nhắn không chứa chuỗi Dave đều bị ẩn.

    Lọc ra mọi thông báo không có tên "Dave".

  2. Xoá Dave khỏi hộp Bộ lọc. Tất cả thư sẽ xuất hiện lại.

Lọc theo biểu thức chính quy

Khi muốn hiển thị tất cả tin nhắn có chứa một mẫu văn bản thay vì một chuỗi cụ thể, hãy sử dụng biểu thức chính quy.

  1. Nhập /^[AH]/ vào hộp Bộ lọc. Nhập mẫu này vào RegExr để xem nội dung giải thích về chức năng của mẫu.

    Lọc mọi thông báo không khớp với mẫu "/^[AH]/".

  2. Xoá /^[AH]/ khỏi hộp Bộ lọc. Tất cả tin nhắn sẽ xuất hiện trở lại.

Lọc theo nguồn thông báo

Khi bạn chỉ muốn xem những thông báo đến từ một URL nhất định, hãy sử dụng Thanh bên.

  1. Nhấp vào Hiển thị thanh bên bảng điều khiển Hiện thanh bên bảng điều khiển..

    Thanh bên.

  2. Nhấp vào biểu tượng Mở rộng Mở rộng. bên cạnh 12 tin nhắn. Thanh bên cho thấy danh sách các URL khiến thông báo được ghi lại. Ví dụ: log.js gây ra 11 thông báo.

    Xem nguồn của thư trong Thanh bên.

Lọc theo thông báo cho người dùng

Trước đó, khi bạn nhấp vào Log Info, một tập lệnh có tên là console.log('Hello, Console!') sẽ được gọi để ghi thông báo vào Bảng điều khiển. Những thông báo được ghi lại từ JavaScript như thế này được gọi là thông báo người dùng. Ngược lại, khi bạn nhấp vào Cause 404, trình duyệt đã ghi lại một thông báo ở cấp Error cho biết không tìm thấy tài nguyên được yêu cầu. Những thông báo như vậy được coi là thông báo của trình duyệt. Bạn có thể sử dụng Thanh bên để lọc bỏ các thông báo của trình duyệt và chỉ hiển thị thông báo của người dùng.

  1. Nhấp vào 9 tin nhắn của người dùng. Các thông báo của trình duyệt sẽ bị ẩn.

    Lọc các thông báo trên trình duyệt.

  2. Nhấp vào 12 tin nhắn để hiện lại tất cả tin nhắn.

Sử dụng Bảng điều khiển cùng với bất kỳ bảng điều khiển nào khác

Điều gì sẽ xảy ra nếu bạn đang chỉnh sửa kiểu nhưng cần nhanh chóng kiểm tra nhật ký Bảng điều khiển để tìm một nội dung nào đó? Sử dụng Ngăn.

  1. Nhấp vào thẻ Thành phần.

  2. Nhấn phím Escape. Thẻ Console (Bảng điều khiển) của Drawer (Ngăn) sẽ mở ra. Công cụ này có tất cả các tính năng của Console mà bạn đã sử dụng trong suốt hướng dẫn này.

    Thẻ **Bảng điều khiển** trong Ngăn kéo.

Các bước tiếp theo

Xin chúc mừng, bạn đã hoàn thành hướng dẫn này. Nhấp vào Dispense Trophy (Trao cúp) để nhận cúp.