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:

test.html

basicstuff.js

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:

ChromeJs04

 

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:

ChromeJs05

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:

ChromeJs06

ChromeJs07.PNG

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

ChromeJs08.PNG

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>
 <html>
 <head>
 <title>From the snippets location in Visual Studio Code</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></link>
 http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
 http://BasicStuff.js
 </head>
 <body>
</body>
 </html>
 <!-- https://validator.w3.org/nu/#textarea -->
 <!-- Location is [file:///e:/sandbox/javascript/test.html] -->

var clique01 = {
// https://en.wikipedia.org/wiki/Bloomsbury_Group
 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) {
 novelists.push(currMember);
 } else {
 notNovelists.push(currMember);
 }
 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;
Advertisements