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 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.
7 Essential JavaScript Functions
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like
addEventListener
andattachEvent
. Times have changed but there are still a few functions each developer should…Create Namespaced Classes with MooTools
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event…
MooTools TextOverlap Plugin
Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren’t. This one may be more on the “aren’t” side but used correctly, my TextOverlap plugin could add another interesting design element…
Jack Rugile’s Favorite CodePen Demos
CodePen is an amazing source of inspiration for code and design. I am blown away every day by the demos users create. As you’ll see below, I have an affinity toward things that move. It was difficult to narrow down my favorites, but here they are!
[ad_2]
Source link