JS :(

STEPS TO DEBUGGING JAVASCRIPT ISSUES

1) Check to see that you are working on the right files
It’s easy to mix up the files on your local machine with those on the server, or the scripts.js file in one folder with the scripts.js from a previous project. If you are making lots of changes and none of them are showing up on your site, you might be editing the wrong file.

2) Check to make sure all files are loading
The easiest way to do this is to open up Firebug, click on the ‘Script’ tab (if it’s not enabled, you might have to enable the tab and refresh the page), and then click on the file drop-down (it’s the third item on the bar above the main area in Firebug, to the right of the orange pause button). When you click it, you will see a list of all the files that your site is using that contain javascript. If you don’t see a particular file, you might have linked to it improperly in your HTML. If you are using jQuery, you should see the jquery library .js file. You should probably also see your scripts.js file. This tab will also help you accomplish Step #1, ensuring that the site is loading the correct file. Whatever changes you make in your text editor should also be in your code when you view it in Firebug. If not, then there is a problem.

3) Check to make sure you aren’t loading duplicate files/libraries
Look at each of the script links in your HTML file to see if any are pointing to files with similar names. For instance, if you are linking to a local version of jQuery and the version hosted on the Google Code website, your code will probably run into all sorts of conflicts. This typically happens when you start using a plugin that relies on jQuery and you just copy and paste their script links. Keep in mind that some libraries might be the same and have very different naming styles. For instance, in Google Code, the jQuery file name looks like “jquery.min.js”, but if you download a version with a plugin or from the jQuery website, it might look like “jquery-1.9.1.min.js”. All the same, linking to both of these files will mess up your code. Make sure you know and understand what each of your links are pointing to.

4) If you’re using jQuery, make sure you’ve wrapped your javascript in the $() function
Any jQuery specific code should always appear INSIDE the main jQuery function.

—————–

$(function() {

(your code…)

});

—————–

Keep in mind when copying and pasting code that there should only be one of these functions in your javascript.

5) Check to see if you have any errors
The easiest place to check this is in the “Console” tab of Firebug. Make sure to refresh your page when you check this tab if nothing is there. Any errors in your javascript will typically prevent ALL javascript from running, so a problem in one part of your code might seem to be affecting some javascript that is completely unrelated.

6) Make sure that the code you are using is being applied to the right elements
Double check that the selector (eg. $(‘selector’)) is referring the correct element. Are you selecting a div tag when you mean to select an item inside of it? Are you selecting all <a> tags when you just mean to select the <a> tags in your nave? Did you forget to put a period in front of your class name? Think about what you are trying to do before you start coding to make sure you know what your goals are.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s