It would appear someone has flipped the wrong switch at google. Every result for every search is returning the “This site may harm your computer” message. Does this mean that the Testing on the Toilet project was a failure?
Update: They fixed it.. it was like that maybe 20 – 30 minutes I believe.
If you use firebug like I do you tend to add a large amount of console.log’s into your code to check the values of certain things during execution or to get links to objects so you can check out their contents in the dom viewer. You might also add the debugger keyword into your code to break at a particular spot so you can check several variables at that point in execution.
This involves adding the console.log entries into your code, saving the file then refreshing the page and navigating back to point of execution to see your new entries in the logs.
Wouldn’t it be nice if you could add arbitrary code at a particular point in the script via Firebug?.. You could add several logging calls at a particular execution point then click the button to execute it and see what you get.. no need to to modify the code, save it, refresh the page, etc. Well there is, in fact, a way of doing this. It’s a bit of a hack but that just adds to the fun.
As you may know, Firebug has conditional breakpoints. You can set a breakpoint and then right click this breakpoint to display a text field in which you can add a conditional. If this conditional is true the breakpoint fires and code execution stops. So the way it works is firebug executes the code you’ve entered into the conditional breakpoint and if it returns as true then it breaks execution at that point. The trick here is that firebug executes the code.. so you can execute any code you want at this point and as long as it doesn’t return a truthy value then it won’t break.
You can execute console.log for example.
The code you enter into the conditional field executes within the scope of the code at which the breakpoint is set so you can log things, modify things, etc. at that point in execution. Neat huh?
This one is simple but extremely handy.
Various event handlers and callbacks and so on return parameters to the function assigned to them. Things such as the object that fired the event, the value of the response, etc. These can be different things depending on what you’re dealing with. This is especially true when dealing with JavaScript frameworks. Instead of hunting through the documentation and hoping it lists everything and in the right order you can use firebug to find out quick and easy.
From inside of any executing function you have access to a variable called “arguments” which is an array containing all the arguments that were passed to the function. It doesn’t matter if you put anything between the ( ) of the called function or not.
If you simply put console.log(arguments); inside of the function then when it’s called it will log everything passed to it to the firebug console. Firebug displays arrays with links for objects to allow you to view the content of them and so on.
For example:
var theCallback = function () {
//find out what was passed
console.log(arguments);
};
You could, of course, set a breakpoint within the function and check the arguments that way as well. Either use the console and simply enter the arguments variable or add a watch for it. There’s also a way to do it without modifying your code or breaking execution but I’ll save that for the next tip.
What I’m talking about here is things such as, for example, text fields, reply forms, etc which “transform” to editable form when you click an edit button or double click the text. When you do so the whole area just offsets (jumps) as the text is replaced by a text area and your cursor is no longer where it was and half the time you have to click within the text to even edit it. This is not a smooth user experience.
I admit that this is sometimes difficult to avoid in web apps but it really detracts from the effect. The edit text example is the most common but there are others. Basically any on the fly transformation of the dom which causes the user to “lose their place” momentarily.
