Logging messages to the console is a very basic way to diagnose and troubleshoot minor issues in your code. But, did you know that there is more to console than just log? In this article, I’ll show you how to print to the console in JS, as well as

Bạn đang xem: javascript console log print

Logging messages to the console is a very basic way to diagnose and troubleshoot minor issues in your code.

But, did you know that there is more to console than just log? In this article, I’ll show you how to print to the console in JS, as well as all of the things you didn’t know console could do.

Firefox Multi-line Editor Console

If you’ve never used the multi-line editor mode in Firefox, you should give it a try right now!

Just open the console, Ctrl+Shift+K or F12, and in the top right you will see a button that says “Switch to multi-line editor mode”. Alternatively, you can press Ctrl+B.

This gives you a multi-line code editor right inside Firefox.

console.log

Let’s start with a very basic log example.

let x = 1
console.log(x)

Type that into the Firefox console and run the code. You can click the “Run” button or press Ctrl+Enter.

In this example, we should see “1” in the console. Pretty straightforward, right?

Multiple Values

Did you know that you can include multiple values? Add a string to the beginning to easily identify what it is you are logging.

let x = 1
console.log("x:", x)

But what if we have multiple values that we want to log?

let x = 1
let y = 2
let z = 3

Instead of typing console.log() three times we can include them all. And we can add a string before each of them if we wanted, too.

let x = 1
let y = 2
let z = 3
console.log("x:", x, "y:", y, "z:", z)

But that’s too much work. Just wrap them with curly braces! Now you get an object with the named values.

let x = 1
let y = 2
let z = 3
console.log( {x, y, z} )

Console Output

You can do the same thing with an object.

let user = {
  name: 'Jesse',
  contact: {
    email: 'codestackr@gmail.com'
  }
}
console.log(user)
console.log({user})

The first log will print the properties within the user object. The second will identify the object as “user” and print the properties within it.

If you are logging many things to the console, this can help you to identify each log.

Variables within the log

Did you know that you can use portions of your log as variables?

console.log("%s is %d years old.", "John", 29)

In this example, %s refers to a string option included after the initial value. This would refer to “John”.

The %d refers to a digit option included after the initial value. This would refer to 29.

The output of this statement would be: “John is 29 years old.”.

Variations of logs

There are a few variations of logs. There is the most widely used console.log(). But there is also:

console.log('Console Log')
console.info('Console Info')
console.debug('Console Debug')
console.warn('Console Warn')
console.error('Console Error')

These variations add styling to our logs in the console. For instance, the warn will be colored yellow, and the error will be colored red.

Xem Thêm  5 cách để kiểm tra xem một mảng có chứa giá trị trong JavaScript hay không - javascript kiểm tra xem mảng có chứa giá trị không

Note: The styles vary from browser to browser.

Optional Logs

We can print messages to the console conditionally with console.assert().

let isItWorking = false
console.assert(isItWorking, "this is the reason why")

If the first argument is false, then the message will be logged.

If we were to change isItWorking to true, then the message will not be logged.

Counting

Did you know that you can count with console?

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

Each iteration of this loop will print a count to the console. You will see “default: 1, default: 2”, and so on until it reaches 10.

If you run this same loop again you will see that the count picks up where it left off; 11 – 20.

To reset the counter we can use console.countReset().

And, if you want to name the counter to something other than “default”, you can!

for(i=0; i<10; i++){
  console.count('Counter 1')
}
console.countReset('Counter 1')

Now that we have added a label, you will see “Counter 1, Counter 2”, and so on.

And to reset this counter, we have to pass the name into countReset. This way you can have several counters running at the same time and only reset specific ones.

Track Time

Besides counting, you can also time something like a stopwatch.

To start a timer we can use console.time(). This will not do anything by itself. So, in this example, we will use setTimeout() to emulate code running. Then, within the timeout, we will stop our timer using console.timeEnd().

console.time()
setTimeout(() => {
  console.timeEnd()
}, 5000)

As you would expect, after 5 seconds, we will have a timer end log of 5 seconds.

We can also log the current time of our timer while it’s running, without stopping it. We do this by using console.timeLog().

console.time()

setTimeout(() => {
  console.timeEnd()
}, 5000)

setTimeout(() => {
  console.timeLog()
}, 2000)

In this example, we will get our 2 second timeLog first, then our 5 second timeEnd.

Just the same as the counter, we can label timers and have multiple running at the same time.

Groups

Another thing that you can do with log is group them. ?

We start a group by using console.group(). And we end a group with 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')

This group of logs will be collapsible. This makes it easy to identify sets of logs.

By default, the group is not collapsed. You can set it to collapsed by using console.groupCollapsed() in place of console.group().

Labels can also be passed into the group() to better identify them.

Xem Thêm  [Cách đơn giản] -Cách lấy dữ liệu từ cơ sở dữ liệu bằng cách sử dụng JQuery Ajax trong asp net MVC - jquery ajax lấy dữ liệu từ cơ sở dữ liệu

Stack Trace

You can also do a stack trace with console. Just add it into a function.

function one() {
  two()
}
function two() {
  three()
}
function three() {
  console.trace()
}
one()

In this example, we have very simple functions that just call each other. Then, in the last function, we call console.trace().

Console OutputConsole Output

Tables

Here’s one of the most mind-blowing uses for console: console.table().

So let’s set up some data to log:

let devices = [
  {
    name: 'iPhone',
    brand: 'Apple'
  },
  {
    name: 'Galaxy',
    brand: 'Samsung'
  }
]

Now we’ll log this data using console.table(devices).

Console OutputConsole Output

But wait – it gets better!

If we only want the brands, just console.table(devices, ['brand'])!

Console OutputConsole Output

How about a more complex example? In this example, we’ll use jsonplaceholder.

async function getUsers() {
  let response = await fetch('https://jsonplaceholder.typicode.com/users')
  let data = await response.json()
 
  console.table(data, ['name', 'email'])
}

getUsers()

Here we are just printing the “name” and “email”. If you console.log all of the data, you will see that there are many more properties for each user.

Style ?

Did you know that you can use CSS properties to style your logs?

To do this, we use %c to specify that we have styles to add. The styles get passed into the second argument of the log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

You can use this to make your logs stand out.

Clear

If you are trying to troubleshoot an issue using logs, you may be refreshing a lot and your console may get cluttered.

Just add console.clear() to the top of your code and you’ll have a fresh console every time you refresh. ?

Just don’t add it to the bottom of your code, lol.

Thanks for Reading!

If you want to revisit the concepts in this article via video, you can check out this video-version I made here.

YouTube: There’s More To Console Than LogJesse Hall (codeSTACKr)

I’m Jesse from Texas. Check out my other content and let me know how I can help you on your journey to becoming a web developer.


Xem thêm những thông tin liên quan đến chủ đề bản in nhật ký bảng điều khiển javascript

Master Async JavaScript using Async/Await | Quokka JS

alt

  • Tác giả: JavaScript Mastery
  • Ngày đăng: 2020-08-12
  • Đánh giá: 4 ⭐ ( 6872 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ❗ IMPORTANT:

    Become a PRO at JavaScript: https://bit.ly/MasterJavaScript
    Use the special promo code “JSM_YT_SQUAD” on checkout to save $50!

    Free JavaScript Cheat Sheet: https://bit.ly/FreeJsCheatsheet In this tutorial, we will build a simple, but an extremely educational application that is going to improve your overall knowledge of Destructuring and Async/Await.

    The program will take in a currency code we want to convert from and currency code we want to convert to, as well as the amount of money. The output will result in a correct exchange rate based on the data from not one, but two different API’s.

    While we’re creating our project, I’m also going to teach you how to use Quokka.js. Quokka is a developer productivity tool for rapid JavaScript development. Simply said, using Quokka, all values are updated and displayed in your code editor next to your code, as you type. No more need for console logs or losing yourself while trying to debug a simple error.

    QuokkaJS: https://quokkajs.com/?referrer=javascriptmastery

    📚 Materials/References:
    Starting code: https://gist.github.com/adrianhajdin/9a76eed3a8b3da81c0723bda6df32297
    First API: https://fixer.io/
    Second API: https://restcountries.eu

    💼 Business Inquiries: contact@jsmastery.net

    🌎 Find Me Here:
    Discord Group: https://discord.gg/n6EdbFJ
    Instagram: https://instagram.com/javascriptmastery
    Twitter: https://twitter.com/JS_Mastery
    BuyMeACoffe: https://www.buymeacoffee.com/JSMastery

#019 – In ra bảng điều khiển gỡ lỗi của trình duyệt

  • Tác giả: devmaster.edu.vn
  • Đánh giá: 4 ⭐ ( 9349 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bảng điều khiển gỡ lỗi của trình duyệt có thể được sử dụng để in các thông báo đơn giản, Đào tạo lập trình viên chuyên nghiệp – php – .net – java – android – ios – c – C++,C#, Tư vấn thiết kế và xậy dựng phần mềm, thiết kế website

Làm việc với Bảng điều khiển DevTools và API Bảng điều khiển

  • Tác giả: tech-wiki.online
  • Đánh giá: 4 ⭐ ( 1976 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bao gồm jQuery trong Bảng điều khiển JavaScript

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 4109 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Chạy cái này trong bảng điều khiển JavaScript của trình duyệt của bạn, sau đó jQuery…

Bảng điều khiển Cục bộ ASR1550LCP

  • Tác giả: www.intel.vn
  • Đánh giá: 4 ⭐ ( 7999 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bảng điều khiển Cục bộ ASR1550LCP – Tải xuống các tài nguyên hỗ trợ bao gồm các bản cập nhật trình điều khiển, phần mềm, bios và chương trình cơ sở.

Javascript cơ bản: Học Javascript với các dạng dữ liệu khác nhau

  • Tác giả: vn.bitdegree.org
  • Đánh giá: 4 ⭐ ( 9434 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Javascript cơ bản cho người mới bắt đầu: Học Javascript với các dạng dữ liệu và toán tử khác nhau. Tham gia khóa học Javascript cơ bản ngay hôm nay!

Cài đặt trình điều khiển mới nhất cho máy in của bạn

  • Tác giả: support.microsoft.com
  • Đánh giá: 3 ⭐ ( 7051 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu cách cài đặt trình điều khiển mới nhất cho máy in của bạn. Nếu mới nâng cấp Windows gần đây, bạn có thể phải cài đặt lại trình điều khiển máy in của mình.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Từ điển Python - dict trong python là gì

By ads_php