In a typical app architecture these days, the browser is the most important environment for the front end. While there is a lot of effort to standardize the way browsers act, different engines react sometimes totally different. So make sure you know the operation conditions of your application (aka which browsers, versions, OSes, resolutions, memory, CPU - see 2.2.9) and test accordingly.
You should have a good idea of how browsers work internally to understand sources of performance issues and how frameworks like React or Vue work internally. We found this quite helpful. Also, check out the companion video.
Browsers these days come equipped with extremely good and helpful tools. We will take Google Chrome as our example here but expect to find similar features in other browsers, too. A special honorable mention to Mozilla and Microsoft Edge.
The Developer Tools can be found in the “More tools - Developer Tools” or by Ctrl-Shift-I (Cmd-Option-I on Mac). The functionality deserves its own book and can even be extended using plugins (for React as an example). Make sure to have the extensions covering your stack installed (see Google’s Webstore).
Side note: A very nice feature is hidden behind this icon in Chrome: Here you can select how the website looks rendered on different devices or resolutions, reacts on turning, or throttle the data connection. This is an extremely useful tool.
There is a built-in debugger within the developer tools. We made a video to show the most basic functionality here - also have a look at 2.1.9 Debuggers.
debugger- If you place the expression
debugger;somewhere in your code, Chrome will stop there and open the debugger. But pre-compilers like Babel might not accept it.
console.log()is one of the workhorses to display information during the execution but there is more (see here)
console.table()helps to display arrays of objects in a nice format.
console.trace('Header')outputs a stack trace (see here for details). A stack trace provides a list of subroutine calls.
The perceived performance of your app is of extreme importance. There are some aspects that we want to iterate:
console.timeEnd('XYZ')to measure the time needed between two steps
Get to know your system these days means knowing a good deal of how browsers work. They are pretty nifty tools now and offer a lot of good that can help during debugging. Check how the rendering works on different device resolutions on network circumstances.