Regardless of having labored on the very complicated Firefox for a lot of years, I am going to at all times love plain outdated console.log debugging. Logging can present an audit path as occasions occur and textual content you’ll be able to share with others. Do you know that chrome gives monitorEvents and monitor to be able to get a log every time an occasion happens or operate known as?
Monitor Occasions
Move a component and a collection of occasions to monitorEvents to get a console log when the occasion occurs:
// Monitor any clicks throughout the window monitorEvents(window, 'click on') // Monitor for keyup and keydown occasions on the physique monitorEvents(doc.physique, ['keyup', 'keydown'])
You may cross an array of occasions to pay attention for a number of occasions. The logged occasion represents the identical occasion you’d see if you happen to manually referred to as addEventListener.
Monitor Operate Calls
The monitor technique permits you to pay attention for calls on a particular operate:
// Outline a pattern operate
operate myFn() { }
// Monitor it
monitor(myFn)
// Utilization 1: Primary name
myFn()
// operate myFn referred to as
// Utilization 2: Arguments
myFn(1)
// operate myFn referred to as with arguments: 1
I actually like that you may view the arguments supplied, which is nice for inspecting.
I normally go for logpoints as a substitute of embedding console statements in code, however monitor and monitorEvents present a substitute for each.
Fb Open Graph META Tags
It is no secret that Fb has develop into a significant site visitors driver for every type of internet sites. These days even giant firms steer customers towards their Fb pages as a substitute of the company web sites instantly. And naturally there are Fb “Like” and “Advocate” widgets on each web site. One…
CSS Tooltips
Everyone knows that you may make shapes with CSS and a single HTML aspect, as I’ve coated in my CSS Triangles and CSS Circles posts. Triangles and circles are pretty merely although, in order CSS advances, we have to stretch the boundaries…
pointer Media Question
As extra gadgets emerge and variations in system interplay are applied, the extra necessary good CSS code will develop into. So as to write good CSS, we’d like some indicator about system capabilities. We have used CSS media queries so far, with checks for max-width and pixel ratios.
