Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

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 Removing Everything and Having a Crap UI

Removing Everything and Having a Crap UI

Warwick Cox

Thumbnail for Getting Your Customers Hooked with Web Notifications

Getting Your Customers Hooked with Web Notifications

Warwick Cox

Thumbnail for Once More with Feeling

Once More with Feeling

Tim Kadlec

Thumbnail for CSS Grid Layout

CSS Grid Layout

Rachel Andrew

Thumbnail for Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Stephanie Rewis

Thumbnail for The Power and Responsibility of Unicode Adoption

The Power and Responsibility of Unicode Adoption

Katie McLaughlin

Thumbnail for Does Your Web App Speak Schadenfreude?

Does Your Web App Speak Schadenfreude?

Greg Rewis

Thumbnail for CSS: Code Smell Sanitation

CSS: Code Smell Sanitation

Fiona Chan

More presentations from Code 2015

    Thumbnail for The State of the Animation

    The State of the Animation

    Rachel Nabors

    Thumbnail for What Comes Next for the Web Platform?

    What Comes Next for the Web Platform?

    Alex Russell

    Thumbnail for Async and Await

    Async and Await

    James Hunter

    Thumbnail for Async Frontiers in JavaScript

    Async Frontiers in JavaScript

    Domenic Denicola

    Thumbnail for Classing up ES6

    Classing up ES6

    Andy Sharman

    Thumbnail for Canvas Cold War

    Canvas Cold War

    Simon Swain

    Thumbnail for Current Best Practice in Front End Ops

    Current Best Practice in Front End Ops

    Alex Sexton

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

    Stop the Fanaticism – Using the Right Tools for the Job

    Kassandra Perch

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

© Conffab 2025