Debugging Javascript code [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 2 years ago.

Improve this question

What's the best way to debug javascript? I'm currently using Fire开发者_StackOverflow中文版fox 4 with the latest Firebug. I love Firebug, DOM and debugging control is good. Unfortunately, it doesn't always report errors. My javascript app will just kind of stop working (crash) and the Console -> Errors (or All) tab will be blank. So then I have to go through the debugger, set my breakpoints and step through the code. Stepping through the code isn't as intuitive sometimes as you might think either (occasionally it'll jump to jQuery code or some other library). Can be a pain.

I always fix the bugs, I'm just hoping there's a quicker way to do so. Being informed of errors as they happen would make my work go a lot faster...

Is there a better tool than Firebug? Is there a setting I need for Firebug to always report errors? Should I use a different browser for debugging?

---

You should try Chrome's developer tools, that's what I use all the time. DOM inspector, resources tracking with local databases, cookies, etc. network activity, js debugger, timelining, profiling, auditing. I think it's really really nice.

---

Lately, I've been having a lot of success with IE Development Tools. They're built in Javascript debugger allows you to set breakpoints as you would in Visual Studio and step through them pretty easily, and also shows an "Immediate" window as well.

Pretty nice for Microsoft ;)

---

You should consider trying Safari with the Develop menu enabled. I love Firebug, too, but sometimes it's not the right tool for the job.

It has a debugger and a profiler, and it may help you out.

---

Firebug in my opinion is still by far the best tool out there for debugging JavaScript(though I must admit Web Inspector in webkit is catching up).

If you are bothered about Console tab being blank(because of a refresh or other actions), you can hit "persist" in the Console tab.

That will not erase any logs that you throw to the Console.

Also, I am not sure what you mean by "it doesn't always report errors". All errors that you log to the console will show up. Its up to you to put those log statements in your code though.

You can also turn on "strict mode" available in ES5 that will prompt you further with warnings and silent errors.

EDIT:

Also, I would highly recommend running your code through JSLint. That will help out solve some issues as well.

---

JavaScript isn't the easiest language to debug, that's for sure. But I think Firebug is one of the better debugging tools. It sounds like you are running into some odd errors. But when you are debugging you can use the "Step Out" and "Step Over" buttons to skip over debugging the jQuery functions if you want. That should help you find your problems a little quicker.

---

The error your getting (when the code stops execution with no error) is something like the javascript equivalent of a segfault - it happens when your script tries to do something impossible, and the browser has to step in and stop it. You don't get an error message, because it's not causing an error - it's doing something that should be perfectly legal, but in this case isn't - e.g. accessing a null pointer. The only way to debug this is to step line by line through the code. However other browsers, which have distinctly different implementations of javascript, might produce an error when this occurs that you can detect. Though I hate to say it, Internet Explorer has occasionally been useful to me in this regard, as it does report a number of errors that firefox just dies on.

To summarize: Try using a different browser, and if that doesn't work, you're out of luck.

---

I have had great success with Firebug and some growing pains.

JavaScript is a language that allows for some silent failures. jQuery can also make debugging painful.

sometimes I make my JavaScript more verbose until I get it working right. And debug points line by line and just run to the next debug point, debugging into jQuery is useless. Also make use of console.log() to check values in your JS has been very helpful

terse - hard to debug:

    function doSomething(cost, sale, myArray, span) {
      var id = $(span).attr("id");
      var isProfit = sale > cost;
      return isProfit ? myArray[id] : isNew;'
    }

expanded - easier to debug

function doSomething(cost, sale, myArray, span) {
  console.log("cost: " + cost);
  console.log("sale: " + sale);
  console.log("span: " + span); 

  debugger;
  var id = $(span).attr("id");

  debugger;
  var isProfit = sale > cost;

  debugger;
  var arrayVal = myArray[id];

  return isProfit ? arrayVal  : isNew;'
}