The Basics of Console Logging for Beginners

When you are writing code, you will often find yourself in one of two situations. One situation is where you wonder if the code you just wrote is going to run at all. In the other situation, you know your code runs, but it isn’t running correctly. There is something wrong…

In both of these situations, what you need is some extra visibility into what your code is doing. A timeless approach for bringing this visibility involves the alert method:

let myButton = document.querySelector("#myButton");
myButton.addEventListener("click", doSomething, false);

function doSomething(e) {
  alert("Is this working?");

Using the alert method isn’t bad. It works fine for simple situations, but as your code starts to do more, relying on them doesn’t work as well. For starters, you’ll probably go insane from dismissing the large number of dialogs that keep popping up while your code is running! You’ll also want an easy way to persist the messages you are seeing. The fleeting nature of of our alert dialogs makes any sort of long-term logging like that difficult.

In this tutorial, we’re going to look at one of the greatest inventions of all time that makes it easy to help us figure out what our code is doing. We are going to be learning about something known as the console.

Meet the Console

Even if you think you write the most perfect JavaScript, you’ll be spending a fair amount of time in what is known as the console. If you’ve never used the console before, it is part of your browser’s developer tools where all sorts of text and stuff gets printed for you to see and (occasionally) interact with.

It will look a little bit like the following:

This is image title

At a very high level, your console helps with a bunch of things:

  1. You can read messages you have told your code to log and display

  2. You can modify your application state by setting (or overwriting) variables and values

  3. You can inspect the value of any DOM element, applied style, or code that is accessible and in scope

  4. You can use it as a virtual code editor and write/execute some code just for kicks

In this article, we won’t focus on all of the things your console is capable of doing. Instead, we’re just going to take it easy and gradually get you comfortable with using the console to just display messages. We will cover all of the crazy console-related things eventually, so don’t worry.

Displaying the Console

The first thing we are going to do is get your console up. The console is a part of your browser’s developer tools. The way you bring up your browser developer tools is by fiddling with your browser’s menus or by using the more handy keyboard shortcuts. From inside your browser, press Ctrl + Shift + I on Windows or Cmd + Alt + I on Mac to bring up the developer tools.

Depending on your browser and platform, your developer tools will each look a little different. The important thing is to find the Console tab and make sure the console gets displayed.

When you bring up the console in Chrome, you’ll see something like what you see below:

This is image title

On Safari, the console will look a bit like this:

This is image title

Firefox’s console looks as follows:

This is image title

Bringing up the console in Microsoft Edge will look like the following:

This is image title

The thing I want to highlight is that it doesn’t matter which browser you use. The console looks and functions pretty much the same on all of them. Just bring up the console in your favorite browser, and get ready to start actually using the console in the following sections.

If You want to Follow Along

Now, you can totally just passively read the following sections and learn a whole bunch of console-related things without lifting a finger. If that is what you would like to do, then skip all of this and jump to the next section :P

On the other hand, if you want to get your hands a bit dirty and see some of the console shenanigans for yourself on your screen, create a new HTML document and add the following HTML, CSS, and JavaScript into it:

<!DOCTYPE html>

  <title>Console Stuff</title>

    #container {
      padding: 50px;
    #myButton {
      font-family: sans-serif;
      font-size: 24px;
      font-weight: lighter;
      background-color: #FFF;
      border: 3px #333 solid;
      padding: 15px;
    #myButton:hover {
      background-color: aliceblue;

  <div id="container">
    <button id="myButton">click me</button>
    let myButton = document.querySelector("#myButton");
    myButton.addEventListener("click", doSomething, false);

    function doSomething(e) {
      alert("Is this working?");


What we have here is a really simple HTML page with a button that you can click. When you click on the button, an alert dialog (the same one we described earlier) will appear. In the following sections, we’ll modify this example to help bring some of the console-related things to life!

Console Logging 101

The first thing we are going to do is tell our console to display things on screen. This is no different than what we did with the alert statement earlier, and it is almost just as easy. The key to all of this is the Console API. This API contains a bunch of properties and methods that allow you to display things to your console in a variety of ways. The first and probably the most popular of these properties and methods is the log method.

Meet the Log Method

At its most basic level, the way you use the log method is as follows:

console.log("Look, ma! I'm logging stuff.")		

You call it via the console object and pass in the text that you want to display. To see this in action, we can replace the alert from our example with the following:

function doSomething(e) {
  console.log("Is this working?");

When you run this code, take a look at your console after clicking on the click me button. If everything worked out properly, you will see the “Is this working?” text displayed inside it:

This is image title

If you keep clicking on the button, you’ll see more instances of “Is this working?” getting logged:

This is image title

How that looks will depend on the developer tools you are using. You will probably just see a counter to the left of your initial message getting incremented as shown in the screenshot. You may see the text “Is this working?” getting duplicated in each line as well. Don’t be alarmed if what you see doesn’t exactly match what you see in my screenshots. The important detail is that your call to console.log works and is logging messages for you to see in the console. Also, these messages aren’t read only. You can select them. You can copy them. You can even print them and frame them on the wall behind you!

Going Beyond Predefined Text

Now that you’ve just seen the basics, let’s go a bit deeper. When using the console, you aren’t limited to only printing some predefined text. For example, a common thing you might do is print the value of something that exists only by evaluating an expression or accessing a value. To see what we mean by this, make the following change to your doSomething function:

function doSomething(e) {
  console.log("We clicked on: " +;

What we are doing here is telling our console to display the text “We clicked on” in addition to the id value of the element we clicked on. If you preview these changes in your browser, click on the click me button again, and check out what is shown in the console, you’ll see the following:

This is image title

The id value of the button you clicked on is displayed in addition to our predefined text. Now, getting the id value of an element is probably not the most exciting thing you might want to print, but you can print pretty much anything that would look good when represented as text. That’s powerful!

Displaying Warnings and Errors

It is time to peek our heads beyond the log method! Our console object provides us with the warn and error methods that allow us to display messages formatted as warnings and errors, respectively:

This is image title

The way you use these two methods is no different than how you used the log method. Just pass in whatever you want to display. You can see an example of how to use these methods in the following snippet:

let counter = 0;

function doSomething(e) {

	console.log("Button clicked " + counter + " times!");

	if (counter == 3) {

function showMore() {
	console.warn("This is a warning!");
	console.error("This is an error!");

When this code runs and our button is clicked three times, the showMore function gets called. Inside that function, all we have is our console warning and error:

function showMore() {
	console.warn("This is a warning!");
	console.error("This is an error!");

Now, there is something cool about warnings and errors that goes beyond just their appearance compared to their more boring log counterparts. You can expand them in the console and see the full stack trace of all the functions your code took before hitting them:

This is image title

For large pices of code with a lot of branching, this is really useful. The warn and error methods provide an excellent way for us to better understand the twisted paths our code took into getting into whatever state it ended up in!


The console provides you with one of the best tools you have for understanding what your code is doing. Displaying messages is only one part of what the console allows you to do, and within our narrow focus on just displaying messages, there is a whole lot more that we can cover than what we’ve seen so far. We’ll cover more things the console does later, but the few console techniques you’ve seen here will take you far in helping you find and squash bugs in your code.

Originally published by kirupa at

#javascript #web_developmet

What is GEEK

Buddha Community

The Basics of Console Logging for Beginners

Using Azure Log Analytics Workspaces to collect Custom Logs from your VM


We all have seen the Monitoring Tab Key Metrics on the VM Page. Yes, it is useful to see whether the CPU has been running or not through the **CPU **metrics, to check when the VM is getting the data from the outside world through Network In metrics and if the VM is doing any kind of write operation using **Disk Operations/Sec **metrics but it’s not effective for the custom services that we build on VM. So, in this blog, I will be giving you an example of how to create your own log based on customer service, bring it to Azure Log Analytics Workspace using its default agent, and query it according to our needs, even better create an alert on it.


  1. An Azure Account
  2. Azure Virtual Machine Service
  3. Azure Log Analytics Workspace Service
  4. Azure Alert Service

Azure Virtual Machine:

Let’s start with the VM itself. You already have the service running on the VM but don’t know how to get those logs into the portal or even create a log for your services. So, let’s assume that you have not created the logs for your services. So for this blog, I will be taking a simple flask app as my example for the service. To get it up and running we must download the flask library from pip and then create a flask app similar to this below:

#logs #log-analytics #azure #azure log analytics

Wiley  Mayer

Wiley Mayer


How to Install Logstash | Liquid Web

Logstash is a free, open source, server-side data collection and processing engine which uses dynamic pipelining capabilities. It takes in information from multiple data sources, reconstructs it, and then sends it to a destination of our choice. Logstash also cleans and modifies the data for use in an advanced outbound analytics and visualization use cases. It is the L in the ELK stack (Elasticsearch, Logstash and Kibana) and is typically responsible for sending data to Elasticsearch.

Effectively administrating Linux systems requires familiarity with the locations of and possible contents of logs. Application and system-level logs provide insight into an application’s behavior or the system that might not be apparent on the surface. When many cooperating systems each provide their logs, aggregating, and processing that information becomes imperative. This is where Logstash shines.

#tutorials #apt transport https #data filters #data pipeline #data processing #elasticsearch #elk #event pipeline #java #java jdk #kibana #log collector #log collectors #log files #logs #logstash #ubuntu #ubuntu 18.04

To Log, or Not to Log, That is The Question.

Logging is one of the those things are universally present in software projects with their different unique forms, requirements, and flavors.

Logging is everywhere, from small 1-person-startups to large enterprises. Even a simple algorithmic programming question involves some logging along the way.

We rely so much on logging to develop, maintain, and keep our programs up and running. However, not much attention has been paid to how to design logging within our systems.

Often times, logging is treated as a second thought – it’s only sprinkled into source code upon implementation like some magic powder that helps lighten the day-to-day operational abyss in our systems.

#to log #not to log,

Biju Augustian

Biju Augustian


Learn Python Tutorial from Basic to Advance

Become a Python Programmer and learn one of employer’s most requested skills of 21st century!

This is the most comprehensive, yet straight-forward, course for the Python programming language on Simpliv! Whether you have never programmed before, already know basic syntax, or want to learn about the advanced features of Python, this course is for you! In this course we will teach you Python 3. (Note, we also provide older Python 2 notes in case you need them)

With over 40 lectures and more than 3 hours of video this comprehensive course leaves no stone unturned! This course includes tests, and homework assignments as well as 3 major projects to create a Python project portfolio!

This course will teach you Python in a practical manner, with every lecture comes a full coding screencast and a corresponding code notebook! Learn in whatever manner is best for you!

We will start by helping you get Python installed on your computer, regardless of your operating system, whether its Linux, MacOS, or Windows, we’ve got you covered!

We cover a wide variety of topics, including:

Command Line Basics
Installing Python
Running Python Code
Number Data Types
Print Formatting
Built-in Functions
Debugging and Error Handling
External Modules
Object Oriented Programming
File I/O
Web scrapping
Database Connection
Email sending
and much more!
Project that we will complete:

Guess the number
Guess the word using speech recognition
Love Calculator
google search in python
Image download from a link
Click and save image using openCV
Ludo game dice simulator
open wikipedia on command prompt
Password generator
QR code reader and generator
You will get lifetime access to over 40 lectures.

So what are you waiting for? Learn Python in a way that will advance your career and increase your knowledge, all in a fun and practical way!

Basic knowledge
Basic programming concept in any language will help but not require to attend this tutorial
What will you learn
Learn to use Python professionally, learning both Python 2 and Python 3!
Create games with Python, like Tic Tac Toe and Blackjack!
Learn advanced Python features, like the collections module and how to work with timestamps!
Learn to use Object Oriented Programming with classes!
Understand complex topics, like decorators.
Understand how to use both the pycharm and create .py files
Get an understanding of how to create GUIs in the pycharm!
Build a complete understanding of Python from the ground up!

#Learn Python #Learn Python from Basic #Python from Basic to Advance #Python from Basic to Advance with Projects #Learn Python from Basic to Advance with Projects in a day

Appsinvo : What is Google Search Console Insights?

Google has been testing search consoles for approx a year. As per Google, the search will gradually be unrolled to all or any search console users within the coming days. Through definite data google analytics within the search console render the superior benefit which will aid you to manage your data during a new way. Read More at :

#how google search console insights assist? #how to access google search console insights? #what is google search console insights? #when did search console insights first launch #appsinvo