Console Log Trong Javascript | Cùng Chuyên Mục:

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

Khoái liền chứ gì =)).

Dễ ợt hà. Bạn chỉ cần viết một chuỗi css, lưu chuỗi đó vào một biến và truyền biến đó vào vị trí 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à đây là kết quả:

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

Console.trace and Console.assert


console.trace

đơn giản là in ra một chuối các dấu vết (trace) từ khi nó được gọi đến.

Hãy tưởng tượng là đang tạo ra một thư viện JS library, và muốn thông báo cho người dùng lỗi xuất hiện ở đâu.


console.assert

cũng giống như

console.trace

nhưng nó sẽ in ra lỗi nếu không vượt qua được điều kiện đưa ra.

Code:


function lesserThan (a,b) { console.assert(a < b, {"message": "a is not lesser than b", "a": a, "b": b}); } lesserThan(6,5); console.trace("End")


**Kết quả: **

GIỚI THIỆU DÒNG HỌ

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

Nhiệm vụ chủ yếu của tui là in ra giá trị được chuyển tới bảng điều khiển. Bất kỳ kiểu nào cũng có thể truyền vào bên trong log() của tui như: string, array, object, boolean, v.v,… tui biết tuốt á.

Ví dụ:

Các bạn truyền cho tui các 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ề kết quả cho các bạn như hình dưới nè:

Thấy tui vi diệu chưa.

console.error() (anh Hai tui).

Anh Hai của tui rất thích chửi và cực thích màu đỏ, nếu mã của các bạn có lỗi là ổng chửi ngay và trang trí lên đoạn văn ổng chửi với màu sắc yêu thích của ổng. Mà bạn đừng quá lo lắng, ổng đang giúp các bạn đó, vì ổng chửi đúng mà =)).

Ví dụ:

Truyền cho ổng cái lỗi “Error found”:

console.error('Error found');


Ổng chửi nè:

Sợ hông. Anh Hai tui hiền khô hà.

console.warn() (anh Ba tui).

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

Ví dụ:

Truyền cho ổng dòng cảnh báo “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 Ba tui ghê hôn =)).

console.clear() (anh Tư tui).

Anh Tư tui rất ưa sạch sẽ và sẵn sàng đá bay mọi rối ren như thông báo lỗi, cảnh báo, các kết quả: string, array, object,v.v,.., một nùi trên bảng điều khiển (bế tắc á, đau 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 hết cho các bạn, và ổng sẽ trả lời cho các bạn sau khi dọn dẹp xong “Console was cleared”:

“Em chỉ cần ngồi đó, cả thế giới cứ để anh lo.”

console.time() & console.timeEnd() (anh Năm chị Năm tui).

Hai vợ chồng anh Năm chị Năm tui là một cặp trời sinh. Kết hợp với nhau rất chi là ăn ý đó. Bất cứ khi nào các bạn muốn 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 và truyền vào bên trong time() của anh Năm tui một label, truyền vào bên trong timeEnd() của chị Năm tui một label, mà nhớ là label truyền vào cho anh Năm chị Năm tui phải giống nhau nha, không giống nhau thì hai người họ lạc mất nhau thì khổ lắm. Theo thứ tự như sau: Anh nằm trên, chị nằm dưới, và ở giữa sẽ là đoạn mã code mà các bạn muốn đo thời gian nhá (nghiêm cấm nghĩ bậy bạ ở đây, tập trung chuyên môn đê bạn ei).

Ví dụ:

Đọc code hiểu 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 gặp nhau, họ sẽ cho bạn biết đoạn mã bên trong đã thực hiện trong bao nhiêu lâu:

Hạnh phúc ghê chưa, thả tym cho họ đi

console.table() (anh Sáu tui).

Anh Sáu tui chỉnh chu cực kỳ, thay vì các bạn phải đọc một giá trị trả về là array hay một object nào đó một cách khô khan và rập khuôn .Thì chính anh Sáu, anh Sáu tui sẽ vẽ cho các bạn một cái bảng trên bảng điểu khiển luôn, ảnh sẽ cố gắng làm sao cho nó chỉnh chu và dễ đọc nhất cho các bạn. Nhưng ảnh chỉ vẽ cho các giá trị là array hoặc object thôi nha, nhìn vậy thôi mà cũng biết lựa lắm.

Ví dụ:

Các bạn đưa cho ảnh một object như đoạn code dưới:


console.table({a: 1, b: 2, c: 3});


Coi anh Sáu tui vẽ nè:

Thấy sao, ổn hơm, thích rồi chứ gì =)).

console.count() (anh Bảy tui).

Đếm, là nghề của anh Bảy tui. Khi gọi anh Bảy tui ra, các bạn truyền cho anh Bảy tui một label, ví dụ như: một chuỗi ký tự nào đó, một biến “i” trong vòng lặp, bla bla,… thì anh Bảy tui sẽ đếm và cho bạn biết số lần anh Bảy tui được gọi với label mà các bạn đưa cho ảnh. Không truyền cũng được, anh Bảy không buồn đâu, anh Bảy sẽ mặc định lấy default để làm label, không buồn gì mấy.

Ví dụ:

Trong vòng lặp nè:


for(let i=0; i<3; i++){ console.count(i); }


Anh Bảy sẽ đếm và xuất ra kết quả, label ở đây sẽ là biến “i”:

Ví dụ trên là vòng lặp, “i” tăng dần từ 0 đến 2, nên anh Bảy chỉ đếm được 1 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 cho anh Bảy, coi anh Bảy đếm nè:

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

“Cuộc vui nào cũng đến lúc phải tàn”.

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

Đây đây, lại thêm một cặp vợ chồng ăn ý khít khìn khịt với nhau nữa đây, anh Tám chị Tám. Khi các bạn làm việc với các tập hợp hoặc dữ 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 sẽ giúp các bạn tổ chức đầu ra bằng cách liên kết trực quan các thông báo liên quan với nhau. Có thể đặt tên cho group để dễ phân 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) cho tường minh hơn, hoặc không truyền cũng được. Vì sẽ có một vài trường hợp các bạn sẽ tạo ra khá nhiều nhóm để quản lý nên cần đặt tên vậy thôi. Và cũng giống như anh Năm chị Năm tui: Anh nằm trên, chị nằm dưới, và ở giữa sẽ là đoạn mã code mà các bạn muốn gom nhóm nhá. Hữu ích khi làm việc với dữ liệu dựa trên mối quan hệ.

Ví dụ:

Ví dụ này có truyền cho anh Tám một label “group1 nè”:


console.group('group1'); console.warn('warning'); console.error('error'); console.log('I belong to a group'); console.groupEnd(); console.log('I dont belong to any group');


Kết quả anh Tám chị Tám tui trả về nè:

Thêm một ví dụ nữa cho nó máu 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 level 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 trong luôn kìa. Nhìn đã chưa =)).

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

TỔNG KẾT

Các bạn thấy không, dòng họ nhà console của tui ai ai cũng “pro” hết á. Có thể giúp cho các bạn rất nhiều trong việc gỡ lỗi mã. Hãy lưu bài này lại và bắt đầu gọi đến từng nhà anh chị tui để gỡ lỗi và trang trí cho bảng điều khiển trình duyệt nhà mình sinh động hơn nhé. Tui hy vọng những chia sẻ của tui là hữu ích cho các bạn.

Hạn chế gọi tui lại đi, tui ốm lắm rồi. Anh chị nhà tui ăn Tết dài hạn + nghĩ địch covid mập ú nu rồi kìa =)).

Tài liệu tham khảo:

https://js.plainenglish.io/stop-using-console-log-in-javascript-d29d6c24dc26 https://viblo.asia/p/console-tricks-in-javascript-co-the-ban-chua-biet-L4x5xGjalBM

All rights reserved

Lệnh console.log trong Javascript

Hôm nay codehow sẽ hướng dẫn bạn cách sử dụng lệnh console.log, đây là lệnh rất hữu ích, nó giúp chúng ta debug trong quá trình làm việc với javascript.

Nếu bạn là dân lập trình và đang sử dụng Javascript thì chắc chắn là phải biết lệnh console này. Công dụng của nó là in giá trị nào đó vào trong ô console của trình duyệt. Chúng ta thường sử dụng để debug chương trình, xem giá trị các biến để dự đoán được đang lỗi ở vị trí nào.

What is the Console?

The Javascript console là một tính năng được xây dựng trong các trình duyệt ngày nay, nó đưa ra các công cụ giúp lập trình kiểm tra rõ ràng trên các giao diện. Nó cho phép lập trình viên:

• Nhìn thấy những lỗi (errors) hay cảnh báo (warnings) xảy ra trên một trang web.
• Tương tác với trang web sử dụng Javascript commands.
• Gỡ lỗi (Debug) ứng dụng web ngay trên trình duyệt của mình
• Kiểm tra và nghiên cứu các hoạt động của network

Đơn giản là nó trao quyền cho người dùng, lập trình viên thao tác với Javascript ngay trên trình duyệt.

Console.table

Việc hiển thị một dữ liêu mảng JSON lớn thật là quá khó khăn. Từ khi t khám phá ra

console.table

, cuộc sống khó khăn của t đã thay đổi =)).

console.table

cho phép bạn trình bày cấu trúc bên trong dưới dạng bảng, nơi chúng ta có thể định danh lại tên các cột, trường

Code:


const typeOfConsole = [ {name: 'log', type: 'standard'}, {name: 'info', type: 'standard'}, {name: 'table', type: 'wow'} ] console.table(typeOfConsole) const mySocial = { facebook: true, linkedin: true, flickr: true, instagram: true, VKontaktebadoo: false } console.table(mySocial, ["Socials", "I'v an account"])


Kết quả:


console.table

làm chúng ta yêu việc check dữ liệu file JSON hơn =)).

Cú pháp console.log() trong javascript

Lệnh console.log() có cú pháp là

console.log(value)

, trong đó value là một biến hoặc một giá trị mà bạn muốn in ra.

var website = ‘freetuts.net’; console.log(website);

Kết quả:

var websites = [“freetuts.net”, “freetuts.net”, “course.freetuts.net”, “qa.freetuts.net”]; console.log(websites);

Kết quả:

console.log(“Chào mừng bạn đến với freetuts.net”);

Kết quả:

var info = { website : “freetuts.net”, email : “[email protected]”, address : “Buôn Ma Thuột, ĐăkLăk” }; console.log(info);

Kết quả:

Lời kết: Như vậy hàm

console.log()

sẽ in ra tất cả các giá trị của một biến nên bạn dễ dàng debug phải không nào. Mình thì rất hay sử dụng console.log để xem kết quả mà ajax trả về có đúng với dữ liệu mong muốn hay không.

console.log() trong JavaScript

Trên các trình duyệt hiện nay đều có bảng điều khiển web (web console) để giúp chúng ta debugging hay gỡ lỗi. Hôm nay chúng ta sẽ tìm hiểu về method

console.log()

trong Javascript được sử dụng để hiện các thông tin theo ý muốn của chúng ta tới web console.


let number = 29; console.log(29); // 29


Trên web console, vd như chrome sẽ hiện lên kết quả là 29. Để truy cập web console của chrome các bạn nhấn F12 hoặc ctrl + shift + J.

Để thao tác nhanh với chrome, mình có tổng hợp một số phím tắt các bạn có thể xem tại bài viết: Phím tắt Chrome cực hay mà Web Developer nên biết.

Sau khi sử dụng phím trên thì chúng ta cùng thao tác trên web console này thử nhé.

Trên web console chúng ta có thể thực hiện viết các đoạn mã Javascript rất tiện luôn 😄.

console.log() Syntax

Cú pháp của

console.log()

cũng rất đơn giản, các bạn chỉ cần truyền giá trị cần in ra console vào

console.log()

.


console.log(truyền giá trị cần in vào đây);


Ví dụ

1. In ra console dòng chữ
   
Học JS cơ bản


Chúng ta sẽ truyền string ở trên vào

console.log

, hoặc các bạn có thể gán dòng chữ trên vào một biến.


Cách 1: console.log("Học JS cơ bản"); // Chuỗi phải đặt trong "" hoặc '' Cách 2: let text = "Học JS cơ bản"; console.log(text);


Output của chúng ta sẽ được như sau:


Học JS cơ bản


1. Tính tổng và in kết quả


const number1 = 10; const number2 = 20; Cách 1: console.log(number1 + number2); // 30 Cách 2: const sum = number1 + number2; console.log(sum); // 30


Như bạn có thể thấy từ các ví dụ trên, method

console.log()

giúp chúng ta dễ dàng xem giá trị của một biến. Đó là lý do tại sao nó thường được sử dụng để testing/debugging code.

Đối tượng console cũng có nhiều phương thức khác với

console.log()

vd như

console.table()

. Mình đã viết một bài giới thiệu về method này. Các bạn có thể đọc bài viết ở đây: console.table() javascript.

🎨 Nếu muốn style console bạn có thể tham khảo bài viết: Style console.log sử dụng CSS bạn đã biết chưa?.

Hy vọng bài viết giúp ích cho các bạn. Chúc các bạn học tốt 😁😁😁

Sử dụng Javascript console một cách hiệu quả !!

Bài đăng này đã không được cập nhật trong 5 năm

Giống như lập trình viên web, việc debug code là rất quan trọng.

Khi chúng ta nghĩ đến

console

, điều đầu tiên xuất hiện trong đầu chính là

console.log

đúng không ?? Nhưng thật ra javascript còn vượt xa cả trí tưởng tượng của bạn. Và bây giờ chúng ta cùng đi tìm hiểu một vài bí mật của

console

nhé ~~.

Console.group

Phương thức này cho phép bạn gom nhóm lại các

console.log

con.

Cú pháp của phương thức này cũng rất đơn giản:

• Đầu tiên phải đánh dấu bắt đầu của group, thêm vào trên cùng
  
console.group()

  .
• Tạo thật nhiều
  
console.log

  bạn muốn gom nhóm lại.
• Và cuối cùng là đánh dấu kết thúc của group, thêm
  
console.groupEnd()

  vào cuối cùng của nhóm.

Code:


function doSomething(obj) { console.group('doSomething Profile'); const _data = new Date() console.log('evauating data: ', _data); const _fullName = `${obj.firstName} ${obj.lastName}` console.log('fullName: ', _fullName); const _id = Math.random(1) console.log('id: ', _id); console.groupEnd() } doSomething({"firstName": "Riccardo", "lastName": "Canella"});


Kết quả:

Bạn thấy đấy, các kết quả đều được gom trong nhóm

doSomething Profile

rồi =)).

Một số câu lệnh console

Console object có khá nhiều phương thức, tuy nhiên mình chỉ sẽ giới thiệu cho bạn những phương thức mà được sử dụng nhiều thôi nhé.(Những ví dụ minh họa trong hình đề được sử dụng trên cửa sổ lệnh console của trình duyệt chrome, để mở nó bạn sử dụng tổ hợp phím

ctrl + shift + I

và chọn vào tab console nhé).

2.1 console.log()

Đây là câu lệnh được sử dụng nhiều nhất, nó cũng giúp ích cho việc debug rất nhiều. Không một ai code JavaScript mà chưa từng sử dụng lệnh này.

Với lệnh

console.log()

nó sẽ in ra cửa sổ lệnh console các giá trị ở dạng

string

,

number

hay

object

mà ta truyền vào nó. Phương thức này rất có ích khi nó có thể giúp ta xem được kết quả trả về của một function hay một tính toán nào đó để giúp ta có biết được có đúng hay không, hoặc cũng có thể giúp ta xem được data trả về có những gì khi ta lấy data từ server, …Ví dụ:

(Để xuống dòng trong cửa sổ console của trình duyệt thì bạn nhất tổ hợp phím

shift + enter

nhé.)

Một cái hay của lệnh

console.log()

là ta có thể set CSS cho phần text mà ta muốn hiển thị ra, như hình bên dưới.

Trông khá thú vị phải không nào. Facebook cũng dùng cách này để cảnh báo người dùng khi sử dụng công cụ devtool của trình duyệt đấy.

2.2 console.info(), console.warn(), console.error()

Những câu lệnh này về cơ bản thì nó cũng không khác gì so với

console.log()

. Tuy nhiên với từng câu lệnh trên nó sẽ in ra các giá trị với từng màu sắc khác nhau cũng như các ký tự khác nhau như hình:

2.3 console assert()

Câu lệnh này khá giống với

console.error()

, tuy nhiên nó khác ở điểm

console.assert()

nó nhận 2 tham số đầu vào gồm một biểu thức

boolean

và một

message

được in ra nếu như biểu thức

boolean

đó trả về giá trị

false


2.4 console.clear()

Câu lệnh này được sử dụng để clear (dọn dẹp) hết tất cả những nội dung có trên cửa sổ lệnh console.

code:

Trước khi clear:

Sau khi nhấn button Clear Console:

2.5 console.dir()

Với lệnh này ta có thể in ra DOM, truyền các object bình thường thì nó cũng có thể in ra được như

console.log()

. Tuy nhiên nếu với DOM thì sẽ khác.

Với

console.log()

thì nó sẽ in DOM ra dưới dạng HTML như hình:

Còn với lệnh

console.dir()

, nó sẽ in ra dưới dạng một object với các thuộc tính là các element nằm bên trong DOM.

2.6 console.group()

Câu lệnh này rất giúp ích cho việc debug, với

console.log()

nó sẽ in ra toàn bộ kết quả trên cửa sổ console, đôi khi chúng ta cảm thấy khá là rối mắt với những kết quả trả về rất nhiều.

Với

console.group()

nó sẽ in ra kết quả có tổ chức hơn bằng cách gom các kết quả thành các block một cách có tổ chức. Nó sẽ gom các câu lệnh sau nó cho đến khi gặp

console.groupEnd()

thì sẽ dừng lại mà back ra lại một level.

Bạn có thể xem ví dụ như hình dưới cho dễ hình dung nhé.

2.7 console.table()

Nếu bạn vẫn thấy giá trị được in ra từ

console.group()

vẫn chưa đủ trực quan và đỡ rối mắt thì

console.table()

sẽ khắc phục được việc này. Như tên gọi, nó sẽ in kết quả ra cửa sổ console dưới dạng bảng. Ta có thể sử dụng nó để in các data ở dạng: object, array, array of object, array of arrays.

Một ví dụ về

console.group()

với data là một object:

Giờ nhìn khá là rõ ràng và tường minh hơn rồi nhỉ? Với các data có kiểu khác các bạn tự khám phá thêm nhé.

2.8 console.time()

Để muốn biết thời gian chạy của một đoạn code bất kỳ mất bao lâu thì bạn có thể dùng lệnh này. Để chạy được thì bạn cần đặt đoạn code của mình ở giữa hai lệnh

console.time()

và

console.timeEnd()

.Ngoài ra nếu bạn muốn in ra thời gian chạy của một đoạn code bất kỳ mà bạn muốn nữa thì có thể dùng lệnh

console.timeLog()

bên trong cặp lệnh

console.time()

và

console.timeEnd()

.

Bạn có thể xem ví dụ dưới để cho dễ hiểu hơn nhé:

Console.log trong Javascript là gì?

Console.log là một hàm của Javascript, được sử dụng để debug / kiểm tra / xem giá trị của một biến trong Javascript. Công dụng của console.log là show ra giá trị của một biến, dù biến đó thuộc kiểu dữ lliệu gì đi nữa thì vẫn được hiển thị ở ô console trong hộp thoại Inspect Element.

Bài viết này được đăng tại [free tuts .net]

Giới thiệu về console

Console là một bảng điều khiển dành cho việc debug của các nhà phát triển, nó được tích hợp vào trong trình duyệt từ thuở sơ khai. Thuở ban đầu, nó được biết như là một phương tiện để báo lỗi cho các nhà phát triển.

Tuy nhiên, với sự phát triển của công nghệ dẫn đến trình duyệt cũng được phát triển hơn so với trước kia thì khả năng của nó cũng dần tăng lên rất nhiều; chẳng hạn như tự động ghi lại nhật ký thông tin như: network requests, network responses, security errors hay warnings.Dưới đây là ví dụ về phần network request và network responses của trang zingmp3, bao gồm các thông tin như: số lượng request, thời gian gửi, thời gian nhận, dung lượng transferred, …

Để xem được data mà một api trả về ta click vào một request api bất kỳ chọn tab Response hoặc Preview như hình, đây là phần data trả về của api keyword search.

Có một số cách để JavaScript của một trang web kích hoạt được các câu lệnh khác nhau và hiển thị ra console dành cho việc debug. Các câu lệnh này đều được chứa trong một console object có sẵn trên hầu hết các trình duyệt.

Vậy các câu lệnh đó là câu lệnh nào? mời bạn đến với phần tiếp theo nhé.

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 PR tí xíu về dòng họ của tui (Console Object). Dòng họ tui là một thành viên trong gia tộc JavaScript (ghê ghê chưa). Có nhiệm vụ cung cấp quyền truy cập vào bảng điều khiển gỡ lỗi của trình duyệt (Browser), nơi các bạn có thể in ra các giá trị của các biến mà các bạn đã sử dụng trong mã của mình (nói chung là trong quá trình code, các bạn có tạo biến để lưu giá trị. Thì nếu muốn biết giá trị của các biến đó nó như thế nào, thay đổi ra sao, có lỗi gì, có cảnh báo gì không, bla bla,… thì alo một cái. Nguyên dòng họ nhà tui sẵn sàng giúp đỡ các bạn).

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

Cùng chuyên mục:

Các kiểu dữ liệu trong Javascript (kiểu cơ bản đủ dùng)

Dù trong thực tế hay trong lập trình thì đều có các kiểu dữ liệu.…

Khai báo biến trong Javascript bằng từ khóa var và let

Biến là một khái niệm trừu tượng, nó là kiến thức …

Javascript là gì? Javascript có khả năng gì?

Ngôn ngữ Javascript phát triển rất mạnh trong những năm gần đây, nhất là …

Tích hợp Javascript vào Website

Bước đầu tiên để học Javascript là bạn hãy tự mình cài đặt một chương…


console.log()

là câu lệnh huyền thoại dành cho việc debug

Javascript

. Nhưng còn có nhiều câu lệnh khác giúp bạn có thể debug tốt hơn hoặc trí ít cũng giúp bạn có một trải nghiệm mới mẻ hơn khi debug

javascript


Trường hợp cơ bản nhất của việc show log trong javascript là hiển thị một chuỗi

console.log(‘Is this working?’);

Tiếp theo đến việc hiển thị một object

const foo = { id: 1, verified: true, color: ‘green’ }; const bar = { id: 2, verified: false, color: ‘red’ };

Khi hiển thị trong console sẽ như sau

Bạn có thể thấy, tuy đã hiển thị được 2 object, nhưng không có tên biến hiển thị cùng. Muốn biết được tên biến thì cần phải click vào nó. Điều này có thể được giải quyết bằng cách sử dụng log như sau

console.log({ foo, bar });

Khi đó ta sẽ nhìn được tên biến tương ứng với data của nó và làm giảm số lượng dòng console.log().

Ở ví dụ trên, chúng ta có cách còn tốt hơn để hiển thị biến một cách dễ đọc hơn. Khi bạn cần log những biến có cùng thuộc tính hoặc một mảng các đối tượng, thì việc dùng

console.table()

sẽ thật tuyệt vời

console.table({ foo, bar})

Được sử dụng khi bạn muốn nhóm hoặc lồng các log có liên quan đến nhau để dễ đọc hơn.

Nó cũng có thể được sử dụng để thấy rõ phạm vi của từng câu

log()


Ví dụ bạn log thông tin một người dùng

10 11 12

console.group(‘User Details’); console.log(‘name: John Doe’); console.log(‘job: Software Developer’); // Nested Group console.group(‘Address’); console.log(‘Street: 123 Townsend Street’); console.log(‘City: San Francisco’); console.log(‘State: CA’); console.groupEnd(); console.groupEnd();

Bạn cũng có thể sử dụng

console.groupCollapsed()

thay thế cho

console.group()

nếu bạn muốn thu gọn các group. Khi muốn hiển thị đầy đủ chỉ cần click nút mô tả phía bên trái để mở rộng

Tùy thuộc vào tình huống, bạn có thể hiển thị log dễ đọc hơn bằng cách sử dụng

console.warn()

hoặc

console.error()


Ngoài ra chúng ta cũng có thể tùy chỉnh, để có thể phân biệt nhiều hơn các loại mà bạn muốn log

10 11

console.log(‘%c Auth ‘, ‘color: white; background-color: #2274A5’, ‘Login page rendered’); console.log(‘%c GraphQL ‘, ‘color: white; background-color: #95B46A’, ‘Get user details’); console.log(‘%c Error ‘, ‘color: white; background-color: #D33F49’, ‘Error getting user details’);

Bạn có thể thay đổi

font-size , font-style

và nhiều CSS khác

Một điều quan trọng trong lập trình là code cần chạy nhanh.

console.time()

giúp bạn biết được thời gian chạy của code

10 11 12 13

let i = 0; console.time(“While loop”); while (i < 1000000) { i++; console.timeEnd(“While loop”); console.time(“For loop”); for (i = 0; i < 1000000; i++) { // For Loop console.timeEnd(“For loop”);

Hi vọng bài viết sẽ giúp ích cho các bạn những cách khác nhau để sử dụng console tốt nhất.

Được dịch từ bài viết của tác giả Yash Agrawal https://medium.freecodecamp.org/how-to-use-the-javascript-console-going-beyond-console-log-5128af9d573b

Via Techtalk.vn

Giới thiệu

Trong tất cả các trình duyệt web hiện đại, Node.js cũng như hầu hết các môi trường Javascript khác đều hỗ trợ viết tin nhắn vào bảng điều khiển bằng cách sử dụng một bộ các phương pháp ghi nhật ký. Phương thức phổ biến nhất trong số này là console.log().

Trong môi trường trình duyệt, hàm console.log() chủ yếu được sử dụng cho mục đích gỡ lỗi

Bắt đầu

Mở bảng điều khiển Javascript trong trình duyệt của bạn, nhập nội dung sau và ấn Enter :

console.log(“Hello, World!”);

Thao tác này sẽ ghi những điều sau vào bảng điều khiển:

Trong ví dụ trên, hàm console.log() in Hello, World ra bảng điều khiển và trả về không xác định ( hiển thị ở trên trong cửa sổ đầu ra của bảng điều khiển ). Điều này là do console.log( ) không có giá trị trả về rõ ràng.

Các biến ghi nhật ký ( Logging variables)

console.log () có thể được sử dụng để ghi các biến thuộc bất kỳ loại nào; không chỉ chuỗi. Chỉ cần chuyển vào biến mà bạn muốn được hiển thị trong bảng điều khiển, ví dụ:

var foo = “bar”;

console.log(foo);

Thao tác này sẽ ghi những điều sau vào bảng điều khiển:

Nếu bạn muốn ghi hai hoặc nhiều giá trị thì chỉ cần phân tách chúng bằng dấu phẩy. Dấu cách sẽ được thêm tự đọng giữa mỗi đối tượng trong quá trình nối :

var thisVar = ‘first value’;

var thatVar = ‘second value’;

console.log(“thisVar:”,thisVar, “and thatVar:”,thatVar)

Thao tác này sẽ ghi vào bảng điều khiển :

Trình giữ chỗ ( Placeholders )

Bạn có thể sử dụng console.log ( ) kết hợp với trình giữ chỗ

var greet = “Hello”, who = “World”;

console.log(“%s, %s!”, greet, who);

Thao tác này sẽ ghi vào bảng điều khiển :

Đối tượng ghi nhật ký ( Logging Objects )

Dưới đây chúng tôi thấy kết quả của việc ghi nhật ký một đối tượng. Điều này thường hữu ích để ghi lại các phản hồi JSON từ các lệnh gọi API

console.log({

‘Email’: ”,

‘Groups’: {},

‘Id’: 33,

‘IsHiddenInUI’: false,

‘IsSiteAdmin’: false,

‘LoginName’: ‘i:0#.w|virtualdomain\\user2’,

‘PrincipalType’: 1,

GoalKicker.com – JavaScript®Notes for Professionals 4

‘Title’: ‘user2’>

});

Thao tác này sẽ ghi vào bảng điều khiển :

Ghi nhật ký các phần tử HTML (Logging HTML elements)

Bạn có khả năng ghi bất cứ các phần tử nào tồn tại trong DOM. Trong trường hợp này, chúng tôi ghi nhật ký phần tử body

console.log(document.body);

Thao tác này sẽ ghi vào bảng điều khiển :

Ghi chú cuối

Để biết thêm thông tin về các khả năng của bảng điều khiển, hãy xem chủ đề bảng điều khiển (Console).

Tham khảo GoalKicker.com

Dịch : Devmaster Academy

Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp – FullStack

Lập trình ứng dụng trên nền tảng android

Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS – FullStack

Lập trình ứng dụng với WINDOWS FORM

Lập trình ứng dụng với JAVA (FORM)

Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,…) – FullStack

Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery

Lập trình frontend với reacjs (Full)