Websites use several different Website coding languages to work. All websites use HTML, CSS, and JavaScript to render the webpage to the visitor.

When the website is loading but the website is not displaying correctly, this is usually due to a coding error on the site. Usually this is caused by JavaScript or CSS errors. This article will focus on diagnosing JavaScript coding errors.

How do I know its a JavaScript problem?

JavaScript is used to make different behaviors happen on your site. These behaviors are all done through the Visitor of the sites browser. Examples of this are Image Slide Shows, Pop Up boxes, Menus, and more. When your website loads, but the behaviors on your site stopped working, this is usually because of the JavaScript code not working.

What happens when your JavaScript fails?

If you have JavaScript's on your site that are not working you can diagnose them by using your browsers "Error Console". Each browser has a built in "Error Console" for diagnosing scripting errors on your site. Below will show you how to check the "Error Console" in FireFox, Internet Explorer, Chrome, Opera, and Safari.

Diagnosing a JavaScript error

Simple JavaScript pou up Error ConsoleIn order to explain how to diagnose a JavaScript error, we will use the simple "pop up" script below (Snapshot to the right shows what it does):

<script>
function myFunction()
{
alert ("I am an alert box!");
}
</script>

This script simply creates a pop up box that says "I am an alert box!". We will break the script so that is causes an error by removing one of the quotes like the following.

<script>
function myFunction()
{
alert (I am an alert box!");
}
</script>

Broken code for example Error ConsoleWhen the website is ran, the code will break where the quote is missing. The snapshot to the right shows the code that's broken, and where the lines are in the code.

In this case Line 33 is broken. The methods below will show you how to find the lines of broken code through your browser.

Javascript console for FireFox

Using the code example from the "Diagnosing a JavaScript error" section above, We will find the JavaScript error using Firefox.

  1. Open FireFox.
  2. Fire fox Error Console toolsGo to Tools > Web Developer > Error Console. If you do not have Tools at the top you can use the following shortcut:
    Ctrl + Shift + J

  3. FireFox Error Console windowVisit the page with the error. In this case you will see the error on Line 33 in the FireFox Error Console. See image to the right.

Javascript console for Internet Explorer

Keep in mind we are using the code example from the "Diagnosing a JavaScript error" section at the beginning of this article. Below is how to use the Error Console in Internet Explorer.

  1. Open Internet Explorer.
  2. Press the function key on your keyboard, F12.
  3. Internet Explorer Error ConsoleVisit your webpage with the error. You will see the error with the line number of where the error occurs in the document in the bottom Error Console window. The snapshot to the right shows the error on line 33.

Javascript console for Chrome

From the "Diagnosing a JavaScript error" section example towards the top, we will find the JavaScript error on a webpage in Google Chrome.

  1. Open Google Chrome.
  2. Click the "Customize and Control Google Chrome" button at the top right side.
  3. Chrome tools Error ConsoleFrom the drop menu, go to Tools > JavaScript console. Or you can press:
    Ctrl + Shift + J

  4. Chrome Error Console windowVisit the site with the error. In the Error Console window you will see the error show on line 33. See image to the right.

Javascript console for Opera

Continuing to diagnose the error from "Diagnosing a JavaScript error" section, we will find the JavaScript error on a webpage in Opera.

  1. Open Opera.
  2. Click the Opera button towards the top right.
  3. Opera page developer Error ConsoleNavigate to Page > Developer Tools > Error Console. Or you can press the following keyboard keys:
    Ctrl + Shift + O


  4. Opera Error Console windowThe Error Console will pop up. You can move the window to the side while you visit your site. You will see the errors list when you visit the site with the broken code. The image to the right shows the error on line 33.

Javascript console for Safari

Continuing the previous example error from "Diagnosing a JavaScript error" section, We will look at the Error Console in Safari.

  1. Open up your Safari browser.
  2. Click the "Display a menu of general Safari settings" button towards the top right that looks like a gear.
  3. Safari Preferences Error ConsoleClick Preferences.
  4. Safari Show Develop menu Error ConsoleOn the Advanced tab, make sure you have the "Show Develop menu in menu bar" box checked.
  5. Show the Error Console in Safari"Display a menu for the current page" icon towards the top right that looks like a paper with a bent corner.

    Go to Develop > Show Error Console. Or you can press:

    Ctrl + Alt + C

     


  6. Safari Error Console windowVisit your webpage that is broken and check the Error Console at the bottom. The errors will list when you refresh your browser. In this case you can see the error on line 33 in the snapshot to the right.
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 200904

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!