Questions tagged [javascript-debugger]

JavaScript debugger are tools that let you debug your JavaScript code by pausing the execution at any time, step through the code and see what each variable available looks like at that moment.

JavaScript debuggers allow step debugging of JavaScript code. Using them you can set breakpoints within the code. When a line of code is executed, which has a breakpoint set for it, the execution stops at that line and allows to execute the code step by step.

While stepping through the code the debugger displays all variables available within the current stack frame and typically also allows you to set some watch expressions.

As one of the main use cases for JavaScript are web browsers, different browsers have integrated tools to debug JavaScript. These tools are:

Furthermore IDE's like NetBeans or Eclipse also include debuggers for JavaScript.

See also

370 questions
89
votes
6 answers

React dev tools - Deactivate "break on warnings"

While developing with create-react-app, my browser enters debugger mode on warnings: It breaks on the source code of react-dev-tools: // --- Welcome to debugging with React DevTools --- // This debugger statement means that you've enabled the…
Noan Cloarec
  • 2,024
  • 2
  • 13
  • 25
83
votes
8 answers

How can I inspect element in chrome when right click is disabled?

I want to debug a info box that shows when I mouse over a google map marker. But google map disables right click anywhere on the map canvas, so I can't inspect the element for debugging / viewing purposes. I tried to search for the element by the…
66
votes
4 answers

What is step into, step out and step over in Firebug?

I am new to FireBug Debugger can anyone say what is step into,step over and step out
akila
  • 741
  • 2
  • 9
  • 11
62
votes
4 answers

Using Firefox, how can I monitor all events that are fired?

I'm trying to debug a web page that makes heavy use of events, and so I need to monitor all events that are fired. Most of the events are bound using jQuery. Hence, it would be particularly useful if there was a way to specifically monitor only…
gsharp
  • 27,557
  • 22
  • 88
  • 134
60
votes
11 answers

customize chrome developer tool javascript debugger keyboard shortcuts?

I can't believe that neither a Google or SO search has turned up a definitive answer or even much discussion for this, but: Is it possible to edit/customize keyboard shortcuts in the Google Chrome JavaScript debugger? if so, how? I'm used to…
52
votes
6 answers

How to go backwards while debugging Javascript in Chrome sources debugging?

Chrome sources debugging has buttons for step over, step into, and step out. There is no stepping backwards in time to see what were the previous functions.
HaoQi Li
  • 11,970
  • 14
  • 58
  • 77
50
votes
25 answers

How to disable Remote JS Debugging in React-Native

I realize that the normal way to disable debugging is by going to the developer menu. The problem is that since I turned on debugging for my app I am testing (React Native & Android emulator) I have been getting a white screen when the app loads…
Gotts
  • 2,274
  • 3
  • 23
  • 32
44
votes
16 answers

Is there something like "Firebug for IE" (for debugging JavaScript)?

I'm trying to fix some JavaScript bugs. Firebug makes debugging these issues a lot easier when working in Firefox, but what do you do when the code works fine on Firefox but IE is complaining?
Cristian
  • 42,563
  • 25
  • 88
  • 99
43
votes
7 answers

How to force Chrome debugging tools to debug in pretty code?

Although I used pretty code and had set up the breakpoints in "Pretty code" tab, debugger keeps working in minified code. (I can't see exactly where I am and need to continuously switch between source and "pretty code"). On same pages with same…
42
votes
10 answers

Google Chrome Developer Toolkit is Slow

I have been using Google Chrome's dev tool kit (element inspection, stack trace, javascript debugging, etc.) for some time with great success. However, about two weeks ago, it suddenly became VERY sluggish. For example, when I right-click an…
Matt Cashatt
  • 23,490
  • 28
  • 78
  • 111
37
votes
3 answers

How exactly does document.cookie work?

If I get Chrome to show me document.cookie by going into the console and typing document.cookie; it'll give me, say: "name=John; gender=male"; But then if I type in, say, document.cookie = 5; all it does is add 5; to the start of the string, so I…
Jack M
  • 4,769
  • 6
  • 43
  • 67
32
votes
3 answers

Chrome devtools: Drop into debugger without switching to Sources tab

If I put the debugger statement in my JavaScript source with the Chrome devtools open, it'll stop execution so I can interactively explore the current context from the console. It's really awesome. But unfortunately it will also switch to the…
31
votes
2 answers

Running code snippets from Google Chrome console command line, using (experimental) code snippets feature?

Reference: Using the new code snippets feature in google chrome I am using the code snippets in google chrome, so say I have a snippet file. check_consistency.js Is there an api or a global object through which we can run the snippet directly from…
27
votes
3 answers

What's the difference between "DOMContent event" and "load event"

In chrome's Developer tool, the blue vertical line labeled "DOMContent event fired", and the red line labed "load event fired". Does "DOMContent event fired" means the browser begin to execute the inline javascript? And "load event fired" means it…
25
votes
3 answers

ES6 module import is not defined during debugger

While playing around with Babel and Webpack I stumbled into some really weird behavior today. I threw a debugger in my main.js to see if I was importing correctly, but Chrome's console kept yelling that the module I was trying to import was not…
Salar
  • 861
  • 9
  • 13
1
2 3
24 25