Skip to content

debug_tools.md

Latest commit

 

History

History
55 lines (39 loc) · 2.34 KB

debug_tools.md

File metadata and controls

55 lines (39 loc) · 2.34 KB

#Debugging and tools

Debugging

As you write software you will make mistakes a lot.

Sometimes it will be easy to find a problem or bug, sometimes you will struggle... sometimes it will feel impossible. Relax! This is an integral part of programming... It will drive you semi insane, but it is a skill you need to master.

A bug in software development refers to a problem. If a program has a bug it means that it has an issue which stops it from working, or it doesn't work as we expect. Finding bugs in Javascript can sometimes be hard and a bit frustrating to say the least. Luckily the Chrome web browser comes with some tools that go a long way to help us find the problems in our code.

###The Chrome developer tools include:

  • Developer Tools
  • Javascript Console

To access them:

  • Click on the three lines to the right of the address bar in your browser now
  • Then click 'More tools'
  • Look for 'Developer Tools' and 'Javascript Console' in the options available.
  • When you click either one of them a screen will appear at the bottom of the screen in Chrome.

These will allow you to do various useful things such as:

  • Identify HTML Elements by clicking in the browser
  • See which CSS tags are affecting a specific element
  • Switch of the CSS styling at affects the selected element
  • Look at the Javascript source code used by your web page
  • Add a breakpoint in Javascript sourcecode

This is just to mention a few of the things you can do in Google Developer tools. Other browsers have similar capabilities, but some times you need to install a browser plugin. In Firefox you can install the excellent Firebug plugin to get developer support.

Sublime Text

Sublime Text editor is a text editor with lots of nice features which make your life as a developer much easier.

A few of those features includes:

  • Basic code completion - based on content in your file
  • Syntax highligting
  • Html tag completion
  • Html file basic templates

Let's try some things:

  • Create a file called index.html in Sublime text
  • At the first line in the file type html
  • Now press 'tab'
  • What happened?
  • Save the file...
  • Now in the body tag type h1
  • Press press 'tab' again
  • What happened?
  • In the body of the tag you just created type 'Hello World!'

Now that you're more familiar with the tool set, you're ready to write some code. Get going [here!] (lets_code.md)