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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s