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

Kayce Basques

Phần hướng dẫn có tính 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 Công cụ của Chrome cho nhà phát triển.

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

Hướng dẫn này được thiết kế để hoàn thành theo đúng thứ tự. Hướng dẫn này giả định rằng bạn hiểu rõ các nguyên tắ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ả các quy trình làm việc. Khi theo dõi thực tế, bạn có nhiều khả năng sẽ nhớ các quy trình công 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, phần hướng dẫn nằm ở bên trái và bản minh hoạ nằm ở 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ạ rồi nhấn tổ hợp phím Control+Shift+J hoặc Command+Option+J (máy 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 mở ra ở bên phải bản minh hoạ.

  4. Không bắt buộc: Gắn Công cụ cho nhà phát triển vào cuối cửa sổ hoặc gỡ công cụ này 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ỡ trong một cửa sổ riêng: Công cụ cho nhà phát triển đã được gỡ 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 đế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 Console, đồng thời giải thích cách bạn có thể tự ghi lại từng loại thông báo qua 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 lại vào Bảng điều khiển.

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

  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 Sources (Nguồn) sẽ mở ra và làm nổi bật dòng mã đã dẫn đến việc thông báo được ghi vào Console.

    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 có tên là console.log('Hello, Console!').

  3. Quay lại Bảng điều khiển bằng một trong các quy trình sau đây:

    • 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 nằm trong tiêu điể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.

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

    Bảng điều khiển sau khi nhấp vào Cảnh báo nhật ký.

    Tin nhắn 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ư sau, sau đó quay lại Bảng điều khiển 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 thông báo được ghi lại 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 hiển thị 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, sau đó 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 là ở cuối dấu vết ngăn xếp. Bạn có thể ghi nhật ký 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 (Lỗi nhật ký). Thông báo lỗi sau đây sẽ được ghi lại: 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 Bảng nhật ký. Một bảng về các nghệ sĩ nổi tiếng được ghi vào Console.

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

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

  9. Nhấp vào Ghi nhật ký nhóm. Tên của 4 con rùa chiến đấu chống tội phạm nổi tiếng được nhóm trong nhãn Adolescent Irradiated Espionage Tortoises.

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

  10. Nhấp vào 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 Console (Bảng điều khiển).

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

Thậm chí, còn có nhiều phương pháp hơn so với những gì được trình bày trong phần này. Ở cuối hướng dẫn, bạn sẽ học cách khám phá các phương thức còn lại.

Xem tin nhắn do trình duyệt ghi lại

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

  1. Nhấp vào Nguyên nhân 404. Trình duyệt sẽ ghi lại lỗi mạng 404 vì JavaScript của trang đã cố tìm nạp tệp không tồn tại.

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

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

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

  3. Nhấp vào trình đơn thả xuống Log level (Cấp độ nhật ký) rồi bật tuỳ chọn Verbose (Chi tiết) nếu đã tắt tuỳ chọn này. Bạn sẽ tìm hiểu thêm về cách lọc trong phần tiếp theo. Bạn cần thực hiện việc này để đảm bảo rằng tin nhắn tiếp theo bạn ghi lại sẽ xuất hiện. Lưu ý: Nếu trình đơn thả xuống Các cấp mặc định đang tắt, thì bạn có thể cần đóng Thanh bên của bảng điều khiển. Hãy 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 Bảng điều khiển.

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

  4. Nhấp vào Nguyên nhân vi phạm. Trang không phản hồi trong vài giây, sau đó trình duyệt sẽ ghi nhật ký 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.

    Một lỗi 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 chứa rất nhiều thông báo. Công cụ cho nhà phát triển cung cấp nhiều cách để lọc ra các thông báo không liên quan đến tác vụ đang thực hiện.

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, còn 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 Level (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ác tin nhắn ở 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 Log Level (Cấp độ nhật ký) rồi bật lại Errors (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 các thông điệp chứa một chuỗi chính xác, hãy nhập chuỗi đó vào hộp văn bản Filter (Bộ lọc).

  1. Nhập Dave vào hộp văn bản Filter (Bộ lọc). Tất cả thông báo không chứa chuỗi Dave đều bị ẩn. Bạn cũng có thể thấy nhãn Adolescent Irradiated Espionage Tortoises. Đó là lỗi.

    Lọc ra mọi thư không có từ "Dave".

  2. Xoá Dave khỏi hộp văn bản Bộ lọc. Tất cả tin nhắn sẽ xuất hiện lại.

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

Khi bạn muốn hiển thị tất cả thông báo 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 văn bản Filter (Bộ lọc). Hãy nhập mẫu này vào RegExr để hiểu rõ hoạt động của mẫu này.

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

  2. Xoá /^[AH]/ khỏi hộp văn bản Bộ lọc. Tất cả tin nhắn sẽ hiển thị lại.

Lọc theo nguồn thư

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

  1. Nhấp vào biểu tượng Show Console Toolbar (Hiện thanh bên của Bảng điều khiển) Hiển thị 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 Thư. Thanh bên hiển thị một danh sách các URL khiến thư được ghi nhật ký. Ví dụ: log.js đã tạo 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 (Thông tin nhật ký), một tập lệnh có tên là console.log('Hello, Console!') để ghi thông báo đó vào Console. Các thông báo được ghi lại từ JavaScript như thế này được gọi là thông báo của người dùng. Ngược lại, khi bạn nhấp vào Nguyên nhân 404, trình duyệt đã ghi lại một thông báo cấp Error cho biết không thể 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 ra thông báo trên trình duyệt và chỉ hiển thị thông báo cho người dùng.

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

    Đang lọc ra 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

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

  1. Nhấp vào thẻ Phần tử.

  2. Nhấn Escape. Thẻ Bảng điều khiển của Ngăn sẽ mở ra. Thư viện có tất cả các tính năng của Bảng điều khiển 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.

Các bước tiếp theo

Xin chúc mừng, bạn đã hoàn tất hướng dẫn. Nhấp vào Chia sẻ cúp để nhận chiếc cúp của bạn.