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

Jecelyn Yeen

Hướng dẫn này cho bạn biết cách định dạng và tạo kiểu thông báo trong Bảng điều khiển Công cụ của Chrome cho nhà phát triển. 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 ghi nhật ký thông báo vào Console.

Hướng dẫn 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.

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

Bạn có thể sử dụng thông số định dạng để định dạng các 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ở Bảng điều khiển
  2. Hãy nhập lệnh sau đây trong bảng điều khiển. 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

Dưới đây là danh sách thông số kỹ thuật định dạng hiện được hỗ trợ trong Công cụ của Chrome cho nhà phát triển.

Thông số xác định Đầ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 tham số thứ hai chỉ định

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

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

  1. Hãy nhập lệnh sau đây trong bảng điều khiển. 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.. thông số định dạng nhiều

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. Hãy nhập lệnh sau đây trong bảng điều khiển. 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 số nguyên.

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

  1. Hãy nhập lệnh sau đây trong bảng điều khiển. 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ị cần/sẽ được chuyển đổi thành số nguyên, nhưng đối số là một chuỗi. Do đó, phương thức này sẽ trả về NaN (Không phải số A).

Thông báo trên bảng điều khiển kiểu

Có hai cách để tạo kiểu cho thông báo của bảng điều khiển trong Công cụ cho nhà phát triển.

Kiểu có thông số định dạng

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

  1. Hãy nhập lệnh sau đây trong bảng điều khiển. 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 tạo ra Hooray có áp dụng kiểu CSS. tạo kiểu đầu ra bằng CSS

Tạo kiểu bằng chuỗi ký tự thoát ANSI

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

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

Tuy nhiên, bạn có thể tạo kiểu cho thông báo bằng 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à các cấp độ con hợp lệ của 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 bằng 0.
  • \x1B[m là viết tắt của \x1B[0m, trong đó thuộc tính màn hình sẽ được đặt lại.

Ví dụ:

  1. Hãy nhập lệnh sau đây trong bảng điều khiển. js console.log('\x1B[41;93;4mHello\x1B[m');
  2. Lệnh trên sẽ tạo ra một thông báo Hello có nền đỏ, văn bản màu vàng và được gạch chân. 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ả các thuộc tính của màn hình
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 sau đây trong bảng điều khiển. ```js const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    console.log(hello + space + world); ```

  2. Lệnh ở trên sẽ 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