Phần hướng dẫn tương tác này trình bày 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.
Bạn cần xem hướng dẫn này theo thứ tự. Phần này giả định rằng bạn đã hiểu các nguyên tắc cơ bản về việc 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 dễ ghi nhớ quy trình làm việc sau này.
- Mở bản minh hoạ.
Không bắt buộc: Di chuyển bản minh hoạ đến 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ạ ở bên phải.
Lấy tiêu điểm 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ạ.
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ỡ 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 đã gỡ khỏi 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 là của 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 nhật ký từng loại thông báo từ JavaScript của riêng mình.
Nhấp vào nút Thông tin nhật ký trong bản minh hoạ.
Hello, Console!
đã được đăng nhập vào Bảng điều khiển.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 Source (Nguồn) sẽ mở ra và đánh dấu dòng mã khiến thông báo được ghi lại vào Console.Thông báo này được ghi lại khi JavaScript của trang có tên là
console.log('Hello, Console!')
.Quay lại Bảng điều khiển theo quy trình bất kỳ sau đây:
- Nhấp vào thẻ Bảng điều khiển.
- Nhấn tổ hợp phím Control + [ hoặc Command + [ (máy Mac) cho đến khi Console nằm trong tiêu điểm.
- Mở Trình đơn lệnh, bắt đầu nhập
Console
, chọn lệnh Hiển thị bảng điều khiển, sau đó nhấn phím Enter.
Nhấp vào nút Log Warning (Cảnh báo nhật ký) trong bản minh hoạ.
Abandon Hope All Ye Who Enter
được ghi vào Bảng điều khiển.Thông báo có định dạng như thế này là cảnh báo.
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 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 một thông báo được ghi lại theo một cách nào đó.
Nhấp vào biểu tượ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 cho bạn biết rằng một hàm có tên là
logWarning
đã được gọi, do đó, hàm này đã được 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 nhật ký dấu vết ngăn xếp bất cứ lúc nào bằng cách gọiconsole.trace()
.Nhấp vào Lỗi nhật ký. Thông báo lỗi sau đây được ghi lại:
I'm sorry, Dave. I'm afraid I can't do that.
Nhấp vào Bảng nhật ký. Một bảng về các nghệ sĩ nổi tiếng sẽ được ghi lại vào Console.
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.Nhấp vào Nhóm nhật ký. Tên của 4 chú rùa chống tội phạm nổi tiếng được nhóm vào nhãn
Adolescent Irradiated Espionage Tortoises
.Nhấp vào Tuỳ chỉnh nhật ký. Một thông báo có đường viền màu đỏ và nền màu xanh dương sẽ được ghi lại vào Bảng điều khiển.
Ý tưởng chính ở đây là khi muốn ghi thông điệp vào Bảng điều khiển từ JavaScript, bạn
hãy sử dụng một trong các phương thức console
. Mỗi phương thức 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 những gì đã được trình bày trong phần này. Ở cuối hướng dẫn, bạn sẽ tìm hiểu 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 ghi lại thông báo vào Console. Quá trình này thường xảy ra khi có vấn đề với trang.
Nhấp vào Nguyên nhân 404. Trình duyệt ghi nhật ký lỗi mạng
404
do JavaScript của trang cố gắng tìm nạp một tệp không tồn tại.Nhấp vào Cause Error (Nguyên nhân). Trình duyệt ghi lại một
TypeError
chưa được nắm bắt vì JavaScript đang cố gắng cập nhật nút DOM không tồn tại.Nhấp vào trình đơn thả xuống Log Levels (Cấp độ nhật ký) và bật tuỳ chọn Verbose (Chi tiết) nếu tính năng này bị tắt. 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 thông báo tiếp theo mà bạn ghi lại sẽ hiển thị. Lưu ý: Nếu trình đơn thả xuống Cấp mặc định bị tắt, thì bạn có thể cần đóng Thanh bên của Play Console. Hãy lọc theo Nguồn thông báo dưới đây để biết thêm thông tin về Thanh bên của Play Console.
Nhấp vào Nguyên nhân vi phạm. Trang không phản hồi trong vài giây và sau đó trình duyệt sẽ ghi lại thông báo
[Violation] 'click' handler took 3000ms
vào Console. Thời lượng chính xác có thể khác nhau.
Lọc thông báo
Trên một số trang, bạn sẽ thấy Bảng điều khiển có quá 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 nhiệm vụ đang thực hiện.
Lọc theo cấp độ nhật ký
Mỗi phương thức console.*
sẽ đượ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ý:
Nhấp vào trình đơn thả xuống Cấp độ nhật ký và tắt Lỗi. Một cấp sẽ bị tắt khi không còn dấu kiểm bên cạnh. Tin nhắn ở cấp độ
Error
sẽ biến mất.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. Các tin nhắn ở 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 báo có 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).
Nhập
Dave
vào hộp văn bản Filter (Bộ lọc). Mọi thông điệp không bao gồm chuỗiDave
đều bị ẩn. Bạn cũng có thể thấy nhãnAdolescent Irradiated Espionage Tortoises
. Đó là lỗi.Xoá
Dave
khỏi hộp văn bản Filter (Bộ lọc). Tất cả cá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 điệp 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.
Nhập
/^[AH]/
vào hộp văn bản Filter (Bộ lọc). Nhập mẫu này vào RegExr để biết nội dung giải thích về hành động của mẫu đó.Xoá
/^[AH]/
khỏi hộp văn bản Filter (Bộ lọc). Tất cả tin nhắn sẽ hiển thị lại.
Lọc theo nguồn thông báo
Khi bạn chỉ muốn xem các thư đến từ một URL nhất định, hãy sử dụng Thanh bên.
Nhấp vào biểu tượng Hiển thị thanh bên của Bảng điều khiển
.
Nhấp vào biểu tượng Mở rộng
bên cạnh 12 Tin nhắn. Thanh bên hiển thị 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.
Lọc theo thông báo của người dùng
Trước đó, khi bạn nhấp vào 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 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 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 trên 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.
Nhấp vào 9 Thông báo cho người dùng. Tin nhắn trong trình duyệt bị ẩn.
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 đang chỉnh sửa kiểu nhưng bạn cần kiểm tra nhanh nhật ký Console (Bảng điều khiển) thì sao? Sử dụng Ngăn.
- Nhấp vào thẻ Phần tử.
Nhấn phím Escape. Thẻ Bảng điều khiển của Ngăn sẽ mở ra. Phiên bản này 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.
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 Phân phối Cúp để nhận cúp.
- Xem Tài liệu tham khảo về Play Console để khám phá thêm các tính năng và quy trình công việc liên quan đến giao diện người dùng của Console.
- Xem Tài liệu tham khảo API của Bảng điều khiển để tìm hiểu thêm về tất cả các phương thức
console
đã được minh hoạ trong phần Xem thông báo được ghi lại từ JavaScript và khám phá các phương thứcconsole
khác chưa được đề cập trong hướng dẫn này. - Xem phần Bắt đầu để khám phá những việc khác bạn có thể làm với Công cụ cho nhà phát triển.
- Xem phần Định dạng và định kiểu thông báo trong Bảng điều khiển để tìm hiểu thêm về tất cả các phương thức định dạng và định kiểu
console
.