Server- and Client-side Code

Have different methods for debugging:

Server : Outputting statements directly to the webpage

$array = [
    "cat" => "meow",
    "dog" => "woof",
    "fish" => "blub blub",
    "fox" => "???"
];

echo("debugging array:");
print_r($array);

Which results in:

debugging array:
Array
(
    [cat] => meow
    [dog] => woof
    [fish] => blub blub
    [fox] => ???
)

Many times, this isn't a viable option. Plus it's pretty sloppy.

Server : Error Logging

Server-side languages typically include a built-in class or series of methods to handle logging errors and debug statements.

PHP provides a number of methods to handle error logging, the simplest of which is error_log().

Python has a built-in Logging module to report events of varying severity:

import logging
logging.basicConfig(filename='whoops.log',level=logging.DEBUG)
logging.debug('Tracing stuff and things')
logging.error('DEFCON ONE')

Client : Printing directly to the webpage

var jebediah = {};
jebediah.courage = 100;
jebediah.stupidity = 50;

if (jebediah.courage > jebediah.stupidity)
{
    document.write("Jeb is courageous and ready to go!");
}
else
{
    alert("Jeb isn't quite bright enough to know what's going on!");
}

This is old school, and there are much better options available to you.

Client : Using the inspector & developer tools

Modern browsers have powerful built-in tools to help debug your code.

A Brief Tour of the Browser Developer Toolkit

These features are common across most browsers.

The DOM (Document Object Model) Inspector

Browser: Firefox

The Javascript Console

Browser: Chrome

The Network Profiler

Browser: Safari

The Error Console

Browser: Opera

The DevTools in Practice

Practically debugging javascript

First, some quick javascript:

var starship_enterprise = {};

starship_enterprise.series = "TNG";
starship_enterprise.registry = "NCC-1701-D";

starship_enterprise.crew = [
    "Jean-Luc Picard",
    "Will Riker",
    "Geordi La Forge",
    "Worf"
    "Beverly Crusher",
    "Data"
];

document.getElementById("container").innerHTML = starship_enterprise.registry;

What happens when this script fails to display anything?

In most cases, the console does a good job of identifying the error and offending line of code.

And the line in question:

"Geordi La Forge",     // Line 11
"Worf"                // Line 12
"Beverly Crusher",    // Line 13

Whoops - looks like we missed a comma.

Perfecting Your Technique: Breakpoints & Watch Expressions

Breakpoints allow you to pause code execution at a designated line.

Breakpoints can become conditional:

This breakpoint will only pause execution when i iterates to 8.

Watch expressions allow you to inspect values of variables or expressions as they exist on the paused line of code.

Inspecting the starship_enterprise object:

Concatenating strings:

And finally: javascript can be executed directly from the console.

Improving Your CSS-Fu with the Developer Tools

Highlighting elements in the inspector provides a breakdown of their associated styles.

An h3 element like this one will have the following styles:

Don't like what you see? You can edit, add, or hide styles directly from here.

New style rules can be added in addition to editing existing ones.

Note that any changes made in the inspector aren't saved to existing stylesheets - the changes will be lost when the page is reloaded.

Lastly, you can view and edit the box model directly from the inspector.

What about mobile browsers?

Both mobile Chrome and Safari provide virtual and remote debugging features.

Windows phone and IE10 do not provide an analagous debugging solution, unfortunately.

This presentation will demo debugging mobile Chrome.

Instructions for debugging mobile Safari are available here.

The process is easy and only requires a development machine running Chrome, an Android device running Chrome, and a USB cable.

You will need to install the ADB Chrome Extension on your development machine.

• Enable USB debugging on your Android device.
• Connect the device to your development machine and start up the Chrome app.
• In the Chrome app on your device, go to Settings > Developer Tools and enable USB Web Debugging.
• On your development machine, click the ADB extension icon and select Start ADB. The icon should update with a number indicating the number of connected devices (in this case, 1).
• Click the icon again and select View Inspection Targets. A new tab will open with your device(s) and the tabs open on each. Selecting inspect for a tab will open a browser inspector window.
• All set! Debugging a page in mobile Chrome is identical to working with one on your development machine of choice.

If you don't have an Android device, you can test mobile Chrome virtually using the overrides feature in DevTools.

Click the Settings gear on the bottom-right of the DevTools window, and select Overrides on the left-hand menu.

You can customize the user-agent and device metrics, geolocation, and device orientation to match different devices.