Định dạng và tạo kiểu cho thông báo trong Bảng điều khiển

Jecelyn Yeen
Jecelyn Yeen
Twitter GitHub Trang chủ

Hướng dẫn này trình bày cách định dạng và tạo kiểu cho thông báo trong Bảng điều khiển dành cho nhà phát triển của Chrome. Xem bài viết Bắt đầu sử dụng thông báo ghi nhật ký để tìm hiểu cách gửi thông báo nhật ký vào Console.

Hướng dẫn này giả định rằng bạn đã nắm được kiến thứ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 khả năng tương tác vào một trang.

Định dạng thông báo trên bảng điều khiển

Bạn có thể dùng thông số định dạng để định dạng thông báo trên bảng điều khiển.

Thông số định dạng bắt đầu bằng ký tự phần trăm (%) và kết thúc bằng "ký tự loại" cho biết loại dữ liệu (số nguyên, số thực, v.v.).

Ví dụ:

  1. Mở Console
  2. Nhập lệnh trong bảng điều khiển sau. js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. Lệnh trên sẽ tạo ra thông báo Chrome DevTools is awesome.. giá trị chuỗi định dạng

Sau đây là danh sách hỗ trợ hiện tại của Chrome cho nhà phát triển về thông số định dạng.

Thông số Đầu ra
%s Định dạng giá trị dưới dạng chuỗi
%i hoặc %d Định dạng giá trị dưới dạng số nguyên
%f Định dạng giá trị dưới dạng giá trị dấu phẩy động
%o Định dạng giá trị dưới dạng phần tử DOM có thể mở rộng
%O Định dạng giá trị dưới dạng đối tượng JavaScript có thể mở rộng
%c Áp dụng các quy tắc kiểu CSS cho chuỗi đầu ra như được chỉ định bởi tham số thứ hai

Áp dụng nhiều thông số định dạng

Bạn có thể dùng nhiều thông số định dạng trong một thông báo.

  1. Nhập lệnh trong bảng điều khiển sau. js console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
  2. Lệnh trên sẽ tạo ra thông báo The total weight of 3 apples and 2 oranges is 432.4 grams.. nhiều thông số định dạng

Tìm hiểu về loại chuyển đổi

Thông báo đầu ra sẽ được chuyển đổi theo thông số định dạng.

  1. Nhập lệnh trong bảng điều khiển sau. js console.log('I have %i apples and %d oranges.', 2, 3.5);
  2. Lệnh trên sẽ tạo ra thông báo I have 2 apples and 3 oranges.. định dạng giá trị số nguyên
  3. Thay vì ghi nhật ký 3.5 oranges, kết quả sẽ là 3 oranges. %d cho biết giá trị cần/sẽ được chuyển đổi thành một số nguyên.

Dưới đây là ví dụ về những gì sẽ xảy ra nếu loại chuyển đổi không hợp lệ.

  1. Nhập lệnh trong bảng điều khiển sau. js console.log('Jane has %i kiwis.', 'two');
  2. Lệnh trên sẽ tạo ra thông báo Jane has NaN kiwis.. NaN trong thông báo trên bảng điều khiển
  3. %i cho biết giá trị sẽ/sẽ được chuyển đổi thành số nguyên, nhưng đối số này là một chuỗi. Do đó, kết quả trả về là NaN (Not-A-Number).

Kiểu thông báo trên bảng điều khiển

Có 2 cách để định kiểu cho thông báo trên bảng điều khiển trong Công cụ cho nhà phát triển.

Kiểu với thông số định dạng

Bạn có thể dùng thông số định dạng %c để tạo kiểu cho thông báo trong bảng điều khiển bằng CSS.

  1. Nhập lệnh trong bảng điều khiển sau. js const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
  2. Lệnh trên sẽ tạo ra Hooray có áp dụng kiểu CSS. đầu ra kiểu bằng CSS

Kiểu với chuỗi ký tự thoát ANSI

Bạn có thể sử dụng các chuỗi ký tự thoát ANSI để tạo kiểu cho các thông báo trong bảng điều khiển.

Các nhà phát triển Node.js thường dùng trình tự thoát ANSI để tô màu thông điệp nhật ký, thường với sự trợ giúp của một số thư viện định kiểu như chalk, colors, ansi-colors, kleur.

Tuy nhiên, bạn có thể tạo kiểu cho thông báo bằng các chuỗi ký tự thoát ANSI mà không cần sử dụng bất kỳ thư viện nào. Dưới đây là cú pháp:

\x1B[𝘗1;…;𝘗nm

Ở đâu,

  • 𝘗1 đến 𝘗n là chuỗi con hợp lệ của các tham số SGR (Select Graphic Rendition).
  • Bạn có thể bỏ qua bất kỳ tham số nào từ 𝘗1 đến 𝘗n. Trong trường hợp đó, giá trị của tham số đó được giả định là 0.
  • \x1B[m là viết tắt của \x1B[0m, trong đó thuộc tính hiển thị sẽ được đặt lại.

Ví dụ:

  1. Nhập lệnh trong bảng điều khiển sau. js console.log('\x1B[41;93;4mHello\x1B[m');
  2. Lệnh trên tạo ra một thông báo Hello có nền màu đỏ, văn bản màu vàng và được gạch dưới. Xin chào

Dưới đây là danh sách mã màu được hỗ trợ trong Công cụ cho nhà phát triển.

Nền trước Thông tin khái quát Giao diện sáng Giao diện tối
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

Dưới đây là danh sách mã định kiểu được hỗ trợ trong Công cụ cho nhà phát triển.

(Các) thông số Ý nghĩa
0 Đặt lại tất cả thuộc tính hiển thị
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Thêm underline vào tài sản text-decoration
9 Thêm line-through vào tài sản text-decoration
22 Đặt lại thuộc tính font-weight
23 Đặt lại thuộc tính font-style
24 Xoá underline khỏi tài sản text-decoration
29 Xoá line-through khỏi tài sản text-decoration
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 Đặt lại color property
48;2;R;G;B background: rgb(𝑅,𝐺,𝐵)
49 Đặt lại background property
53 Thêm overline vào tài sản text-decoration
55 Xoá overline khỏi tài sản text-decoration

Dưới đây là một ví dụ khác phức tạp hơn với nhiều kiểu.

  1. Nhập lệnh bảng điều khiển sau đây. ```js const hello = '\x1B[41;93;4mHello'; const không gian = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    console.log(xin chào + dấu cách + thế giới); ```

  2. Lệnh trên tạo ra một thông báo Hello World có 3 kiểu khác nhau. Xin chào mọi người