diff --git a/README.md b/README.md index 29045ef..2a8a6b3 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,11 @@ Whenever the condition returns true, be it on page load or when the viewport cha }); ``` +## Debugging + +The plugin provides some basic debugging which you can activate by setting `$.breakpoint.debug = true`. This will cause the plugin to log information to the browser console whenever a breakpoint is entered or exited. Add a `toString` method to your breakpoint object to distinguish between breakpoints; otherwise you'll see `[object Object]` as the name of the breakpoint. + + ## Tips and tricks ### MatchMedia support in older browsers diff --git a/js/jquery.breakpoint.js b/js/jquery.breakpoint.js index 101c81a..e45260b 100644 --- a/js/jquery.breakpoint.js +++ b/js/jquery.breakpoint.js @@ -58,6 +58,7 @@ function checkActiveBreakpoint(breakpoint) { if (!breakpoint.condition()) { + debug('Exiting breakpoint: ' + breakpoint); // We have left this breakpoint. if (typeof breakpoint.exit === 'function') { @@ -75,6 +76,8 @@ // We have entered this breakpoint. if (typeof breakpoint.first_enter === 'function') { + debug('Entering breakpoint for the first time: ' + breakpoint); + try { breakpoint.first_enter.apply(breakpoint); } catch (e) {} @@ -84,6 +87,7 @@ } if (typeof breakpoint.enter === 'function') { + debug('Entering breakpoint: ' + breakpoint); try { breakpoint.enter.apply(breakpoint); } catch (e) {} @@ -125,4 +129,18 @@ }); } + /** + * Breakpoint debugging + */ + + // (De)activate breakpoint debugging. + $.breakpoint.debug = false; + + // Console logging wrapper. + function debug () { + if ($.breakpoint.debug && console && console.info) { + console.info.apply(console, arguments); + } + } + }(jQuery)); \ No newline at end of file