Lập trình javascript chắc rằng không một ai còn lạ gì console.log. Từ phần nhiều bài helloWorld trước tiên các bạn sẽ được làm quen thuộc cùng với nó như là phần lớn hàm print, log trong những ngữ điệu khác.

Bạn đang xem: Console.log là gì

Nhưng liệu console chỉ có mỗi cách thức log hay còn gì khác thú vui nữa không? Trong nội dung bài viết này bọn họ sẽ thuộc tìm hiểu phần nhiều phương thức khác của console cùng các bạn sẽ thấy rằng nó cũng tương đối thú vui cùng manh mẽ, chứ đọng không hẳn chỉ từng tính năng in text ra console.

Console Object

Nlỗi các bạn đang biết, console là object dùng để truy cập giao diện console của browser hoặc cli, được hỗ trợ bởi browser hoặc Nodejs.

Console có không ít thủ tục chứ đọng không những có mỗi thủ tục log. cũng có thể liệt kê ra các cách làm sau đây:

Console.assert()Console.clear()Console.count()Console.debug()Console.dir()Console.dirxml()Console.error()Console.exception()Console.group()Console.groupCollapsed()Console.groupEnd()Console.info()Console.log()Console.profile()Console.profileEnd()Console.table()Console.time()Console.timeEnd()Console.timeStamp()Console.trace()Console.warn()Hiển thị trở thành ra console

Thao tác này vượt không còn xa lạ rồi, đơn giản và dễ dàng là hiển thị quý hiếm của một hoặc những vươn lên là ra console, hoàn toàn có thể là text, number, array, object, v.v..

Các cách làm được hỗ trợ là console.log, console.error, console.info, console.warning.

Cách thực hiện với chức năng của thủ tục ko khác nhau nhiều, chỉ là ngôn từ xuất ra console được style khác biệt, và được browser cung cấp filter.


*

Hiển thị một biểu thức đơn

console.log('Hello console');console.error(msg: 'Hello console');console.info(<'Hello', 'console'>);Kết quả

Hello consolemsg: "Hello console"<"Hello", "console">

Hiển thị những biểu thức

console.log('Hello', 'world');console.log('Hello', <'w', 'o', 'r', 'l', 'd'>);Kết quả cũng tương tự nlỗi sống trên, nhưng mà cố vì mỗi biểu thức trên một mẫu ngày giờ nó đang hiển thị những kết quả của các biểu thức trên cùng một mẫu. Đối với object, array thì vẫn hệt như gọi riêng, vẫn sẽ có tác dụng thu gọn, không ngừng mở rộng.

Sử dụng string format

Tương trường đoản cú nhỏng hàm printf vào c++, các hàm log cũng cung cấp format cùng với cú pháp tương tự:

for (var i=0; i console.log("Hello, %s. You've sầu called me %d times.", "Bob", i+1);}Kết quả

Hello, Bob. You've called me 1 times.Hello, Bob. You've sầu called me 2 times.Hello, Bob. You've sầu called me 3 times.Hello, Bob. You've sầu called me 4 times.Hello, Bob. You've sầu called me 5 times.

Style text bởi css

Nếu chúng ta msinh hoạt console sống facebook.com thì các bạn sẽ thấy thông báo của họ gồm red color, ko y như các ví dụ nảy giờ đồng hồ họ vẫn làm cho. Để làm được điều ấy thì cẩn áp dụng %c vào chuỗi và thực hiện code css nghỉ ngơi tmê man số máy nhị để tư tưởng style:

console.log("%cStop!", "color: red; font-size: 50px; font-weight: bold; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);");Kết quả sẽ như sau, nhưng chúng ta cũng có thể demo nó ngay lập tức vào này:


*

*

Thật hay đúng không ạ. Nhưng vẫn không hết đâu, hãy liên tục hiểu về các hàm cung ứng nhiều hơn thế nữa về debug, đối chiếu perfomance nào.

Group những dòng

Pmùi hương thức console.group với console.groupEnd dùng để gom đội các mẫu lại với nhau. Hãy tưởng tượng nếu như khách hàng đã debug những hàm lồng lên nhau cùng trường hợp các loại thông báo ko được group lại thì bọn chúng sẽ khá khó nhìn, khó khăn rõ ràng. Ngày xưa mình debug bằng cách log ra các chiếc --------------------------- nhằm minh bạch, nhưng mà vẫn khôn cùng rối. Phương thức group không chỉ giúp phân biệt bên cạnh đó hỗ trợ thu gọn gàng những group.

Xem thêm: For Your Reference Nghĩa Là Gì, Cách Sử Dụng Chúng, Sử Dụng Fyi Khi Nào Cho Chuyên Nghiệp

Hãy thử chạy những mẫu sau đây trong console:

console.log("This is the outer level");console.group();console.log("Level 2");console.group();console.log("Level 3");console.warn("More of level 3");console.groupEnd();console.log("Baông chồng to cấp độ 2");console.groupEnd();console.debug("Bachồng khổng lồ the outer level");Kết quả


*

*

Tính thời gian

Vậy còn nếu như bạn có nhu cầu đếm thời gian giữa hai chiếc code thì sao? cũng có thể ứng dụng để tính thời gian chạy của code, thời gian để kết thúc một thao tác như thế nào đó, ví như tính thời gian vừa đủ cần có để nhập một cái size làm sao kia. Pmùi hương thức console.time và console.timeEnd để giúp đỡ chúng ta.

Hai cách thức thừa nhận vào một tđắm đuối số nhất là label Gọi console.time(

console.time("answer time");alert("Click lớn continue");console.timeEnd("answer time");Lưu ý là nếu như bạn sử dụng thủ tục này nhằm tính thời gian load tài nguyên từ bỏ server, ví dụ như ajax, lazy load image thì thời hạn đếm của hàm này là từ cơ hội request cho tới thời hạn hoàn tất dấn body toàn thân. Còn thời hạn vào thẻ Network chỉ cần thời hạn browser nhận được header nhưng thôi.

Stachồng traces

Stachồng trace để biết staông chồng knhì báo của hàm thì áp dụng cách thức console.trace

function foo() function bar() console.trace(); bar();foo();kết quả

barfoo

Đếm số

đa phần khi rất cần phải đếm chu kỳ hotline một đoạn code làm sao kia. Nếu bạn từng giống bản thân, sử dụng một phát triển thành cục bộ, rồi đặt cái code tăng trở thành toàn thể vào khu vực buộc phải đếm thì đã tới khi quên từ thời điểm cách đây đi. Pmùi hương thức console.count đã làm việc đếm kia.

Phương thức này thừa nhận vào một trong những tmê mẩn số là label, và chỉ đếm riêng rẽ mang đến từng label đó, dựa vào vậy chúng ta cũng có thể đếm đồng thời nhiều label khác nhau:

var user = "";function greet() console.count(); return "hi " + user;user = "bob";greet();user = "alice";greet();greet();console.count();Kết quả

1231Hoặc áp dụng label:

var user = "";function greet() console.count(user); return "hi " + user;user = "bob";greet();user = "alice";greet();greet();console.count("alice");Kết quả

"bob: 1""alice: 1""alice: 2""alice: 3"

Ghi lại CPU profile

Kiểm tra profile có thể giúp cho bạn về tối ưu hóa code dễ hơn … một ít. Mình thì không rành về mục này, nên có thể viết sơ qua thôi. Nếu bạn gồm kinh nghiệm tay nghề, xin dựa vào bạn viết một bài xích với họ đã sản xuất 12bits.

function animationUI() console.profile('Animating');// Animate something...console.profileEnd();

Hiển thị array object dạng table

Nếu console.log và console.dir góp hiển thị object dạng collapse thì console.table nlỗi cái tên của nó, hiển thị tài liệu dạng table. Giúp bạn đọc dữ liệu dễ dàng rộng. Nó dìm hai tsi số, tmê mẩn số trước tiên là dữ liệu bắt buộc hiển thị cùng tham mê số máy nhị là array cất danh sách các nằm trong tính sẽ được hiển thành thị các cột.

var data = < first_name: 'Matt', last_name: 'West', occupation: 'Programmer', first_name: 'Vince', last_name: 'Vaughn', occupation: 'Actor', first_name: 'Larry', last_name: 'Page', occupation: 'CEO' >;console.table(data, <'first_name'>);kết quả


Lời kết

do vậy, qua nội dung bài viết đơn giản này bọn họ sẽ gọi thêm các thủ tục rất hữu dụng của console. Nó để giúp bài toán debug của bọn họ đơn giản cùng bình yên hơn. Thử tượng tượng coi vẫn thế nào trường hợp chúng ta cần sử dụng bí quyết count như bản thân nói ở phần bên trên và tiếp nối lại quên xóa phần nhiều nơi debug đi.

Cũng điều đó, nó hoàn toàn có thể giúp họ debug kết quả rộng bằng các cách làm trace , time cùng protệp tin.

Mình cũng băn khoăn các về vấn đề buổi tối ưu, vì chưng vậy nếu bạn bao gồm kinh nghiệm tối ưu code bởi các cách tiến hành console này thì nên viết với gửi về đến 12bits nhé.

Bonus

Developer thường xuyên yêu thích dark theme. Và chúng ta có thể chỉnh dark theme đến Chrome Devtools. Hãy vào setting vào devtools cùng ở trong phần theme, bạn chỉnh là thành dark:

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *