console-panel

A console panel within web page to help in the following use-cases:
* Get notification on console messages
* Console logging on mobile and tablet devices
* Console logging on Microsoft Edge / Internet Explorer (without opening native Developer Tools)

Demo

Click here to view online demo.

How to use

Files to include

* console-panel.css
* console-panel.js

Minimal setup

In your HTML file, add the following tags:
``html



`

Full-featured setup

In your HTML file, add the following tags:
`html








`

API

consolePanel.enable(config)

This will initiate the interception logic based on the configuration options and activate console-panel as requested.

$3

$3

`js
// Enable console-panel in default mode.
// Use this configuration for getting notified about console messages and
// debugging for mobile devices and IE/Edge.
consolePanel.enable();
`

`js
// Intercept only error logs.
// Use this configuration to ensure that you don't miss out on any errors, while
// continuing to use native DevTools logger for all other log entries.
consolePanel.enable({
functionsToIntercept: ['window.onerror', 'console.error']
});
`

`js
// Do not use console-panel when browser's DevTools might be open in the tab.
// Use this configuration to avoid using console-panel when you are debugging
// with the help of native DevTools.
consolePanel.enable({
doNotUseWhenDevToolsMightBeOpenInTab: true
});
`

`js
// Hide console-panel icon by default. But, show it as soon as any console
// related message shows up.
// Use this configuration if you wish to avoid seeing the console-panel icon as
// long as it doesn't serve an important purpose.
consolePanel.enable({
showOnlyForTheseRelevantMessages: 'all'
});
`

`js
// Show strong notification for all console related messages.
// Use this configuration if you wish to catch any console messages missed out
// from code clean up.
consolePanel.enable({
strongNotificationFor: 'all'
});
`

`js
// Do not report the code lines for messages in console-panel.
// Use this configuration if you wish to use "Pause on caught exceptions"
// feature in browser DevTools (which would otherwise get interrupted by dummy
// errors thrown by console-panel to report the code lines accurately).
consolePanel.enable({
reportLogLines: false
});
`

`js
// Skip strong-notification effect for errors without stack trace.
// Use this configuration if you wish to ignore errors caused by cross-origin
// (usually third-party) scripts where stack traces are not available.
consolePanel.enable({
skipStrongNotificationIfNoStackTrace: true
});
`

`js
// Add custom logic around the "Disable for this instance" button.
// Use this configuration if you wish to disable console-panel and keep it
// disabled for future page loads.
if (localStorage['console-panel-status'] !== 'disabled') {
consolePanel.enable({
disableButtonTitle: 'Disable\n(and keep disabled)',
beforeDisableButtonClick: function () {
localStorage['console-panel-status'] = 'disabled';
}
});
}
`

consolePanel.disable()

If you wish to deactivate console-panel, run consolePanel.disable(). It will restore the intercepted functions to their original state.

Browser support

Google Chrome

Microsoft Edge (and Internet Explorer)

Mozilla Firefox

Opera

Limitations / notable behavior

* console.clear() is always intercepted whenever consolePanel.enable() is called.
* In Microsoft Edge (EdgeHTML) and Internet Explorer, the console functions are
not intercepted if the browser's native Developer Tools are in activated state
(window.onerror can still be intercepted). Also, for these browsers, if the
native Developer Tools have been opened once, then the intercepted calls to the
console logging function calls are absorbed (rather than intercepted).
* During a page load, if consolePanel.enable(config) has already been called once,
then calling consolePanel.enable(config_new) with a different config may not work
well for all the cases.

TODO

TODO.md

Alternative solutions you may like

About this project

Author

* Priyank Parashar - GitHub | Twitter | LinkedIn

Connect to us

* https://webextensions.org/
* GitHub
* Twitter

License

* MIT