Conffab by Web Directions
  • Speakers
  • Presentations
  • Conferences
  • Live streams
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Live streams
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In

Search Conffab

Search presentations, speakers, transcripts, slides and topics.

Searching Conffab

Console Dot

Warwick Cox at Code 2015
Sign up for Conffab Free to watch this and hundreds of other videos for free
  • Details
  • Keypoints

Console.log is one of the simplest and easiest tools to use when you’re programming in JavaScript. Most of us see it as the hammer, and every problem with our code as a nail. The majority of problems we come across aren’t nails though, so we need to be using the right tool for the job. Luckily for us, the console API is full of handy tools that will help us develop faster and debug more efficiently.​

Awesome things you might not be using right now in Chrome dev tools:

  • console.clear()
  • console.count(label)
  • console.dir(object) – prints out a DOM object
  • console.dirxml(object) – same thing with xml
  • console.error and console.warn – these are useful debuggers
  • console.group(label) – the following console output will be grouped, so you can create a collapsed set of debug information
  • console.groupEnd() – closes a group. Optional but lets you control things nicely.
  • console.profile() and console.profileEnd() – sends data to the profile tab.
  • console.time(label) and console.timeEnd(label) – sends data to the timeline tab.
  • console.table(object) – needs an array of objects, prints them out in a table with their keys. Doesn’t print nested objects. You can control what’s printed.
  • console.log() – prints a string. You can use %s and %d etc for fine grained control.
  • console.log("%cHack","color:red") You can also style the output (expedia have a console easter egg using this).

Just google “console api” as you’ll never remember the URLs in the slides!

You may also be interested in

Thumbnail for Getting Your Customers Hooked with Web Notifications

Getting Your Customers Hooked with Web Notifications

Warwick Cox

Web Directions 2015

Thumbnail for Removing Everything and Having a Crap UI

Removing Everything and Having a Crap UI

Warwick Cox

Respond 2017

Thumbnail for Pop-up Accessibility

Pop-up Accessibility

Rhiana Heath

Code 2015

Thumbnail for What Comes Next for the Web Platform?

What Comes Next for the Web Platform?

Alex Russell

Code 2015

Thumbnail for Back to the Future with Web Components

Back to the Future with Web Components

Jonathon Creenaune

Code 2015

Thumbnail for Crossing The Streams

Crossing The Streams

Simon Knox

Code 2015

Thumbnail for Dawn of the Progressive Single Page App

Dawn of the Progressive Single Page App

Mark Dalgleish

Code 2015

Thumbnail for Eliminate JavaScript Code Smells

Eliminate JavaScript Code Smells

Elijah Manor

Code 2015

More presentations from Code 2015

Thumbnail for The State of the Animation

The State of the Animation

Rachel Nabors

Code 2015

Thumbnail for What Comes Next for the Web Platform?

What Comes Next for the Web Platform?

Alex Russell

Code 2015

Thumbnail for Async and Await

Async and Await

James Hunter

Code 2015

Thumbnail for Async Frontiers in JavaScript

Async Frontiers in JavaScript

Domenic Denicola

Code 2015

Thumbnail for Classing up ES6

Classing up ES6

Andy Sharman

Code 2015

Thumbnail for Canvas Cold War

Canvas Cold War

Simon Swain

Code 2015

Thumbnail for Current Best Practice in Front End Ops

Current Best Practice in Front End Ops

Alex Sexton

Code 2015

Thumbnail for Stop the Fanaticism – Using the Right Tools for the Job

Stop the Fanaticism – Using the Right Tools for the Job

Kassandra Perch

Code 2015

© 2026

  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up