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, độ chính xác đơn, v.v.).
Ví dụ:
- Mở Bảng điều khiển
Nhập lệnh sau đây trong bảng điều khiển.
const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
Lệnh trên sẽ tạo ra thông báo
Chrome DevTools is awesome.
.
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.
Nhập lệnh sau đây trong 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);
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.
.
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.
Nhập lệnh sau đây trong bảng điều khiển.
console.log('I have %i apples and %d oranges.', 2, 3.5);
Lệnh trên sẽ tạo ra thông báo
I have 2 apples and 3 oranges.
.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ệ.
Nhập lệnh sau đây trong bảng điều khiển.
console.log('Jane has %i kiwis.', 'two');
Lệnh trên sẽ tạo ra thông báo
Jane has NaN kiwis.
.%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.
Nhập lệnh sau đây trong 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);
Lệnh ở trên tạo ra
Hooray
với các kiểu CSS được áp dụng.
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ụ:
Nhập lệnh sau đây trong bảng điều khiển.
console.log('\x1B[41;93;4mHello\x1B[m');
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.
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.
Nhập lệnh sau đây trong 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);
Lệnh ở trên tạo ra một thông báo
Hello World
có 3 kiểu khác nhau.