Đị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 thông số định dạng để định dạng các thông báo trên 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 ra thông báo Chrome DevTools is awesome..

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

Á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..

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..

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ề điều sẽ xảy ra nếu loại chuyển đổi là 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..

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 đó, 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 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 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. 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.

Tạo kiểu bằng chuỗi ký 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 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 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 đỏ, văn bản màu vàng và được gạch chân.

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.

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

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 trong bảng điều khiển sau.

   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 tạo ra một thông báo Hello World với 3 kiểu khác nhau.