Basic Debugging Of Web Apps

Debugging is one of the most painful parts of developing web apps or web applications. You have to deal with browser inconsistencies with HTML, CSS and Javascript, let alone the scalp burning process of debugging Javascript itself. Now, for those starting out in web development, here is a pretty basic process that can help you out in debugging. And we’ll just be simply using Firefox.

Debugging CSS can be really frustrating. Good thing us kids in the digital network now have things like the Web Developer Toolbar that lets you inspect and edit, in real-time too, the HTML and CSS of your page, so you can see what’s happening when things don’t line up. It can do a heck of a lot more, but for our topic’s purpose, we’ll use it for this specific role.

Ctrl + Shift + F: Display element information.

This puts a red box under your mouse. Move the mouse over an element and its attributes appear in a pop-up, like the name, class, pixel sizes, fonts, everything. Here, you can figure out what classes are creating the styles you see, get the div’s id for use with Firebug and also get the pixel measurements of an image.

Ctrl + Shift + E: Edit CSS. 

This pops open a sidebar tab with the current stylesheets. You can edit any attributes and see the effect in real-time. But don’t have too much fun in giving like the Google logo all sorts of backgrounds. I lost several hours in that cave myself.

Tip toing along the boarders can be tricky too. So your logical step to take here would be to first, find a div with your mouse. Just do Ctrl + Shift + F. Once you find one, get its id. Edit CSS, press Ctrl + Shift +E. Then, put a border on the div. Play around with it until you get it to line up as you want it to be. Then, remove the border.

A trick here is, instead of deleting the border, put an “x” in front, as in “xborder: …”. Reason being, the CSS won’t be valid so the border is ignored, but it still keeps the style around in case you want to enable it later.

Next, select all the text in your edited CSS file and paste it into the real CSS file. And there you go, your changes are now live. You did it smoothly and like a pro.