Ghi thông báo vào bảng điều khiển là một cách rất cơ bản để chẩn đoán và khắc phục sự cố nhỏ trong mã của bạn.
Nhưng, bạn có biết rằng có nhiều hơn để console hơn là log? Trong bài viết này, tôi sẽ chỉ cho bạn cách in ra bàn điều khiển trong JS, cũng như tất cả những điều bạn chưa biết console Có thể làm.
Bảng điều khiển soạn thảo nhiều dòng của Firefox
Nếu chưa từng sử dụng chế độ soạn thảo nhiều dòng trong Firefox, bạn nên thử ngay!
Chỉ cần mở bảng điều khiển, Ctrl+Shift+K hoặc F12và ở trên cùng bên phải, bạn sẽ thấy một nút có nội dung “Chuyển sang chế độ trình chỉnh sửa nhiều dòng”. Ngoài ra, bạn có thể nhấn Ctrl+B.
Điều này cung cấp cho bạn trình chỉnh sửa mã nhiều dòng ngay bên trong Firefox.
bảng điều khiển.log
Hãy bắt đầu với một ví dụ nhật ký rất cơ bản.
let x = 1
console.log(x)Nhập mã đó vào bảng điều khiển Firefox và chạy mã. Bạn có thể nhấp vào nút “Chạy” hoặc nhấn Ctrl+Enter.
Trong ví dụ này, chúng ta sẽ thấy “1” trong bảng điều khiển. Khá đơn giản, phải không?
Nhiều giá trị
Bạn có biết rằng bạn có thể bao gồm nhiều giá trị? Thêm một chuỗi vào đầu để dễ dàng xác định những gì bạn đang đăng nhập.
let x = 1
console.log("x:", x)Nhưng nếu chúng ta có nhiều giá trị muốn ghi lại thì sao?
let x = 1
let y = 2
let z = 3thay vì gõ console.log() ba lần chúng ta có thể bao gồm tất cả. Và chúng ta cũng có thể thêm một chuỗi trước mỗi chuỗi nếu muốn.
let x = 1
let y = 2
let z = 3
console.log("x:", x, "y:", y, "z:", z)Nhưng đó là quá nhiều công việc. Chỉ cần bọc chúng bằng dấu ngoặc nhọn! Bây giờ bạn có một đối tượng với các giá trị được đặt tên.
let x = 1
let y = 2
let z = 3
console.log( {x, y, z} )
Bạn có thể làm điều tương tự với một đối tượng.
let user = {
name: 'Jesse',
contact: {
email: 'c[email protected]'
}
}
console.log(user)
console.log({user})Nhật ký đầu tiên sẽ in các thuộc tính trong đối tượng người dùng. Cái thứ hai sẽ xác định đối tượng là “người dùng” và in các thuộc tính bên trong nó.
Nếu bạn đang ghi nhiều thứ vào bảng điều khiển, điều này có thể giúp bạn xác định từng nhật ký.
Các biến trong nhật ký
Bạn có biết rằng bạn có thể sử dụng các phần nhật ký của mình làm biến không?
console.log("%s is %d years old.", "John", 29)Trong ví dụ này, %s đề cập đến một tùy chọn chuỗi bao gồm sau giá trị ban đầu. Điều này sẽ đề cập đến “John”.
Các %d đề cập đến một tùy chọn chữ số bao gồm sau giá trị ban đầu. Điều này sẽ đề cập đến 29.
Đầu ra của câu lệnh này sẽ là: “John 29 tuổi.”.
Các biến thể của nhật ký
Có một số biến thể của nhật ký. Có cách sử dụng rộng rãi nhất console.log(). Nhưng cũng có:
console.log('Console Log')
console.info('Console Info')
console.debug('Console Debug')
console.warn('Console Warn')
console.error('Console Error')
Các biến thể này thêm kiểu dáng vào nhật ký của chúng tôi trong bảng điều khiển. Ví dụ, các warn sẽ có màu vàng và error sẽ có màu đỏ.
Lưu ý: Các kiểu khác nhau tùy theo trình duyệt.
Nhật ký tùy chọn
Chúng tôi có thể in tin nhắn ra bàn điều khiển một cách có điều kiện với console.assert().
let isItWorking = false
console.assert(isItWorking, "this is the reason why")Nếu đối số đầu tiên là sai, thì thông báo sẽ được ghi lại.
Nếu chúng ta thay đổi isItWorking đến truethì tin nhắn sẽ không được ghi lại.
Đếm
Bạn có biết rằng bạn có thể đếm bằng bảng điều khiển không?
for(i=0; i<10; i++){
console.count()
}Mỗi lần lặp lại của vòng lặp này sẽ in một số đếm ra bàn điều khiển. Bạn sẽ thấy “mặc định: 1, mặc định: 2”, v.v. cho đến khi đạt 10.
Nếu bạn chạy lại cùng vòng lặp này, bạn sẽ thấy số đếm tiếp tục ở nơi nó dừng lại; 11 – 20 .
Để thiết lập lại bộ đếm, chúng ta có thể sử dụng console.countReset().
Và, nếu bạn muốn đặt tên bộ đếm thành một thứ khác ngoài “mặc định”, bạn có thể!
for(i=0; i<10; i++){
console.count('Counter 1')
}
console.countReset('Counter 1')Bây giờ chúng tôi đã thêm nhãn, bạn sẽ thấy “Quầy 1, Quầy 2”, v.v.
Và để thiết lập lại bộ đếm này, chúng ta phải chuyển tên vào countReset. Bằng cách này, bạn có thể có nhiều bộ đếm chạy cùng lúc và chỉ đặt lại những bộ đếm cụ thể.
theo dõi thời gian
Bên cạnh việc đếm, bạn cũng có thể tính thời gian như đồng hồ bấm giờ.
Để bắt đầu hẹn giờ, chúng ta có thể sử dụng console.time(). Điều này sẽ không làm bất cứ điều gì một mình. Vì vậy, trong ví dụ này, chúng ta sẽ sử dụng setTimeout() để mô phỏng mã đang chạy. Sau đó, trong thời gian chờ, chúng tôi sẽ dừng bộ đếm thời gian của mình bằng cách sử dụng console.timeEnd().
console.time()
setTimeout(() => {
console.timeEnd()
}, 5000)Như bạn mong đợi, sau 5 giây, chúng ta sẽ có nhật ký kết thúc hẹn giờ là 5 giây.
Chúng tôi cũng có thể ghi lại thời gian hiện tại của bộ hẹn giờ trong khi nó đang chạy mà không cần dừng nó. Chúng tôi làm điều này bằng cách sử dụng console.timeLog().
console.time()
setTimeout(() => {
console.timeEnd()
}, 5000)
setTimeout(() => {
console.timeLog()
}, 2000)Trong ví dụ này, chúng ta sẽ nhận được 2 giây timeLog đầu tiên, sau đó là 5 giây của chúng tôi timeEnd.
Cũng giống như bộ đếm, chúng ta có thể gắn nhãn bộ đếm thời gian và chạy nhiều bộ đếm thời gian cùng một lúc.
Các nhóm
Một điều khác mà bạn có thể làm với log là nhóm chúng. ?
Chúng tôi bắt đầu một nhóm bằng cách sử dụng console.group(). Và chúng tôi kết thúc một nhóm với console.groupEnd().
console.log('I am not in a group')
console.group()
console.log('I am in a group')
console.log('I am also in a group')
console.groupEnd()
console.log('I am not in a group')Nhóm nhật ký này sẽ có thể thu gọn được. Điều này giúp dễ dàng xác định các bộ nhật ký.
Theo mặc định, nhóm không được thu gọn. Bạn có thể đặt nó thành thu gọn bằng cách sử dụng console.groupCollapsed() thay cho console.group().
Nhãn cũng có thể được chuyển vào group() để xác định chúng tốt hơn.
dấu vết ngăn xếp
Bạn cũng có thể thực hiện theo dõi ngăn xếp với console. Chỉ cần thêm nó vào một chức năng.
function one() {
two()
}
function two() {
three()
}
function three() {
console.trace()
}
one()
Trong ví dụ này, chúng ta có các hàm rất đơn giản chỉ cần gọi nhau. Sau đó, trong chức năng cuối cùng, chúng tôi gọi console.trace().
Những cái bàn
Đây là một trong những cách sử dụng thú vị nhất cho bảng điều khiển: console.table().
Vì vậy, hãy thiết lập một số dữ liệu để ghi nhật ký:
let devices = [
{
name: 'iPhone',
brand: 'Apple'
},
{
name: 'Galaxy',
brand: 'Samsung'
}
]Bây giờ chúng tôi sẽ đăng nhập dữ liệu này bằng cách sử dụng console.table(devices).
Nhưng chờ đợi, nó sẽ tốt hơn!
Nếu chúng ta chỉ muốn các thương hiệu, chỉ cần console.table(devices, ['brand'])!
Làm thế nào về một ví dụ phức tạp hơn? Trong ví dụ này, chúng tôi sẽ sử dụng jsonplaceholder.
async function getUsers() {
let response = await fetch('https://jsonplaceholder.typicode.com/users')
let data = await response.json()
console.table(data, ['name', 'email'])
}
getUsers()Ở đây chúng tôi chỉ in “tên” và “email”. nếu bạn console.log tất cả dữ liệu, bạn sẽ thấy rằng có nhiều thuộc tính hơn cho mỗi người dùng.
Phong cách ?
Bạn có biết rằng bạn có thể sử dụng các thuộc tính CSS để tạo kiểu cho nhật ký của mình không?
Để làm điều này, chúng tôi sử dụng %c để xác định rằng chúng tôi có các kiểu để thêm. Các kiểu được chuyển vào đối số thứ hai của log.
console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")Bạn có thể sử dụng điều này để làm cho nhật ký của bạn nổi bật.
Xa lạ
Nếu bạn đang cố khắc phục sự cố bằng cách sử dụng nhật ký, bạn có thể làm mới rất nhiều và bảng điều khiển của bạn có thể bị lộn xộn.
Chỉ cần thêm console.clear() lên đầu mã của bạn và bạn sẽ có một bảng điều khiển mới mỗi khi bạn làm mới. ?
Chỉ cần không thêm nó vào cuối mã của bạn, lol.
Cảm ơn vì đã đọc!
Nếu bạn muốn xem lại các khái niệm trong bài viết này qua video, bạn có thể xem phiên bản video này mà tôi đã thực hiện tại đây.
Tôi là Jesse đến từ Texas. Hãy xem nội dung khác của tôi và cho tôi biết cách tôi có thể giúp bạn trên hành trình trở thành nhà phát triển web.
