how to track Variable without using old-school alert('variable'); ..?

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

how to track Variable without using old-school alert('variable'); ..?

toptomato

i'm returning, or trying to get back into JS programming.

what's a better way to track a variable, better than using alert('variable')?

thanks,

trying to catch up here.

Lesshardtoofind

I depends on the situation and the web browser it appears. If the browser being used allows Javascript to run in the main GUI thread then the window won't update until the javascript is finished processing meaning the variable won't be displayed until the end.

https://bugzilla.mozilla.org/show_bug.cgi?id=62778

if you use an interval

http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/index.html

then you could update the inner html of a "debugging" div.

Hope that makes sense.

Lesshardtoofind

Here is a small example::

<!DOCTYPE html>
<html lang = "en-US">
<head>
</head>
<body onload = "DoIt()">
  <div id = "debugger" style = "left: 5%; top: 5%; height: 100px; width: 100px; position: absolute; background: #EEEEFF;">
  </div>
  <script>
    var x = 0;
    var IntervalId;
    function countup()
    {
      x++;
      var Debug = document.getElementById("debugger");
      Debug.innerHTML = x;
    }
    function DoIt()
    {
      IntervalID = setInterval(countup, 1);
    }
  </script>
</body>
</html>

rtrethewey

If an alert() won't help me, I generally use a variation on the method shown above by Lesshardtoofind, you can also use Firebug in Firefox, the JavaScript Console in Chrome, or Internet Explorer's built-in debugging tools to monitor variables and set breakpoints.

Lesshardtoofind

I use the Firefox tools as well. Highly informative!

toptomato

huge thanks everyone!

johhny-s

Don't forget about console.log(). It will give you a detailed breakdown of the contents of any variable; its particularly useful for objects (ie arrays)