General Practice

Often I use console.logs to tell a story in the console and I can spot the mistake from there
If you get something where the program 'fails silently', then it may be possible to do process of elimination by commenting out parts of the code until it fails
That can take time though, and sometimes it gets a little more complex
At this point we have to use developer tools

Developer Tools

Chrome dev tools: https://developers.google.com/web/tools/chrome-devtools
Firefox dev tools (Old version was called firebug: https://developer.mozilla.org/en-US/docs/Tools
Safari: https://developer.apple.com/safari/tools/
Edge: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide
Older IE: https://en.wikibooks.org/wiki/Internet_Explorer/F12_Developer_Tools
We'll be using Chrome (FF is great for css grid, incidentally)

Panels

Whilst there are many panels, there are only a few we'll look at here
- console
- network
- sources
- profile
- performance
- memory
- application

Console Tab

Console

Console is a REPL (read, evaluate, print loop)
It is a JavaScript-like environment
- So don't rely on 100%
You type in things and they are executed on the spot
The line that is printed after you do that is what the operation returns
Has 'type-ahead', press tab/→ to auto-complete
Clear is top left circle with line, or type clear and hit return
Place to look for errors

Press up/down arrow to cycle your command history

 console.info("This is some info");
console.debug("This is a debug message");
console.warn(
  "This is a warning about something happening in your code. It has a stack trace to assist with debugging"
);
console.error(
  "This is an error. It has a stack trace to assist with debugging. It is not the same as throwing an error because it does not stop the code."
);
console.log("After the 'error'");
 
/* getting a stack trace */
 
function a(f) {
  f();
}
 
function b() {
  console.trace();
}
 
a(b);
 
/* console.assert - for testing */
let number = 2;
const errorMsg = "The number is not even";
console.assert(number % 2 === 0, { number: number, errorMsg: errorMsg });
number += 1;
console.assert(number % 2 === 0, { number: number, errorMsg: errorMsg });
 
/* console.table - for display */
const obj = {
  subobject: {
    property: "value",
    other: "value"
  },
  property: "value"
};
 
console.table(obj, ["subobject"]);
 
const people = [
  { firstName: "James", lastName: "Sherry" },
  { firstName: "Robert", lastName: "Sherry" },
  { firstName: "Katie", lastName: "Smith" }
];
 
console.table(people);
console.table(people, ["firstName"]); // restrict columns
 
/* Counters */
console.count();
console.count();
console.count();
 
console.countReset(); // reset
console.count();
 
// Giving it a name creates a new counter
console.count("James");
console.count("James");
console.count("James");
 
/* TIMERS */
// Create/start one (with a label/name) (You can have <10k timers)
console.time('some process');
 
setTimeout(() => {
	// get it's current time
	console.timeLog('some process');
}, 1000);
 
setTimeout(() => {
// stop/destroy
console.timeEnd('some process');
}, 2000);
 
/* GROUPS */
console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");
 
/* groupCollapsed starts the groups off closed */
console.log("This is the outer level");
console.groupCollapsed();
console.log("Level 2");
console.groupCollapsed();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");
 
/*****
 * CSS IN YOUR LOGS!!
 *****/
 
/*
THere is an old syntax from C called 'string substitution'. It works by you putting typed placeholders into your string and then passing the string to console and then further arguments to be inserted, so:
 
console.log('My name is %s', 'James');
 
// The types you can insert are:
 
%o or %O
Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
 
%d or %i
Outputs an integer. Number formatting is supported, for example console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
 
%s
Outputs a string.
 
%f
Outputs a floating-point value. Formatting is supported, for example console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10
 
%c is a directive that allows CSS to be used on the message. You can use:
 
background and its longhand equivalents.
border and its longhand equivalents
border-radius
box-decoration-break
box-shadow
clear and float
color
cursor
display
font and its longhand equivalents
line-height
margin
outline and its longhand equivalents
padding
text-* properties such as text-transform
white-space
word-spacing and word-break
writing-mode
 
*/
 
console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message"
);
 
console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px"
);

Pen

Network Tab

Network

Shows request made for resources
- You can filter by type

Note the 'waterfall' on the right:

The blue line is when the document becomes interactive
The red is when everything sync has finished loading

Network cont...

Shows details of the request

Network cont...

Shows details of the response

Network cont...

Shows details of the response

Sources Tab

Shows all files loaded in page
- Good place to find if you've forgot to include something
Has a snippets section for you to do little code tests
Has debugger window

Sources Tab: Assets Panel

Shows the assets in the equation, Including:
- loaded js files
- Snippets you can make yourself to test things

Debugging Code

Pausing the code in real-time

You can stop the code at any point with Breakpoints (docs)
If you right click then you can disable/deactivate/remove this/all breakpoints.
- Breakpoint marker goes more transparent, as does the BP entry you just clicked on
- You can set breakpoints for
  - DOM mutation
  - Event listeners, etc.
  - I've barely used them...
- You can write debugger; in your code to auto BP

Sources Tab: Watch Panel

When you pause on a breakpoint, you can see the:
- Watch allows you to type in the name of an entity and watch its value as you step through
- Call stack
  - Clicking on each one puts you back into that fn with its environment intact
- Scope shows you what is in scope locally, in closure and globally

Sources Tab: Watch Panel cont...

The play controls:

The blue arrow is when you're stuck on a BP.
- Clicking it allows the script to run to the next BP/end.
- When you are on a BP, you can then advance line-by-line
The next one is 'step over'. This means you don't get involved in the next line's execution. You're not interested in it, so you go to the line after that
Next is 'Step into'. You go onto that line, then get involved in it's execution processes.
- if a sub function is called, then you'll move into that sub function
  - You can move back by selecting the parent in the call stack

Sources Tab: Watch Panel cont...

The play controls:

After that is 'step out'. When you don't want to go any further into this functions execution and you want to go back to the parent, then you step out.
The next one is 'step'. You just step forward one line.
Next is disable all breakpoints (or passthrough): Useful if you want to do a quick end to end test without removing your BPs
Finally, there's pause on exceptions
- if you click it and there's an error it will stop at the point of error (does not work in esm scripts in nested functions!)
- if your error is handled (try/catch) and you still want to see, then there's a pause on caught exceptions checkbox available when you click pause on exceptions

Sources Tab: Debug Panel

You can open scripts or snippets and see them as you would in atom (tabs at the top, content below)
The {} symbol prettifies minified code
The line numbers down the side allow you to place breakpoints, which are places where you can pause the code mid-run. (To toggle them, just click on the line number)

Application Tab

Application

The Application tab shows the state of things like:

local/session storage
indexedb
service workers
cookies

Other Tabs

Profile, performance & memory
- (They are advanced and I don't want to overload you at this stage!)
Plugins, like react-dev-tools, redux-tools, etc. can all get panels in your dev tools

JavaScript Debugging

General Practice

Developer Tools

Panels

Console Tab

Console

Network Tab

Network

Network cont...

Network cont...

Network cont...

Sources Tab

Sources Tab

Sources Tab: Assets Panel

Debugging Code

Pausing the code in real-time

Sources Tab: Watch Panel

Sources Tab: Watch Panel cont...

Sources Tab: Watch Panel cont...

Sources Tab: Debug Panel

Application Tab

Application

Other Tabs

JavaScript Debugging

JavaScript Debugging

James Sherry

	console.info("This is some info");
	console.debug("This is a debug message");
	console.warn(
	"This is a warning about something happening in your code. It has a stack trace to assist with debugging"
	);
	console.error(
	"This is an error. It has a stack trace to assist with debugging. It is not the same as throwing an error because it does not stop the code."
	);
	console.log("After the 'error'");

	/* getting a stack trace */

	function a(f) {
	f();
	}

	function b() {
	console.trace();
	}

	a(b);

	/* console.assert - for testing */
	let number = 2;
	const errorMsg = "The number is not even";
	console.assert(number % 2 === 0, { number: number, errorMsg: errorMsg });
	number += 1;
	console.assert(number % 2 === 0, { number: number, errorMsg: errorMsg });

	/* console.table - for display */
	const obj = {
	subobject: {
	property: "value",
	other: "value"
	},
	property: "value"
	};

	console.table(obj, ["subobject"]);

	const people = [
	{ firstName: "James", lastName: "Sherry" },
	{ firstName: "Robert", lastName: "Sherry" },
	{ firstName: "Katie", lastName: "Smith" }
	];

	console.table(people);
	console.table(people, ["firstName"]); // restrict columns

	/* Counters */
	console.count();
	console.count();
	console.count();

	console.countReset(); // reset
	console.count();

	// Giving it a name creates a new counter
	console.count("James");
	console.count("James");
	console.count("James");

	/* TIMERS */
	// Create/start one (with a label/name) (You can have <10k timers)
	console.time('some process');

	setTimeout(() => {
	// get it's current time
	console.timeLog('some process');
	}, 1000);

	setTimeout(() => {
	// stop/destroy
	console.timeEnd('some process');
	}, 2000);

	/* GROUPS */
	console.log("This is the outer level");
	console.group();
	console.log("Level 2");
	console.group();
	console.log("Level 3");
	console.warn("More of level 3");
	console.groupEnd();
	console.log("Back to level 2");
	console.groupEnd();
	console.log("Back to the outer level");

	/* groupCollapsed starts the groups off closed */
	console.log("This is the outer level");
	console.groupCollapsed();
	console.log("Level 2");
	console.groupCollapsed();
	console.log("Level 3");
	console.warn("More of level 3");
	console.groupEnd();
	console.log("Back to level 2");
	console.groupEnd();
	console.log("Back to the outer level");

	/*****
	* CSS IN YOUR LOGS!!
	*****/

	/*
	THere is an old syntax from C called 'string substitution'. It works by you putting typed placeholders into your string and then passing the string to console and then further arguments to be inserted, so:

	console.log('My name is %s', 'James');

	// The types you can insert are:

	%o or %O
	Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.

	%d or %i
	Outputs an integer. Number formatting is supported, for example console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01

	%s
	Outputs a string.

	%f
	Outputs a floating-point value. Formatting is supported, for example console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10

	%c is a directive that allows CSS to be used on the message. You can use:

	background and its longhand equivalents.
	border and its longhand equivalents
	border-radius
	box-decoration-break
	box-shadow
	clear and float
	color
	cursor
	display
	font and its longhand equivalents
	line-height
	margin
	outline and its longhand equivalents
	padding
	text-* properties such as text-transform
	white-space
	word-spacing and word-break
	writing-mode

	*/

	console.log(
	"Multiple styles: %cred %corange",
	"color: red",
	"color: orange",
	"Additional unformatted message"
	);

	console.log(
	"This is %cMy stylish message",
	"color: yellow; font-style: italic; background-color: blue;padding: 2px"
	);

JavaScript Debugging

JavaScript Debugging

More from James Sherry