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;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s