Using Web Browser Developer Tools to Learn

To help with Javascript programming you need additional tools. Two key tools are a debugger and a console. They are available in web browser developer tools such as Chrome shown as follows.

The Chrome debugger with console drawer.

You may have used web browser developer tools to inspect and interactively change HTML elements, HTML element attributes, CSS selectors and CSS properties as well as observe source file loading and the CSS box model.

For Javascript you use these tools for testing and fixing programming errors, a process called debugging. This comes from the term bug used for programming errors.

A key skill in programming is debugging.

The debugger allows you to step line by line through a running Javascript program and inspect data values as they change.

The console allows you to input and display data interactively or display data that a running Javascript program is processing. You do not need a program to use the console interactively.

You also can use these tools for learning how to program.

Complete and Continue