Intro to Google DevTools: Console Panel
Tags: generalhtmljavascrip
Published: 2020-09-09 15:27:59

---
title: Intro to Google DevTools: Console Panel
published: true
date: 2020-08-10 19:34:23 UTC
tags: Generalhtmljavascrip
canonical_url: https://www.thisdot.co/blog/intro-to-google-devtools-console-panel
---

 **Intro to Google DevTools: Console Panel** Today's article will give an overview of the Console panel in Google DevTools. The Console panel allows you to perform a number of cool things. Some of these are inputs in your code, such as a console.log to being able to return recently inspected elements. Also, the Console is technically a Javascript REPL in which you can directly execute code and interact with the opened page. We’ll cover a number of console inputs and how to see recently inspected elements from the console panel.

**Console methods** We’ll start this section off by going over a very simple console method called console.log. We will follow it up with a few other methods such as .error, .table, .time, .warn and finish up with recently inspected elements. These are some useful console methods that should be useful for future projects.

**Console.log** A console.log is used to log a message into the console panel. This can be a number of things from a simple string like ‘Hello’ up to more complex things like outputting data from arrays and objects. In order to use this method, all you have to do it type console.log("insert message you want"). Afterwards the message will be displayed in the console panel.

_Here we have a simple string_[![console1](https://images.ctfassets.net/zojzzdop0fzx/Hwk5VPPlx5aQekS6NAoQm/f6b36c9807080d8b840e4e1603f339f5/console1.png)](https://images.ctfassets.net/zojzzdop0fzx/Hwk5VPPlx5aQekS6NAoQm/f6b36c9807080d8b840e4e1603f339f5/console1.png)

_Next is an array example_[![console2](https://images.ctfassets.net/zojzzdop0fzx/2BcLm1deNhnF8CnmHV0vng/1160d6f54d4c726f1d58f411effca38c/console2.png)](https://images.ctfassets.net/zojzzdop0fzx/2BcLm1deNhnF8CnmHV0vng/1160d6f54d4c726f1d58f411effca38c/console2.png)

_Finally we will show an object example_[![console3](https://images.ctfassets.net/zojzzdop0fzx/4j6pJ8uDrf4c5BIPZHR78y/4e468a6b05ce06eadb7f6a85ab264a2f/console3.png)](https://images.ctfassets.net/zojzzdop0fzx/4j6pJ8uDrf4c5BIPZHR78y/4e468a6b05ce06eadb7f6a85ab264a2f/console3.png)

\_\_Console.error \_\_The console.error method is useful for returning an error message. It is very similar to the console.log mentioned above. It is very easy to use and can be something as simple as ‘This case has failed’. Just like console.log it’s an easy method to use and all you have to do is console.error("insert message you want"). Also this method does not stop code execution.

[![console4](https://images.ctfassets.net/zojzzdop0fzx/6ZP1USlkcVcG92nQaEnjnI/a4af520ba8aa9415db2db24a9e77aef9/console4.png)](https://images.ctfassets.net/zojzzdop0fzx/6ZP1USlkcVcG92nQaEnjnI/a4af520ba8aa9415db2db24a9e77aef9/console4.png)

**Console.table** A console.table method is pretty cool as it can log an array and objects as a table. This can be very helpful if you are not quite sure what the array looks like. It will output an index column and follow it up with the information stored within the object. I will include a couple examples from small to big.

_Small_[![console5](https://images.ctfassets.net/zojzzdop0fzx/2u2yaH5NUp2mSrhBOjPYGf/12993d380d80119c56eccbcdbdaed865/console5.png)](https://images.ctfassets.net/zojzzdop0fzx/2u2yaH5NUp2mSrhBOjPYGf/12993d380d80119c56eccbcdbdaed865/console5.png)

_Big_[![console6](https://images.ctfassets.net/zojzzdop0fzx/1BbaqPob9htKbZoSCrQ5te/01dcdfa6582402340d1b551712c4629d/console6.png)](https://images.ctfassets.net/zojzzdop0fzx/1BbaqPob9htKbZoSCrQ5te/01dcdfa6582402340d1b551712c4629d/console6.png)

**Console.time** The console.time method is nice to use if you’re curious about knowing how long an operation takes. In order to use this, you would start with calling console.time(), and then putting console.timeEnd() where you want it to stop. I will show a couple different examples using different loops. This will give a good indicator as to which operation is quicker.

_For loop_[![console7](https://images.ctfassets.net/zojzzdop0fzx/mlzAe0O9fznDhzGzOigXK/13d13b0223d46ab3c9531d26ff7a0641/console7.png)](https://images.ctfassets.net/zojzzdop0fzx/mlzAe0O9fznDhzGzOigXK/13d13b0223d46ab3c9531d26ff7a0641/console7.png)

_While loop_[![console8](https://images.ctfassets.net/zojzzdop0fzx/16PaAN18S1KMPBUJpOj41a/aa4959f534e4a514d025ab7b45f82ed6/console8.png)](https://images.ctfassets.net/zojzzdop0fzx/16PaAN18S1KMPBUJpOj41a/aa4959f534e4a514d025ab7b45f82ed6/console8.png)

In this scenario, the for loop was a little quicker than the while loop.

**Console.warn** A console.warn method will return a warning. This is similar to console.log and console.error, but it outputs your message as a warning. This method does not interrupt your code execution.

[![console9](https://images.ctfassets.net/zojzzdop0fzx/17YhauZuPwwkrsu1DIpdEl/e5394ee4090ff42eed29a746a09714d7/console9.png)](https://images.ctfassets.net/zojzzdop0fzx/17YhauZuPwwkrsu1DIpdEl/e5394ee4090ff42eed29a746a09714d7/console9.png)

**$0-$4** These methods return the five recently inspected elements. So $0 grabs the first, $1 grabs the second, and so on. I will show a couple examples using these. These are very useful for when you don’t want to go back to the inspected elements.

_Google example_[![console10](https://images.ctfassets.net/zojzzdop0fzx/4t64Gmu2B8x7NWmK0e0uv4/62e456f3d0a16899ceaa949af7d83a3f/console10.png)](https://images.ctfassets.net/zojzzdop0fzx/4t64Gmu2B8x7NWmK0e0uv4/62e456f3d0a16899ceaa949af7d83a3f/console10.png)

_Youtube example_[![console11](https://images.ctfassets.net/zojzzdop0fzx/4gOSytwNA61buUoXEYxDLf/184867b9836fdebf5d276db1e7a7fe96/console11.png)](https://images.ctfassets.net/zojzzdop0fzx/4gOSytwNA61buUoXEYxDLf/184867b9836fdebf5d276db1e7a7fe96/console11.png)

**Conclusion** Today's article covered an overview of the Console panel in Google DevTools. Hopefully, after reading this, you will have learned something new and useful. I personally find the Console panel to be extremely helpful. I use it all the time to help verify code pieces and to quickly grab previously inscpected elements.

_This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit [thisdotlabs.com](([https://www.thisdotlabs.com](https://www.thisdotlabs.com))._

_This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit [thisdot.co](https://www.thisdot.co)._