Web Development

JavaScript Debugging

JavaScript Debugging is section 21 of Beginner’s Guide to JavaScript.

Don’t be panic. You don’t need any special tool installed on your machine. They are already on your machine, you just need to know how to use them. That’s all. So here we are telling how to use them.

Writing JavaScript code without a debugger. Dude! you’ll soon be lost. Normally, errors will happen, every time you try to write some new JavaScript code. It is difficult to write JavaScript code without a debugger. Your code might contain syntax errors, or logical errors, that are difficult to diagnose. Often, when JavaScript code contains errors, nothing will happen. There are no error messages, and you will get no indications where to search for errors.

What is Debugging?

Searching for errors in programming code is called code debugging.Debugging is not easy. But fortunately, all modern browsers have a built-in debugger. Built-in debuggers can be turned on and off, forcing errors to be reported to the user. With a debugger, you can also set breakpoints and examine variables while the code is executing. Following are the things you need to know when you start debugging your program.

The console.log()

If your browser supports debugging, you can use console.log() to display JavaScript values in the debugger window.

[code languague=”html”]

My First Web Page



[/code]

Breakpoints

In the debugger window, you can set breakpoints in the JavaScript code. At each breakpoint, JavaScript will stop executing, and let you examine JavaScript values. After examining values, you can resume the execution of code typically with a play button.

The debugger Keyword

The debugger keyword stops the execution of JavaScript, and calls if available the debugging function. This has the same functionality as setting a breakpoint in the debugger. If no debugging is available, the debugger statement has no effect.

With the debugger turned on, this code will stop executing before it executes the third line.

[code languague=”js”] var x = 15 * 5;
debugger;
document.getElementbyId(“demo”).innerHTML = x;
[/code]

Major Browsers’ Debugging Tools

Normally, you activate debugging in your browser with F12, and select “Console” in the debugger menu.

Web Browser Icons

Otherwise follow these steps:

Chrome

  • Open the browser.
  • From the menu, select tools.
  • From tools, chose developer tools.
  • Finally, select Console.

Firefox

  • Open the browser.
  • Go to the web page:
    http://www.getfirebug.com.
  • Follow the instructions how to:
    install Firebug

Internet Explorer

  • Open the browser.
  • From the menu, select tools.
  • From tools, chose developer tools.
  • Finally, select Console.

Opera

  • Open the browser.
  • Go to the webpage:
    http://dev.opera.com/articles/view/opera-developer-tools.
  • Follow the instructions how to:
    add a Developer Console button to your toolbar.

Safari

  • Open the browser.
  • Go to the webpage:
    http://extentions.apple.com.
  • Follow the instructions how to:
    install Firebug Lite.

What’s Next?

Learn what is Coding Conventions

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW