Console.log Là Gì

  -  

Chào các bạn, tui hết sức chào các bạn, hỡi những nhỏ người liên tiếp lôi tui ra để fix bug, fix từ cái bug chút éc đến chiếc bug khôn xiết to siêu khổng lồ. Bao gồm phải tui chiều các bạn quá, nên các bạn hư đúng không? nhưng mà tui thích cực ý =)). Tui biết, so với các bạn, tui rất “toẹt zời” =)). Nhưng không những mình tui đâu nha, mà những thành viên (method) không giống trong loại họ console của tui cũng tương đối rất là “toẹt zời” đấy, đỉnh của chóp đấy, demo đi. Bên dưới đây, tui sẽ tung ra cho các bạn biết và nắm rõ hơn về các thành viên trong cái họ tui. Cuộn màn hình xuống bên dưới một tí nào.

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

TẠI SAO DÒNG HỌ CONSOLE CỦA TUI LẠI TRỞ NÊN PHỔ BIẾN? (CONSOLE OBJECT)

Đầu tiên, tui xin quảng cáo tí xíu về cái họ của tui (Console Object). Dòng họ tui là 1 trong thành viên vào gia tộc JavaScript (ghê kinh chưa). Tất cả nhiệm vụ hỗ trợ quyền truy vấn vào bảng tinh chỉnh và điều khiển gỡ lỗi của trình để ý (Browser), khu vực các bạn có thể in ra các giá trị của các biến mà các bạn đã áp dụng trong mã của mình (nói chung là trong quá trình code, chúng ta có tạo trở thành để lưu giá chỉ trị. Thì nếu còn muốn biết giá bán trị của các biến kia nó như thế nào, đổi khác ra sao, bao gồm lỗi gì, có lưu ý gì không, bla bla,... Thì alo một cái. Nguyên mẫu họ công ty tui sẵn sàng giúp sức các bạn).

Tui chắc chắn rằng 99,99% chúng ta thường xuyên gọi tui ra nhằm in các giá trị vào bảng tinh chỉnh trình duyệt, nhưng lại tui chỉ là 1 trong những thành viên bé dại bé trong loại họ nhà tui thôi, các thành viên khác cũng khá là “pro” đấy, cứ điện thoại tư vấn ra đi, tui thấy các thành viên sót lại toàn ở trong nhà ngủ không hà, cho người ta hoạt động tí đi. Cuộn màn hình hiển thị xuống bên dưới một tí nữa nè, vào phần thiết yếu đây.

GIỚI THIỆU DÒNG HỌ

1. Console.log() (là tui đóa, em Út).

Nhiệm vụ hầu hết của tui là in ra quý giá được đưa tới bảng điều khiển. Ngẫu nhiên kiểu như thế nào cũng rất có thể truyền vào bên phía trong log() của tui như: string, array, object, boolean, v.v,... Tui biết tuốt á.

Ví dụ:

Các chúng ta truyền cho tui những giá trị như sau:

console.log("JavaScript");console.log(7);console.log(true);console.log(null);console.log(undefined);console.log(<1, 2, 3>);console.log(a: 1, b: 2, c: 3);Tui sẽ trả về công dụng cho các bạn như hình dưới nè:

*
Thấy tui huyền ảo chưa.

2. Console.error() (anh hai tui).

Anh hai của tui khôn cùng thích chửi và rất thích màu đỏ, giả dụ mã của chúng ta có lỗi là ổng chửi ngay với trang trí lên đoạn văn ổng chửi với color yêu đam mê của ổng. Mà các bạn đừng vượt lo lắng, ổng đang giúp các bạn đó, bởi ổng chửi đúng mà =)).

Ví dụ:

Truyền cho ổng dòng lỗi “Error found”: console.error("Error found");

Ổng chửi nè:

*
Sợ hông. Anh nhị tui hiền đức hà.

3. Console.warn() (anh ba tui).

Anh tía tui thì sẽ không chửi như anh hai đâu, cực tốt bụng với thích màu vàng. Ổng sẽ chú ý cho các bạn biết về một điều gì đó rất có thể sẽ xảy ra với mã code của chúng ta và trang trí dòng cảnh báo của ổng bằng màu sắc mà ổng thích. Phần đông lời chú ý của ổng cực kì có quý giá đấy.

Ví dụ:

Truyền cho ổng dòng lưu ý “Warning!”: console.warn("Warning!");

Và ổng sẽ đưa cảnh báo này lên bảng điều khiển cho các bạn:

*
Thấy anh cha tui gớm hôn =)).

4. Console.clear() (anh bốn tui).

Anh tư tui siêu ưa sạch sẽ và sẵn sàng chuẩn bị đá bay mọi rối ren như thông báo lỗi, cảnh báo, những kết quả: string, array, object,v.v,.., một nùi bên trên bảng điều khiển (bế tắc á, nhức mắt á). Alo ổng, ổng dọn sạch hết cho.

Ví dụ:

Các bạn chỉ cần gọi ổng ra như này: console.clear()

Ổng sẽ làm cho hết cho các bạn, với ổng sẽ trả lời cho chúng ta sau khi dọn dẹp ngừng “Console was cleared”:

*

“Em chỉ cần ngồi đó, cả nhân loại cứ nhằm anh lo.”

5. Console.time() và console.timeEnd() (anh Năm chị Năm tui).

Hai vợ ông chồng anh Năm chị Năm tui là một cặp trời sinh. Kết hợp với nhau vô cùng ăn ý đó. Bất cứ bao giờ các bạn có nhu cầu biết lượng thời gian dành cho một khối hoặc một hàm là bao nhiêu, các bạn hãy alo anh Năm chị Năm tui ra cùng truyền vào bên trong time() của anh ấy Năm tui một label, truyền vào bên trong timeEnd() của chị Năm tui một label, mà hãy nhớ là label truyền vào đến anh Năm chị Năm tui buộc phải giống nhau nha, rất khác nhau thì hai fan họ lạc mất nhau thì khổ lắm. Theo sản phẩm công nghệ tự như sau: Anh nằm trên, chị nằm dưới, và ở giữa sẽ là đoạn mã code mà lại các bạn muốn đo thời gian nhá (nghiêm cấm nghĩ về bậy bạ sống đây, tập trung chuyên môn đê bạn ei).

Xem thêm: Bảng Bổ Trợ Blitzcrank Sp Mùa 7, Bảng Bổ Trợ Blitzcrank Mùa 7

Ví dụ:

Đọc code phát âm ngay nè:

console.time("timer");const hello = function() console.log("Hello Console!");const bye = function() console.log("Bye Console!");hello(); // calling hello();bye(); // calling bye();console.timeEnd("timer");Khi anh Năm chị Năm tui chạm mặt nhau, họ sẽ cho mình biết đoạn mã bên phía trong đã tiến hành trong bao nhiêu lâu:

*

Hạnh phúc tởm chưa, thả tym đến họ đi

*
Thấy sao, ổn định hơm, đam mê rồi chứ gì =)).

7. Console.count() (anh Bảy tui).

Đếm, là nghề của anh ý Bảy tui. Khi call anh Bảy tui ra, các bạn truyền đến anh Bảy tui một label, ví dụ như như: một chuỗi cam kết tự làm sao đó, một phát triển thành “i” trong khoảng lặp, bla bla,... Thì anh Bảy tui đã đếm và cho chính mình biết mốc giới hạn anh Bảy tui được gọi với label mà các bạn đưa mang đến ảnh. Không truyền cũng được, anh Bảy không buồn đâu, anh Bảy đang mặc định mang default để làm label, không bi đát gì mấy.

Ví dụ:

Trong vòng lặp nè:

for(let i=0; i3; i++) console.count(i);Anh Bảy vẫn đếm cùng xuất ra kết quả, label tại chỗ này sẽ là biến hóa “i”:

*
Ví dụ trên là vòng lặp, “i” tăng đột biến từ 0 đến 2, phải anh Bảy chỉ đếm được một lần cho mỗi giá trị “i” thôi.

Thêm 1 ví dụ nữa nè:

function sayHello(name) console.count() console.log(name)sayHello("Indrek")sayHello("William")sayHello("Kelly") Lần này không truyền label mang đến anh Bảy, coi anh Bảy đếm nè:

*
Anh Bảy sử dụng default nhằm đếm khi các bạn không truyền gì cho hình ảnh hết, thấy đơn độc chưa.

“Cuộc vui nào thì cũng đến lúc yêu cầu tàn”.

8. Console.group() & console.groupEnd() (anh Tám chị Tám tui).

Đây đây, lại thêm một cặp vợ ông xã ăn ý khít khìn khịt với nhau nữa đây, anh Tám chị Tám. Khi chúng ta làm bài toán với các tập đúng theo hoặc tài liệu được liên kết, hãy alo cho anh Tám chị Tám tui, anh Tám chị Tám tui vẫn giúp các bạn tổ chức đầu ra bằng phương pháp liên kết trực quan lại các thông báo liên quan với nhau. Hoàn toàn có thể đặt tên đến group nhằm dễ riêng biệt group này với group kia bằng cách truyền cho anh Tám tui một label (thường là chuỗi) mang lại tường minh hơn, hoặc không truyền cũng được. Vì sẽ có được một vài trường hòa hợp các các bạn sẽ tạo ra không hề ít nhóm để thống trị nên đề xuất đặt thương hiệu vậy thôi. Và cũng giống như anh Năm chị Năm tui: Anh nằm trên, chị ở dưới, và ở giữa sẽ là đoạn mã code nhưng các bạn muốn gom đội nhá. Hữu ích khi làm việc với dữ liệu dựa trên mối quan tiền hệ.

Ví dụ:

Ví dụ này còn có truyền mang lại anh Tám một label “group1 nè”:

console.group("group1");console.warn("warning");console.error("error");console.log("I belong to lớn a group");console.groupEnd();console.log("I dont belong khổng lồ any group");Kết trái anh Tám chị Tám tui trả về nè:

*

Thêm một lấy ví dụ như nữa cho nó ngày tiết nè:

Không thèm truyền label luôn:

console.log("This is the first level");console.group();console.log("Level 2");console.group();console.log("Level 3");console.warn("More of màn chơi 3");console.groupEnd();console.log("Back to level 2");console.groupEnd();console.log("Back to the first level");Và đây là kết quả:

*
Đỉnh chưa, thụt đầu dòng cho từng group con bên phía trong luôn kìa. Chú ý đã chưa =)).

Và, tui xin cám ơn chúng ta đã dành thời gian để đọc, và lắng nghe tui nhắc về cuộc đời và loại họ bên tui. Để đáp lại cảm tình đó, tui bonus thêm nè =)). Cuộn màn hình xuống xíu đê.

BONUS: TẠO KIỂU mang đến VALUE TRÊN BẢNG ĐIỀU KHIỂN.

Khoái tức khắc chứ gì =)).

Dễ ợt hà. Bạn chỉ việc viết một chuỗi css, lưu giữ chuỗi đó vào một trong những biến với truyền trở thành đó vào địa điểm của tham số thứ 2 cho tui là được.

Ví dụ nè:

const spacing = "10px";const styles = `padding: $spacing; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em;`;console.log("%cI am a styled log", styles);Và đó là kết quả:

*
Tèn ten, thấy cái chữ “I am a styled log” không, khứa như thế nào style xấu vượt vậy. Cơ mà chú ý bảng điều khiển của chính mình so với chúng ta thì mình xịn xò hẳn ra rò rỉ =)).

TỔNG KẾT

Các các bạn thấy không, loại họ đơn vị console của tui ai cũng “pro” hết á. Có thể giúp cho chúng ta rất nhiều trong việc gỡ lỗi mã. Hãy lưu giữ bài đó lại và bước đầu gọi cho từng nhà anh chị em tui nhằm gỡ lỗi với trang trí mang đến bảng tinh chỉnh trình chuyên chú nhà mình sinh động hơn nhé. Tui hy vọng những share của tui là hữu ích cho những bạn.

Xem thêm: Cách Lên Đồ Zed Mùa 7 - Cách Lên Đồ, Bảng Ngọc Bổ Trợ Zed Tốc Chiến

Hạn chế hotline tui lại đi, tui gầy lắm rồi. Cả nhà nhà tui ăn uống Tết dài hạn + suy nghĩ địch covid lớn lao nu rồi tề =)).

Tài liệu tham khảo:

https://js.plainenglish.io/stop-using-console-log-in-javascript-d29d6c24dc26https://vhpi.vn/p/console-tricks-in-javascript-co-the-ban-chua-biet-L4x5xGjalBM