Debugging JavaScript using Breakpoints with the Google Chrome Developer Tools

Peter WebExplorations · 145K views · 2012 · 11:24

Open on YouTube

Testing, debugging & developer toolsWeb developmenttutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it when answering beginners whose JavaScript gives wrong values or NaN, as a simple introduction to debugging with Chrome's breakpoints instead of guessing.

Recommended by 4 people across 4 different months, 2013 to 2017.

What it is

An 11-minute screencast by Peter K. Johnson of Web Explorations, made for a South Central College web course. It shows how to set breakpoints and use Chrome's built-in Developer Tools to pause JavaScript on a line and inspect what the program is doing.

What people said

Recommends Flipbed · 2013-05 · Stack Overflow · on “How to set image brightness to back it's original brightness?”

Yes but if you use debugging in firefox or chrome you can freeze the javascript at a certain point to view the value of 'brightness_val' and check that it in fact does have a lower value when you expect it to. Check this video on how to do debugging in chrome: [this video]

Recommends Bill · 2014-06 · Stack Overflow · on “JavaScript mortgage loan calculator returning "NaN" for monthly payment”

A great opportunity to learn to use the debugger to step through your code. Add a couple of breakpoints in your functions that calculate the values and set a watch on the variables that are used to calculate the monthly payment and determine where they start returning an invalid value. You'll find the offending code in no time :) You can read about the debugger for Chrome at [LINK] . There is also a decent introductory video at [this video] . Also, although not technically required, you should be ending your statements with a semi-colon. If you don't know all of the various statement rules for Javascript, leaving out the semi-colons can have unexpected results.

Recommends FuzzyAmi · 2014-07 · Stack Overflow · on “content script in chrome extension”

The problem is probably here: var body=document.getElementById("search"); the "body" variable is null - probably because the id you're looking for doesn't exist. Try looking for some other id (I used "gbqfb"). But rather than feeding you the answer here, what you should really do is learn to use Chrome's built-in debugger to find out why your code isn't working. Have a look at this youtube video: [this video]

Recommends phuwin · 2017-07 · Stack Overflow · on “create a list of passwords from password generator”

You can use a developer tool in your browser to debug the problem. For example with Google Chrome, you can check this video out [this video]