คู่มือนี้จะแสดงวิธีจัดรูปแบบและจัดรูปแบบข้อความในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โปรดดูวิธีบันทึกข้อความไปยังคอนโซลที่หัวข้อเริ่มต้นใช้งานข้อความบันทึก
คู่มือนี้จะถือว่าคุณเข้าใจพื้นฐานของการพัฒนาเว็บ เช่น วิธีใช้ JavaScript เพื่อเพิ่มการโต้ตอบลงในหน้าเว็บ
จัดรูปแบบข้อความในคอนโซล
คุณสามารถใช้ตัวระบุรูปแบบเพื่อจัดรูปแบบข้อความในคอนโซล
ตัวระบุรูปแบบจะขึ้นต้นด้วยอักขระเปอร์เซ็นต์ (%) และสิ้นสุดด้วย "อักขระประเภท" ซึ่งระบุประเภทข้อมูล (จำนวนเต็ม จำนวนทศนิยม ฯลฯ)
ตัวอย่างเช่น
- เปิดคอนโซล
ป้อนคำสั่งคอนโซลต่อไปนี้
const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
คำสั่งด้านบนจะสร้างข้อความ
Chrome DevTools is awesome.
วันที่
รายการตัวระบุรูปแบบที่ Chrome DevTools รองรับในปัจจุบันมีดังนี้
ผู้ระบุ | เอาต์พุต |
---|---|
%s |
จัดรูปแบบค่าเป็นสตริง |
%i หรือ %d |
จัดรูปแบบค่าเป็นจำนวนเต็ม |
%f |
จัดรูปแบบค่าเป็นค่าทศนิยม |
%o |
จัดรูปแบบค่าเป็นองค์ประกอบ DOM ที่ขยายได้ |
%O |
จัดรูปแบบค่าเป็นออบเจ็กต์ JavaScript ที่ขยายได้ |
%c |
ใช้กฎรูปแบบ CSS กับสตริงเอาต์พุตตามที่ระบุไว้โดยพารามิเตอร์ที่ 2 |
ใช้ตัวระบุหลายรูปแบบ
คุณใช้ตัวระบุรูปแบบในข้อความได้มากกว่า 1 รูปแบบ
ป้อนคำสั่งคอนโซลต่อไปนี้
console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
คำสั่งด้านบนจะสร้างข้อความ
The total weight of 3 apples and 2 oranges is 432.4 grams.
วันที่
ทําความเข้าใจการแปลงประเภท
ระบบจะแปลงข้อความเอาต์พุตตามตัวระบุรูปแบบ
ป้อนคำสั่งคอนโซลต่อไปนี้
console.log('I have %i apples and %d oranges.', 2, 3.5);
คำสั่งด้านบนจะสร้างข้อความ
I have 2 apples and 3 oranges.
วันที่แทนที่จะบันทึก
3.5 oranges
เอาต์พุตจะเป็น3 oranges
%d
ระบุว่าค่าควร/จะถูกแปลงเป็นจำนวนเต็ม
นี่คือตัวอย่างของสิ่งที่จะเกิดขึ้นหาก Conversion ประเภทไม่ถูกต้อง
ป้อนคำสั่งคอนโซลต่อไปนี้
console.log('Jane has %i kiwis.', 'two');
คำสั่งด้านบนจะสร้างข้อความ
Jane has NaN kiwis.
วันที่%i
ระบุว่าค่าควร/จะถูกแปลงเป็นจำนวนเต็ม แต่อาร์กิวเมนต์เป็นสตริง ดังนั้นจึงแสดงค่าเป็น NaN (Not-A-Number)
จัดรูปแบบข้อความในคอนโซล
การจัดรูปแบบข้อความในคอนโซลในเครื่องมือสำหรับนักพัฒนาเว็บทำได้ 2 วิธี
จัดรูปแบบด้วยตัวระบุรูปแบบ
คุณใช้ตัวระบุรูปแบบ %c
เพื่อจัดรูปแบบข้อความในคอนโซลด้วย CSS ได้
ป้อนคำสั่งคอนโซลต่อไปนี้
const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
คำสั่งด้านบนจะสร้าง
Hooray
ที่มีการใช้รูปแบบ CSS วันที่
จัดรูปแบบด้วยลำดับการยกเว้น ANSI
คุณสามารถใช้ลำดับการยกเว้น ANSI เพื่อจัดรูปแบบข้อความในคอนโซลได้
นักพัฒนาซอฟต์แวร์ Node.js จะต้องให้สีข้อความในบันทึกผ่านลำดับการยกเว้น ANSI ซึ่งมักใช้ไลบรารีการจัดรูปแบบ เช่น ชอล์ก, colors, ansi-colors, kleur
อย่างไรก็ตาม คุณสามารถจัดรูปแบบข้อความด้วยลำดับหลีก ANSI ได้โดยไม่ต้องใช้ไลบรารีใดๆ ไวยากรณ์มีดังต่อไปนี้
\x1B[𝘗1;…;𝘗nm
ที่ไหน
𝘗1
ถึง𝘗n
เป็นลำดับย่อยที่ถูกต้องของพารามิเตอร์ SGR (เลือกการแสดงผลกราฟิก)- สามารถละเว้นพารามิเตอร์
𝘗1
ถึง𝘗n
ได้ ซึ่งในกรณีนี้ค่าของพารามิเตอร์จะเป็น 0 \x1B[m
เป็นชื่อย่อของ\x1B[0m
ซึ่งระบบจะรีเซ็ตแอตทริบิวต์การแสดงผล
ตัวอย่างเช่น
ป้อนคำสั่งคอนโซลต่อไปนี้
console.log('\x1B[41;93;4mHello\x1B[m');
คำสั่งด้านบนจะสร้างข้อความ
Hello
ที่มีพื้นหลังสีแดง ข้อความสีเหลือง และขีดเส้นใต้ วันที่
รายการรหัสสีที่รองรับในเครื่องมือสำหรับนักพัฒนาเว็บมีดังนี้
เบื้องหน้า | ข้อมูลเบื้องต้น | ธีมสว่าง | ธีมมืด |
---|---|---|---|
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 |
รายการโค้ดการจัดรูปแบบที่รองรับในเครื่องมือสำหรับนักพัฒนาเว็บมีดังนี้
พารามิเตอร์ | ความหมาย |
---|---|
0 | รีเซ็ตแอตทริบิวต์การแสดงผลทั้งหมด |
1 | font-weight: bold |
2 | font-weight: lighter |
3 | font-style: italic |
4 | เพิ่ม underline ลงในพร็อพเพอร์ตี้ text-decoration |
9 | เพิ่ม line-through ลงในพร็อพเพอร์ตี้ text-decoration |
22 | รีเซ็ตพร็อพเพอร์ตี้ font-weight |
23 | รีเซ็ตพร็อพเพอร์ตี้ font-style |
24 | นำ underline ออกจากพร็อพเพอร์ตี้ text-decoration |
29 | นำ line-through ออกจากพร็อพเพอร์ตี้ text-decoration |
38;2;R;G;B | color: rgb(𝑅,𝐺,𝐵) |
39 | รีเซ็ตcolor property |
48;2;R;G;B | background: rgb(𝑅,𝐺,𝐵) |
49 | รีเซ็ตbackground property |
53 | เพิ่ม overline ลงในพร็อพเพอร์ตี้ text-decoration |
55 | นำ overline ออกจากพร็อพเพอร์ตี้ text-decoration |
ต่อไปนี้เป็นอีกตัวอย่างหนึ่งที่ซับซ้อนมากขึ้นซึ่งมีการจัดรูปแบบหลายรายการ
ป้อนคำสั่งคอนโซลต่อไปนี้
const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld'; console.log(hello + space + world);
คำสั่งด้านบนจะสร้างข้อความ
Hello World
ที่มีรูปแบบ 3 รูปแบบที่แตกต่างกัน วันที่