Debugging JavaScript - Chrome DevTools 101
Why Stack Overflow recommends it
Stack Overflow users link it when answering beginners who are stuck on a JavaScript bug and need to learn how to use browser devtools, breakpoints and single-stepping to find problems themselves.
Recommended by 5 people across 7 different months, 2018 to 2023.
What it is
A 7-minute official tutorial from the Chrome for Developers channel on debugging JavaScript with Chrome DevTools instead of relying on console.log(). It walks through the Sources panel, breakpoints and stepping through code, with a companion demo page and written docs.
What people said
Recommends Caleb Miller · 2018-05 · Stack Overflow · on “which JS function is triggered by a click on html element”
Chrome devtools does have a feature to help with this situation -- where you know an event is firing, but you don't what what code is running as a result. See the screenshot further below for reference. Open the Sources tab (you might have to click the arrow to see it). In the bottom-left panel, expand the section titled Event Listener Breakpoints , then expand the Mouse subsection, then check the click box. This will cause the Chrome debugger to pause on any click events. Now click the element on the page and Chrome will enter debugging mode. There may be multiple handlers called, some which you don't care about. Use the blue resume script execution button and/or the controls next to it do
Recommends user6794421 · 2019-04 · Stack Overflow · on “Absolute Positioning Trouble with Dropdown Submenu”
@Custer This official channel seems to be perfect and they provide many videos on the matter: [this video] Before that, make sure you know what is the box model, DOM, BOM, etc.
Recommends k0pernikus · 2019-07 · Stack Overflow · on “Could someone please explain me this function that returns x in power n?”
How are you running the JavaScript? Keep in mind, that you could debug it within the dev tools of your browser (e.g. crome or firefox). That way you can go step by step go through the code and see what it is doing at each line and how it jumps around. Going through it that way will greatly help how the code works. See this for reference: [this video]
Recommends CherryDT · 2020-03 · Stack Overflow · on “Google Web App not working using a basic Javascript request”
You have a syntax error here: var uname = document.getElementById)("username").value; ^ See the stray closing paren? Remove it. For the future: look into how to use devtools: [this video] This will allow you to understand much better what's going on with your code. If you had opened devtools (using F12), you'd seen this error in the console: [LINK] ...and clicking the "test.html:13" to the right of the error would have showed you the line too (and even the column, look at the bottom bar): [LINK]
Recommends CherryDT · 2020-03 · Stack Overflow · on “Good vs Evil - Manipulating strings”
About why the tests fail, you have two issues: 1) You are splitting by '' instead of ' ' , which basically splits after every character. '0 0 0 0 0 10'.split('') // Result: [ '0', ' ', '0', ' ', '0', ' ', '0', ' ', '0', ' ', '1', '0' ] Instead, you want to split by a single space, then the result is this: '0 0 0 0 0 10'.split(' ') // Result: [ '0', '0', '0', '0', '0', '10' ] 2) Assuming you fixed issue #1, it will still fail. This is because the result of the split will be strings, and adding strings with + concatenates them. Example of what will happen: '0 1 1 1 1 0 0'.split(' ').reduce((a, b) => a + b, 0) '00111100' Instead, you want to first map the array items to numbers. You could do th
Recommends CherryDT · 2021-05 · Stack Overflow · on “How can I solve this issue in javascript”
Also I'd recommend you to look into debugging with devtools [this video] . If you had single-stepped through your code, you would have noticed that it always goes into the `if` and that `position` _changes_ to 550 when it does that, providing you a big hint about what's going on.
Recommends amphetamachine · 2022-04 · Stack Overflow · on “Uncaught TypeError: Cannot read properties of undefined (reading 'get') at HTMLInputElement.geocodio”
You must be using some strange version of jQuery that forces you to refer to it as jQuery and not $ . Odd, I thought all versions of jQuery also set up the $ global. Try replacing $ with jQuery inside geocodio() : function geocodio() { if (myInput.value.length == 0) { alert("Please input a valid address") } else { jQuery.get(' [LINK] ' + encodeURIComponent(myInput.value) + '&api_key=' + encodeURIComponent('YOUR_API_KEY'), function (response) { console.log(response.results); }); } } (also fixed: encode myInput.value instead of encoding whole input) If that doesn't work, perhaps jQuery.js failed to load. Check the console messages and/or network trace tab in the developer tools. If that doesn'
Recommends CherryDT · 2023-06 · Stack Overflow · on “I trying to use javascript functions to open and close a menu , but it doesn't work”
What does "doesn't work" mean? How does it behave exactly? Did you check your devtools console for error messages? Did you debug your code with breakpoints? (If you don't know what this means, check this video [this video] .)
Cites Love and peace - Joe Codeswell · 2018-03 · Stack Overflow · on “How to load content for Sources Panel in Chrome DevTools? In Chrome 65.0.3325 it is initially blank”
How to load content for Sources Panel in Chrome DevTools? In Chrome 65.0.3325 it is initially blank while debugging Demo [LINK] for Chrome Tutorial video: DevTools 101: Debugging JavaScript [this video]