---
title: Styling console.log
description: Console.log is one of the simplest, and most powerful, tools frontend developers have.  Turns out, it's not quite as simple as we thought.
---

[Blog - HubSpot Product Team ](https://product.hubspot.com/blog)

# [Styling console.log](https://product.hubspot.com/blog/styling-consolelog)

 Written by [Zack Bloom](https://product.hubspot.com/blog/author/zack-bloom) | Apr 2, 2013

Console.log is one of the simplest, and most powerful, tools frontend developers have.  Turns out, it's not quite as simple as we thought.  Console messages can be formatted using CSS.  You could, for example, make your error messages larger:

You could give your log messages a pleasant shadow:

The styles don't have to apply to the whole message:

Each %c resets the styles:

Add some formailty to your messages:

Text is boring, use images:

<https://product.hubspot.com/hs-fs/hub/51294/file-26797924.png>

Include [charts in your console](http://github.com/zackbloom/console.graph) logging:

Even better, anything you can draw on a canvas, [you can draw in the console](https://github.com/adamschwartz/chrome-console-grapher/blob/master/chrome.console.grapher.js).

<http://cta-redirect.hubspot.com/cta/redirect/51294/91b3ccba-23df-489a-bf8e-51f3b28587c1>

[View full post](https://product.hubspot.com/blog/styling-consolelog)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Zack Bloom"
  },
  "dateModified" : "2020-08-27T16:10:28.948Z",
  "datePublished" : "2013-04-02T16:41:00Z",
  "headline" : "Styling console.log",
  "image" : {
    "@type" : "ImageObject",
    "height" : 36,
    "url" : "http://cdn2.hubspot.net/hub/51294/file-26665558-png/screen_shot_2013-04-01_at_8.18.11_pm.png",
    "width" : 430
  },
  "mainEntityOfPage" : "https://product.hubspot.com/blog/styling-consolelog",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "HubSpot Product Blog"
  }
}
```