Browser tools

You don't need a full frontend modular Node development environment to create visualizations with Chart.js, but you still need a good debugger. Every browser comes with development tools that allow you to navigate a static page structure and generated DOM elements, and a console where you can interact in real time with the data used by the JavaScript engine.

The most important tool is the JavaScript console, where you will see any error messages. It's very common to get a blank page when you expected something else and not have a clue as to why your code doesn't work as expected. Sometimes, it's just a comma you forgot, or the internet is down and some file was not loaded. If you have the JavaScript console open while you run your page, it will instantly tell you what's going on. It's also a good idea to use an editor with line numbering, since most error messages inform us of the lines where the problem occurred:

Debugging JavaScript with the JavaScript console

You can open the developer tools as a frame in your browser or as a separate window. The following are the menu paths for the JavaScript console in latest versions of the three most popular browsers:

  • Chrome: View | Developer | JavaScript Console
  • Firefox: Tools | Web Developer | Web Console
  • Safari: Develop | Show Error Console

Most of the code fragments and examples in this section can be tested by typing them in the JavaScript console. It's a great way to learn JavaScript. It will also access the functions of any JavaScript library file that was loaded with the <script> tag, and any global variables declared in the <script></script> blocks.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset