The developer tools console is one of the most powerful tools available to you when it comes to debugging your front-end web applications. The console has an API that provides a number of methods that make debugging easier. It’s not uncommon to see developers using console.log() or console.dir() to investigate problems; but the developer tools console has a lot more to offer.

In this blog post you’re going to learn how to debug your web applications using the methods provided by the console API. Some browsers support more functionality than others so I’ll be pointing out any compatibility issues as we go.

Lets get started!

Using the Developer Tools Console

If you haven’t used the developer tools console before, don’t worry. In this section I’m going to show you how to access and use the console. If you’re already familiar this, feel free to skip to the next section.

There are a number of different ways that you can open your browser’s developer tools. The simplest is to just right-click somewhere on the page and then select ‘Inspect Element’ in the context-menu that appears.

You can also launch the developer tools using a keyboard shortcut. The shortcut for most browsers on Mac is Alt + Command + I, for Windows you can use Ctrl + Shift + I.

The developer tools console in Chrome.

Once you have the developer tools open you can switch to the console by clicking the Console tab at the top of the window.

The ‘Elements’ tab with a console pane at the bottom.

In Chrome, you can also launch a console below any of the other tabs by clicking on the console icon in the top right of the developer tools window.

Note: In this article we will be using the default developer tools that ship with browsers. There are many great browser extensions that can provide similar tools. Firefox users may wish to install Firebug, as the Firebug console supports some methods that the default Firefox console does not.

Now that you’ve got the console open, lets execute a simple statement.

Type the following into the console and press Enter:

console.log('Hello World!');

You should see that the test Hello World! is printed in the console (as shown below).

Using console.log() in the Chrome Dev Tools Console.

Great! Now that you’re up-to-speed with how to use the console, lets take a look at all the console methods that you can use to debug your applications.

console.log(object [, object, ...])

Lets start by looking at one of the most commonly used console methods, console.log(). This method simply outputs an object to the console.

console.log('Hello Treehouse');

If you list multiple objects they will be concatenated into a single, space-delimited string, which is then output to the console.

console.log('This is a string', { foo: 'bar' }, { bar: 'foo' });

Using console.log() with multiple objects.

The first parameter can contain format specifiers that allow you to define the format and positioning, of the subsequent objects.

var number = 11 * 9;
    var color = 'red';
    
    console.log('%d %s balloons', number, color);

Using console.log() with format specifiers.

The following format specifiers are supported in the dev tools console.

Using the %c format specifier allows you to style the console output.

console.log('%cThis text is styled!', 'color: #86CC00; background-color: blue; font-size: 20px; padding: 3px;')

Using console.log() with styled output.

console.assert(expression, object)

The console.assert() method takes two parameters, a boolean expression, and an object. If the result of the expression is false the object will be printed in the console.

You will usually want to use a string object as the second parameter but the method will work with any valid JavaScript object.

var count = 5;
    console.assert(count > 10, 'count is not larger than 10');

The expression here checks to see if the count variable is larger than 10. If it’s not, the message ‘count is not larger than 10’ is printed in the console.

Using console.assert()

console.clear()

The console.clear() method clears any output in the console window.

Note: This method is not supported by the default Firefox developer tools, but is supported in the Firebug console.

console.count(label)

The console.count() method will output the number of times that the count() method has been called. You will only get an accurate count if this method is called at the same line, with the same label each time.

This method can be useful for finding out how many times a function is being called in your code.

function clickHandler() {
        console.count('Click handler called');
        ...
    }

ProTip! You can enter multi-line expressions in the console by using Shift + Enter to create a new line.

You can test that this works by using a for loop in the console.

for (var i = 0; i < 3; i++) {
        clickHandler();
    }

This code will call the clickHandler() method three times.

Using console.count() to count function calls.

Note: This method is not supported by the default Firefox developer tools. Instead use the Firebug console.

console.dir(object)

The console.dir() method will print a JavaScript representation of the supplied object to the console. This method is especially useful for examining HTML elements, as it will display the DOM representation of the element rather than the XML representation displayed when using console.log().

console.dir(document.body);

Using console.dir() to examine an HTML element.

console.dirxml(object)

The console.dirxml() method prints the XML representation of on a object.

console.dirxml(document.body);

When used with a HTML element, the output is equivalent to using console.log().

Using console.dirxml()

Note: This method is not supported by the default Firefox developer tools. Instead use the Firebug console.

console.error(object [, object, ...])

The console.error() method takes one or more objects and prints them to the console. This method is similar to console.log() however console.error() will also print a stack trace from where the method was called. The output will also be flagged as an error in the console.

console.error('Page not found (404)');

This method is really useful when writing error handlers.

Logging console errors with console.error()

console.group(object[, object, ...]) & console.groupEnd()

The console.group() method is used to group together a series of log messages. Once this method is called, any further log messages will be added to the group until console.groupEnd() is executed to close the group.

You can specify an optional title to make it easier to find the group in the console.

console.group('Fetching Data');

Grouping console messages with console.group()

It is possible to nest multiple groups within one another.

console.group('Group One');
    console.group('Group Two');
    
    ...
    
    console.groupEnd(); // Close group two
    console.groupEnd(); // Close group one

console.groupCollapsed(object[, object, ...])

The console.groupCollapsed() method is essentially the same as console.group() except that the group is initially displayed collapsed rather than open in the console.

console.groupCollapsed('Fetching Data');
    
    console.log('Request Sent');
    console.error('Error: Server not responding (500)');
    
    console.groupEnd();
    
    console.log('Continuing...');

Grouping log messages with console.groupCollapsed()

console.info(object [, object, ...])

The console.info() method functions in the same way as console.log() with the exception that log messages are given the info flag. This can be handy as the developer tools console has a feature that allows you to filter log messages using flags.

console.info('Hello Treehouse');

Note the blue info icon to the left of the log message in the image below.

Logging info messages with console.info()

console.profile([profile]) & console.profileEnd()

The console.profile() method will start a new JavaScript CPU profile if the developer tools are open. You have the option to specify a label for the profile if you wish.

The console.profileEnd() method will complete the profile.

function animationUI() {
        console.profile('Animating');
    
        // Animate something...
    
        console.profileEnd();
    }

This example shows how you might use the profile() method to create a new CPU profile for the animateUI() function.

Creating a JavaScript CPU Profile with console.profile()

console.table(data)

The console.table() method allows you to output structured data as an interactive table in the console.

var data = [
        {first_name: 'Matt', last_name: 'West', occupation: 'Programmer'},
        {first_name: 'Vince', last_name: 'Vaughn', occupation: 'Actor'},
        {first_name: 'Larry', last_name: 'Page', occupation: 'CEO'}  
    ];
    
    console.table(data);

Creating interactive tables with console.table()

This method can be really handy for examining data returned by an AJAX call.

Note: This method is not supported by the default Firefox developer tools. Instead use the Firebug console.

console.time(label) & console.timeEnd(label)

The console.time() and console.timeEnd() methods give you a way of timing how long it takes for a piece of code to execute. Both the time() and timeEnd() methods should be passed the same label parameter.

console.time('Draw frame');
    
    // Execute some code...
    
    console.timeEnd('Draw frame');

Timing code execution with console.time()

console.timeline(label) & console.timelineEnd(label)

The console.timeline() and console.timelineEnd() methods allow you to make a new timeline recording in the Chrome developer tools.

You have the option to specify a label for the new timeline. As with console.time(), this label must be the same in the calls to console.timeline() and console.timelineEnd().

console.timeline('Google Search');
    
    // Do some work.
    
    console.timelineEnd('Google Search');

Creating timelines in Chrome with console.timeline()

Note: The timeline methods are only available in the Chrome developer tools.

console.timeStamp(label)

You can manually add events to the timeline using the console.timeStamp() method. This method can be passed a label to help you identify the marker in the developer tools.

Creating timeline markers with console.timeStamp()

Note: This method is only supported in Chrome. It was previously called console.markTimeline().

console.trace()

The console.trace() method will print a stack trace for the point at which the method was called.

console.trace();

Using console.trace() to print a stack trace.

console.warn(object [, object, ...])

Finally, the console.warn() method will log a message to the console with a warning flag.

console.warn(‘This is a warning.’);

Logging warning messages with console.warn()

Summary

In this post you’ve learned about the various console methods that you can use to debug your web applications. You’ll find that you use some of these methods more than others, but it’s certainly useful to understand what can be achieved through the developer tools console.

I recommend that you check out some of the links in the Further Reading section below, especially dev tools tips and tricks from the Google Developers website.

What tools do you like to use when debugging your front-end web applications? Share your favorites in the comments below.

Further Reading

• MDN: Console Documentation
• Google Developers: Console API Reference
• Google Developers: Dev Tools Tips and Tricks

The post Mastering The Developer Tools Console appeared first on Treehouse Blog.

To be a Web professional is to be a lifelong learner. The ever-changing landscape of our industry requires us to continually update and expand our knowledge so that our skills do not become outdated. One of the ways we can continue learning is by attending professional Web conferences. But with so many seemingly excellent events to choose from, how do you decide which is right for you?

During the course of my career, I have had the good fortune to attend a number of conferences, workshops and professional events. I am often asked by Web professionals who are preparing to attend their first conference how they can select the right one for their needs.

In this article, I will share the methods that I have found helpful in choosing high-quality conferences, as well as some tips to help you get the most out of the events you decide to attend.

What Are You Looking For?

The first step to finding a high-quality conference is to decide what you are looking for. Every conference is different. Some focus more on the technical aspects of our profession, while others offer a diverse set of presentations, some that are inspirational or even business-focused that complement ones about code and other technical topics.

Check out a list of Web design events taking place from January to June 2014. (Image credit: opensource.com)

Personally, I have always enjoyed conferences that feature a varied set of topics and speakers, but your needs may be different than mine. Furthermore, your needs may change throughout your career. If you have to learn a new technology, perhaps for a project you are working on, then an event focused on that particular topic might be exactly what you need at that point.

Once you have a general sense of what you are looking for in subject matter, the next step is to do some research.

Research The Sessions And Speakers

Start your research by visiting a conference’s website and reading about the sessions. I typically look for topics that I am already knowledgeable about, as well as areas that I know little to nothing about but would like to be introduced to.

In my experience, finding a conference that reinforces and expands skills that you already have while exposing you to aspects of the industry that you are not as familiar with will give you a more well-rounded experience than simply revisiting topics that you already count among your strengths.

If session titles and descriptions have yet to be posted, then you can get a feel for the topics to be covered by looking at the speakers listed for the event. Most speakers specialize in a particular area, such as CSS, usability or content strategy. A recognized expert in content strategy will likely speak about content strategy in some form, so by reviewing their individual website and learning more about their work and expertise, you will generally get a sense of what their session will be about.

This is important for small events, whose available spots are limited. These events often sell out quickly, before the exact nature of the sessions is even announced, so getting a feel for the content by researching the speakers might be the best way to come to a decision before tickets are all gone.

In addition to sessions, many conferences offer optional full- or half-day workshops, which typically focus on particular topics in much more detail than normal sessions. So, if you are looking to learn more about a topic, consider adding a workshop to your plans.

Cost

The sessions are an important factor in choosing the right conference, but they are not all you must consider. Cost is another critical aspect.

The cost of attending a professional conference can be significant. I have seen tickets range anywhere from a few hundred dollars for a one-day event to a few thousand for a week-long conference. Before you look for an event, determine a budget. Whether you are paying or your company is picking up the bill, knowing what you can afford will help to immediately narrow your options.

If your company is paying, you will likely need to explain the event’s value and justify the expense. Resources such as Smashing Magazine’s “8 Reasons Why You Should Send Your Incredibly Hard-Working, Deserving Employee to the Smashing Conference” can help you make your case. Other conferences offer similar resources to provide to the decision-makers in your organization from whom you will be seeking approval.

Timing

Timing is also important. Finding a conference that works with your schedule, including the timelines of your clients, projects and other obligations, is sometimes tricky. I typically try to book a conference well in advance, when my schedule for that period has yet to be filled. I then work my future appointments and project work around it. I find this easier than booking an event late and then squeezing it into what little free time I have left. Booking in advance also allows you to take advantage of early-bird pricing, as well as to avoid being disappointed by sold-out tickets.

Get Away If You Can

The last consideration is location. Ticket prices can be high, and travel expenses (including transportation, accommodation and meals), if the conference is outside of your area, adds significantly to the cost. Still, getting away can really improve the experience.

Traveling makes a conference more of a special occasion. It’s not a vacation, but it is a break from your normal routine. If you commute from home, then you’re more likely to treat the end of the day as the end of any other work day, skipping after-conference gatherings and activities (more on these shortly) which are the most valuable asset of every conference experience. Being away from home helps you to avoid falling into your normal routine and immerses you more fully in the event.

When figuring out your budget, factor in travel costs so that you can consider events away from home. This is not always practical, and you might be restricted to conferences in your city or nearby (if you are lucky enough to live next to a city that hosts professional Web conferences). But if you can find the budget to travel, seize the opportunity!

Prepare To Be Social

Web conferences open you to fresh ideas and approaches, while energizing and exciting you for work. Education and inspiration are not the only benefits, though. Socializing with your colleagues in the industry is an important part of the experience, too. And to truly realize this benefit, you must put yourself out there and be social.

Most events that I have attended over the years included meals for attendees — typically, breakfast and lunch. I always get to the venue early on the first day to grab some breakfast. As I enter the eating room, I look for people to join and introduce myself to. After introductions and some conversation, I’ll know a bit about them and have begun to make connections.

I repeat this process at lunch and every day of the event, finding new people to meet each time. Over the years, I have met some incredibly cool people, and I maintain contact with many of them — typically, through email and Twitter. These relationships have become extremely valuable to me, giving me peers to bounce ideas off, share new work with and turn to for help.

I remember a project from a few years ago in which a tricky bit of CSS was giving me problems. I tweeted the issue, asking for help. Within minutes, two fellow front-end developers whom I had met at separate conferences each replied to me with workable solutions. That is powerful, and it was the result of putting myself out there and being willing to meet new people.

In addition to meals, some conferences hold “jam sessions,” which encourage attendees to interact and present their findings to each other. This is another opportunity to be social, so don’t be shy! Get out there, meet new people, ask questions, share your experiences, and begin forming lasting, worthwhile relationships with others in the industry.

Party Time

Every conference I have been to included some kind of after-party. Absolutely take advantage of these opportunities. Sadly, many attendees decide to skip them.

As mentioned, if you are close to home, you’ll be tempted to blow off the after-parties and get back to your normal routine. Doing so, however, will rob you of another chance to meet interesting people and form worthwhile relationships. While I have certainly met great people at mealtime, upbeat after-parties have an even better atmosphere in which to connect with other professionals.

Some people I have met at parties have become not just professional contacts, but friends. I would not have made those connections had I decided to go back home or to my hotel room.

When going to a conference, be ready to socialize. (Image credit: Kris Krug)

Adjust your schedule to arrive early enough to enjoy breakfast and late enough to attend the after-parties. Have business cards on hand, and do not be afraid to ask others for their card or contact information.

This doesn’t mean turning the event into a pure networking session, where all you do is gather cards and email addresses. But if you meet someone whom you enjoy speaking with, ask for their card and reach out to them after the event. Remember, socializing and networking are as important as learning and being inspired, so put yourself out there and make some connections!

Leave Work At Work

To get the most out of a conference, focus on the event itself and put work aside for a bit. This can be challenging, especially if you are a freelancer with no one back at the office to cover for you. But focusing on a presentation or conversation is hard when your attention is on the current work project open on your laptop.

For years, I would bring projects with me to conferences to stay on top of the workload. Even if I wasn’t working on a project, I would have my laptop or tablet ready to reply to all emails and would remain constantly available to clients and colleagues. After a while, I realized that I often focused more on my device than on the presenters. That is a problem, and I realized that I needed to make a change.

For the last few conferences I have attended, I have left my computer in my bag during sessions. No working on projects. No checking email. I just focus on the presentation. I instead use breaks between sessions or time after lunch to quickly respond to any critical emails, leaving less important communication for when I return to the office.

Even doing so, I am careful not to cut into the conference’s social time, and I restrict myself to a few minutes to handle issues that simply cannot wait. In fact, very few emails I get fall into this category, so there really is no need to rush to reply at the expense of the conference experience.

Actually some of the best conferences my colleagues have attended are the ones that have no Wi-Fi at all, using it as a feature rather than a shortcoming. This way attendees are encouraged to be more active at the event and engage into conversations happening during the conference days. The only issue is that if you travel from abroad, you can’t follow conversations on Twitter. But quite often you’ll find out that you’ll need a SIM-card with some data anyway (for the party or finding directions), and that’s perfectly enough for minor tasks anyway.

You decided to attend the conference for a reason, and it was not to catch up on work. Break away from that job for a while, as hard as it is. Even if you think you can juggle work and the conference, put away the computer and concentrate on the presenters. You will find, as I did, that you get so much more out of the presentations and conversations between presentations (which are at least as important).

Take Notes

Taking notes seems obvious, but how you take notes makes a big difference. I used to use my tablet, but now that it’s tucked away during presentations, I can no longer use it to take notes. Instead, I’ve gone low tech and started using good old fashioned paper and pen.

Once I began using a notepad, I found that my notes make more sense to me and that I retain much more. The combination of focusing on the session and writing down notes and my thoughts really help the content sink in. I also find myself taking more notes than before (likely because I’m paying closer attention) and getting more out of each presentation as a whole.

The notes will help you absorb the content and regroup once the conference is finished. (Image credit: chungholeung)

Similarly, I have spoken with a number of fellow designers who enjoy “sketchnoting” at events and who report similar results. By taking down notes on paper — in their case, very creatively — they absorb and retain more from the sessions. So, pack a notepad and pen, and prepare to go old school with your note-taking!

Regroup, Reflect And Share

Feeling overwhelmed by work when you return to the office is normal, especially if you have taken my advice and left work at work during the conference. Getting back in the swing of things can quickly push the conference to the back of your mind, so you need a process to bring it to the forefront.

As soon as I get back to the office, before even checking my backlog of email, I download any session materials that conference presenters have made available. I also schedule a few hours, no later than a week after having returned, to sit down with other members of my team to discuss what I took away from the event.

With the slides and my notes on hand, I teach others in my organization what I learned. Explaining the content to others reinforces what I have learned and ensures that it sticks with me long after.

Be sure to schedule some time to review what you have learned. Even if you do not have colleagues to share with, download the session material and review your notes to make sure that the lessons are not soon forgotten. You could also organize or attend a local meeting with other Web professionals in your area to share what you’ve learned. You can use tools like Meetup to find or initiate meetings in your area.

Take A Break

Look at a handful of Web conferences and you will likely see the same presenters at many of them. Some might even give the same presentation at multiple events. This makes sense. Different events have different audiences, so to reach the most people and get the most mileage from their heavy preparation, speakers will often take their presentation on the road to multiple events.

The problem is that if you attend several events in a short span of time, you will begin to see talks repeated or, at least, sessions that are very similar to ones you have attended. I went through a period of attending four or five conferences a year for about three years. Towards the end of that time, I found that the sessions were getting repetitive. I was seeing the same speakers year after year, and their presentations felt like little more than updates to what I had heard the year prior.

I spoke with other attendees at these conferences and noticed how excited they were by the material, as excited as I was when first introduced to it. The problem was that it was not new to me any longer. I was not getting much out of the conferences because there was too little new information to justify the expense, of both time and money. It was time for a break.

Bringing this back to where we began, first determine what you want to learn at an event. If the sessions offer mere updates to content you already know well, then skip the event, even if you have the time and budget.

Also, consider events that are very different from what you normally look for. Instead of a Web conference, look for something totally different, something that will expand your skill set or knowledge. That really is what it’s all about after all.

In Summary

Attending a professional Web conference can be a wonderful experience. To get the most out of it, remember these points:

• Determine what you want to learn and your budget. This will narrow your options.
• Research sessions and speakers to get a feel for what will be covered.
• If you have the budget, consider traveling to get the most out of the event.
• Prepare to be social and to meet others in your industry. Attend all meetups and after-parties and exchange contact information to form lasting relationships.
• Concentrate on the presenters, not your computer. Leave work at work, and focus on what you came for.
• By taking notes with pen and paper, you will absorb and retain more and get more from your notes.
• Afterwards, schedule time to review what you have learned, and, if possible, share it with others in your organization or area.
• Take a break from conferences if you find them becoming too repetitive. There is no point in attending a conference that you will get little out of.
• Have fun. Conferences are a good time! Get ready to be educated and inspired, but also enjoy yourself!

(al, ea, vf, il)

© Jeremy Girard for Smashing Magazine, 2014.