Why can't I understand the JavaScript function

Javascript troubleshooting with the console

Errors from development to deployment

Bugs arise from your own mistakes and from third-party code that you trust. Some errors are already noticed during development (e.g. typing errors), others lurk in the depths until a user brings them to light through an unforeseen action.

Programming is like the old point and click adventure games: With each new 'aha' moment, new challenges are introduced. find door. found door. open door. door is locked. find key. looking for key. found vase. turn vase. vase is glued to board. take board. board is screwed to wall. find screwdriver ...

The most important step in avoiding errors is, in addition to a clean and strict Javascript syntax, also very plain and simple valid HTML, but even then errors take up a lot of time.

We can suppress some types of errors with window.onerror so that they do not appear at runtime when a visitor calls the page. However, the interception obscures the cause of the errors and does not correct them.

The search for logic errors is the most complex part of programming - not only with Javascript.

Programmers are less likely to have tattoos than other people because they know that mistakes always happen, even if three people check and see no mistake.
And they know that anything can change anything at any time.

The errors caused by incompatible browsers have largely disappeared along with their browsers. This mainly affects the DOM - the Document Object Model. Nevertheless, the DOM is a major cause of logic errors.

Developer tools: browser console

The most common method for troubleshooting was the Javascript function alert (), which outputs small status messages in a modal window (dialog window). As soon as several outputs are required, clicking OK in the alert output becomes annoying. And who ever one alert () put in a while loop ... also white ...

The output of Javascript test information on the console of the browser is more practical, informative and nevertheless intuitive.

if (console && console.log) console.log ("text" + myvariable);

The query if (console && console.log) {…} error messages in browsers that prevents do not support console messages. Can be omitted today, because all browsers have connected to the console.


The manipulation of DOM elements with Javascript is HTML coding flying blind, because what we use as a node via Javascript does not appear in the source code.

The browser console is the simplest radar system when we want to find out whether a DOM node or attribute has been inserted in the right place. The Javascript command console.log () outputs a message as a string with variables to the consoles of Firefox, Chrome or Safari and also from Internet Explorer.

Outputs with calling Javascript console.log () appear in the error console.

In the Webkit browsers, CMD ALT J (Chrome) or CMD ALT C (Safari) opens the console directly on the Mac, on the PC CTRL ALT J. In IE, F12 opens the console.

Click on the element to be examined with the arrow symbol from the footer

Elements Examines the HTML structure and displays CSS styles. Console Examines the processes in Javascript and shows newly inserted elements and their attributes.

console.log () is not an official part of Javascript, but an add-on from WhatWG that Firefox, IE, Chrome and Safari support in the developer menu.

console.warn and console.error

With console.warn other console.error Javascript error messages are highlighted in color so that they stand out better from the other console messages.

const warn = "This is a warning!"; const err = "This is an error message"; const var1 = 110; const var2 = "var 2"; document.getElementById ('warn'). onclick = function () {console.warn (warn); console.error (err); console.log (var1, var2); }

In addition to specifying a simple string or a variable, several outputs can simply be separated by a comma, e.g. to write several variables to the console without much formatting.


console.info ('Here comes some info')

is basically nothing more than console.log.

Output DOM fragments

Just like entering instructions directly into the console, instructions output lists of nodes in the DOM with all childNodes.

console.log (document.getElementById ('qs')); console.log (document.querySelector ('# qs'). attributes);

Check whether the targeted element or properties are actually achieved - perfect.

Group console output

This keeps the console output clear during complex analyzes:

console.group ('All ul elements'); console.dir (document.querySelectorAll ('ul')); console.groupEnd (); console.groupCollapsed ('All img elements'); console.dir (document.querySelectorAll ('img')); console.groupEnd ();

console.group fans out of the output under the triangle, console.groupCollapsed collapses the output.

Trace on, trace off

If a variable at the beginning var trace = true; is agreed and the console output is always on trace == true is bound, the trace of the program flow can be done with a simple trace = false; deactivate.

var trace = true; ... if (trace) console.log ('What are the values?');

With complex Javascript programs a debugger will certainly do better service, but with small and simple scripts and for beginners in programming with Javascript console.log () or the variations of the console message provide a quick method of troubleshooting and help to better understand your own script code and the flow of the program.

External sources