how to debug your code

Hello!

This post will be one of the smallest. :)
As we know, html + css + js are not compiled. These code lines are interpreted and executed by the browser. So, what can we do to debug our widgets? The answer is simple: let's try a html/css/js debugging tool :)


I suggest you to use FireBug, as shown in Figure 1.

"Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast." (FireBug Site)

Figure 1. FireBug

You can learn more here! You can also use FireBug to check your CSS and HTML files.




Figure 2. Excellent console


I've used FireBug with FireFox...

So, we need to get our widget index.html file, open in FireFox and activate the FireBug (open FireBug console). It's really easy.

Steps to see your code on FireBug:

1- Open your Browser (with FireBug installed);
2- Go to your IDE workspace;
3- Find your Widget Project folder;
4- Open the project index.html file in the browser;
5- Click on FireBug icon, as shown in Figure 3 to activate the plug-in;

Figure 3. FireBug icon

6- You'll see your code!

If you have any question, feel free to ask.

Have a nice day!

Thanks for your visit! :)

Next post: Data Persistence

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo