Despite having worked on the very complex Firefox for a number of years, I’ll always love plain old console.log debugging. Logging can provide an audit trail as events happen and text you can share with others. Did you know that chrome provides monitorEvents and monitor so that you can get a log each time an event occurs or function is called?
Monitor Events
Pass an element and a series of events to monitorEvents to get a console log when the event happens:
// Monitor any clicks within the window monitorEvents(window, 'click') // Monitor for keyup and keydown events on the body monitorEvents(document.body, ['keyup', 'keydown'])
You can pass an array of events to listen for multiple events. The logged event represents the same event you’d see if you manually called addEventListener.
Monitor Function Calls
The monitor method allows you to listen for calls on a specific function:
// Define a sample function
function myFn() { }
// Monitor it
monitor(myFn)
// Usage 1: Basic call
myFn()
// function myFn called
// Usage 2: Arguments
myFn(1)
// function myFn called with arguments: 1
I really like that you can view the arguments provided, which is great for inspecting.
I usually opt for logpoints instead of embedding console statements in code, but monitor and monitorEvents provide an alternative to both.
Regular Expressions for the Rest of Us
Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In…
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you’ve got something really neat. Unfortunately each CSS cube tutorial I’ve read is a bit…
Dynamically Load Stylesheets Using MooTools 1.2
Theming has become a big part of the Web 2.0 revolution. Luckily, so too has a higher regard for semantics and CSS standards. If you build your pages using good XHTML code, changing a CSS file can make your website look completely different.
CSS Gradients
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome…
