Đị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 cho thông báo trong Bảng điều khiển Chrome DevTools. Hãy xem phần Bắt đầu ghi nhật ký thông báo để tìm hiểu cách ghi nhật ký thông báo vào Bảng điều khiển.

Hướng dẫn này giả định rằng bạn đã nắm đượ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 chỉ định định dạng để định dạng thông báo của bảng điều khiển.

Chỉ định đị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. Nhập lệnh sau trên bảng điều khiển.

    const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

  3. Lệnh ở trên sẽ tạo thông báo Chrome DevTools is awesome..định dạng giá trị chuỗi

Dưới đây là danh sách thông số định dạng mà Chrome DevTools hiện hỗ trợ.

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 quy tắc kiểu CSS cho chuỗi đầu ra theo quy định của tham số thứ hai

Áp dụng nhiều chỉ định định dạng

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

  1. Nhập lệnh sau trên bảng điều khiển.

    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 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ề việc chuyển đổi kiểu

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

  1. Nhập lệnh sau trên bảng điều khiển.

    console.log('I have %i apples and %d oranges.', 2, 3.5);

  2. Lệnh ở trên sẽ tạo 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ị phải/sẽ được chuyển đổi thành số nguyên.

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

  1. Nhập lệnh sau trên bảng điều khiển.

    console.log('Jane has %i kiwis.', 'two');

  2. Lệnh ở trên sẽ tạo 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ị phải/sẽ được chuyển đổi thành số nguyên, nhưng đối số là một chuỗi. Do đó, hàm này trả về NaN (Not-A-Number).

Tạo kiểu cho thông báo trên bảng điều khiển

Có hai cách để tạo kiểu cho thông báo trên bảng điều khiển trong DevTools.

Kiểu có chỉ định định dạng

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

  1. Nhập lệnh sau trên bảng điều khiển.

    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 với các kiểu CSS được áp dụng.đầu ra kiểu bằng CSS

Phong cách với trình tự thoát ANSI

Bạn có thể sử dụng trình 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 cho thông điệp nhật ký thông qua trình tự thoát ANSI, thường là nhờ 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 trình tự thoát ANSI mà không cần sử dụng thư viện nào. Sau đây là cú pháp:

\x1B[𝘗1;…;𝘗nm

Ở đâu,

  • 𝘗1 đến 𝘗n là các trình tự con hợp lệ của các thông số SGR (Chọn bản trình bày đồ hoạ).
  • 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 sau trên bảng điều khiển.

    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 màu đỏ, văn bản màu vàng và được gạch chân. Xin chào

Dưới đây là danh sách các 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) tham 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 thuộc tính text-decoration
9 Thêm line-through vào thuộc tính 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 thuộc tính text-decoration
29 Xoá line-through khỏi thuộc tính text-decoration
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 Đặt lại color property
48;2;𝑅;𝐺;𝐵 background: rgb(𝑅,𝐺,𝐵)
49 Đặt lại background property
53 Thêm overline vào thuộc tính text-decoration
55 Xoá overline khỏi thuộc tính text-decoration

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

  1. Nhập lệnh sau trên bảng điều khiển.

    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 một thông báo Hello World có 3 kiểu khác nhau. Xin chào mọi người