JavaScript: Chrome Debugger

I used breakpoints in Chrome for the first time just now. Worth sharing…

I have a sandbox-type html and javascript page when I’m playing, so I always just need to refresh the page in Chrome which I generally keep open.

The plain text is below, but in VS Code, this is how it looks:



So let’s start with a fresh Chrome page…

Go to the location of my page – as you see, there is no html…

Now press F12, which is the short cut for Google Developer Tools. Exactly what you see at this point┬ádepends on its most recent state, but let’s say it’s something like this, with the focus on console:



Click the double chevron, and select sources:



That brings up your code, both the html and the js. In this I dragged the vertical line to the left to give more real estate:


In the next shot, I have already clicked in the margin at line 23, to set a breakpoint. And I am about to bring up the debug controls, in the orange border:



If you now press the refresh button to the left of the URL in Chrome, you get this:


There are resume, step into, step over controls just under where you see Security, Audits, above. And hovering over a variable gives you its values, even for an object. In summary, it is REALLY useful, I find.

And finally, pressing F12 again takes you out of debug mode.

<!DOCTYPE html>
 <title>From the snippets location in Visual Studio Code</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href=""></link>
 <!-- -->
 <!-- Location is [file:///e:/sandbox/javascript/test.html] -->

var clique01 = {
 type: "luvvies", residence: "London WC1",
 member1: {name: "Virginia Woolf", speciality: "bleakness", category: "novels"},
 member2: {name: "Duncan Grant", speciality: "post-impressionism", category: "art"},
 member3: {name: "John Maynard Keynes", speciality: "spending your way out", category: "economics"},
 member4: {name: "Edward Morgan Forster", speciality: "despair", category: "novels"},
 numMembers: 4
function getNovelists (clique, requiredCategory) {
 var novelists = [];
 var notNovelists = [];
 for (var i = 1; i <= clique.numMembers; i++) {
 var currMemberIndex = "member" + i;
 var currMember = clique[currMemberIndex];
 if (requiredCategory === currMember.category) {
 } else {
 delete clique[currMemberIndex];
clique.numMembers -= novelists.length;
 for (var j = 1; j <= clique.numMembers; j++) {
 clique["member"+j] = notNovelists.shift();
return novelists;
var novelists = getNovelists(clique01, "novels");
 var x = novelists;