Can I see JavaScript code

Javascript Console: Testing and Troubleshooting

Console commands with the developer tools

So there are two basic ways to work with the console: Either through console.log () statements within the JavaScript code or directly in the console of the browser. The consoles of the browsers - whether Chrome or Firefox, Safari or IE - differ only marginally.

With direct calls via the element name, the console reaches every element of the DOM and lists the nodes below the element. So, simply document Type in the console line, return and ...

... and already we have a snapshot of the current structure of the DOM, clearly packed under the hinged triangles.

  • document Lists the current cathedral
  • document.body directly to the body element of the app
  • document.head directly to the head element of the app
  • document.body.childNodes plays all childNodes of body as an array. The array notation then reaches each element via the index.
  • document.body.childNodes [5] Array notation: The seventh childNode of body
  • dir (document.body.childNodes)Alternative representation of the array of all childNodes of body as a vertical list
  • document.getElementById ('main') Normal Javascript instructions reach each individual element directly
  • document.querySelector ('main') Fish out the element using the querySelector
  • $ ('# main') ... this is not a jQuery, but an abbreviation for the console

The console works with Auto-Complete - put a point behind the element and the console will play all commands that make sense at this point.

Arrow up, arrow down scrolls through the history and repeats commands.

Color for the console output

If the output is long and confusing, a dash of color helps ... the CSS for the console, so to speak.

console.log ('% c In the wrong if branch again!', 'background: red; color: #eee'); Again in the wrong if-branch!

If there is a% c in front of an argument of the console, the following argument is used as the CSS of the console line.

console.log ("Everything is still normal% c But now it's getting yellow", "background: yellow"); Everything is still normal, but now it's turning yellow