LOL, wow, this brings back memories. These days, though, doing this would cause me to tear my hair out. Here are a few ways that will make your coding life a bit easier.
For most of these... start by downloading Firefox and it's killer plugin, Firebug. Then, after it's installed, go to your webpage and click on the little beetle in the upper right hand corner of your browser. Firebug should start up in console mode at the bottom of your page.
1) If you ever want to test a variable at any point your application, just use in that section of the js code:
- Code: Select all
console.log('hello world!');
But, of course, replace the string with the variable or other code you want to test. It doesn't necessarily even have to be a string, JavaScript has a tendency of happily coercing variables into more readable formats for easy debugging.
Also, if your code happens to hit an error, it will more than likely show up here so that you can readily fix the problem. It makes your debugging life so much easier!
2. Now click on the script portion of Firebug. This is the awesome part. The main area here, is a text area filled with code, by clicking to the left of the numbers in this area, you can set break points, just like you could in an IDE. If you right-click on it, you can even add conditional break-points. Next to the all button at the top, you can flip between various JS files and on the far right, you can add watch commands. Once you've added these in, you'll probably want to refresh the page if you want to run through any scripts that occur at start-up.
3. What about the alignment issues? Firebug has you covered there as well! Just click on html and your file as it presently is loaded on screen should appear in nested format. If you dig into this file, to the area you're interested in, you'll notice that on-screen, portions of your webpage will start to light up, granting you insights as to how each section takes up space in your layout. Also, as you click on each element in the layout, you'll notice that a css screen pops up on the right, where you can change (in real-time) the css styling of the element, allowing you to rapidly test solutions for your problems! It will also tell you where your object inherits that property, which tells you where to change it in your css file.
(This section is also useful for 'discovering' ids and classes that other people's code add in dynamically when implemented as the html will change in real time to changes that occur on the page!)
4. Also - Stack Overflow. Stack Overflow is a developers best friend.
5. Finally, there is this amazing framework (that I sadly, rarely use) called Jasmine:
http://jasmine.github.io/2.0/introduction.htmlJasmine is a javascript framework that you can use for Javascript Test Driven Development (TDD). In this development style, you literally come up with a behavior that you want to see first (resulting in a failed test) then create a code function that solves that problem when tested (resulting in a passed test). Thus, it is called red/green development. Developing in this style tends to be great for results that you can easily test, such as string manipulation, numbers - things that you could readily write tests for. I've personally gotten a bad taste from it, however, when it's applied to UI development, although that can actually be done.
Overall, though, if you can write your code so that it passes all your tests and your tests describe your behaviors, you not only will have code that works, but also code that you can easily refactor, especially as you get into more advanced toys, like CoffeeScript, HAML, SASS, LESS, Bourbon (the api not the alchohol) and what not. You'll also sleep better at night, knowing that if anything ever breaks, you can just jump to your tests and find out which tests fail, so that you know instantly where the code problem arose.
PS - While note really part of debugging, another note is that you can debug what's causing lag on your page load in the Page Speed Section (may or may not require another plugin for that, I can't remember). Doing so will tell you all the different ways in which you can speed up your user experience.
