Day 007 - Tools - Reading

Ok, so now you've gone over some of the basics, let's get a bit of code working.

Copy the following code or view the demo:

<html>
<head>
    <meta charset="utf-8">
    <title>Console Log</title>
</head>

<body>

<button>Button</button>

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.0.min.js"><\/script>')</script>

<script>

    $('button').click(function(){
        console.log('button is clicked');
    });

</script>

</body>
</html>

Paste this code into a new file, save this somewhere and open in Google Chrome. If you don't already have Google Chrome you can download it here.

In Google Chrome you want to view the console. This can be found in Google Chrome's Developer Tools View > Developer > Developer Tools or use the shortcut alt + cmd + i.

By default the Elements tab is selected, select the console tab. Now click the button that's in the browser window, you should now see the text button is clicked appear in the console. Awesome. This will come in very handy in future posts to work out what jQuery is outputting.

The console and Google Chrome Dev Tools is where I spend a vast amount of time whilst developing, it's also possible to theme. I use https://github.com/simonowendesign/SO-Dark-Monokai-v3. Still needs some work, but it's getting there.

Day 007 - Tools - Reading

Tweet