Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/webextensions/console-panel

A console panel within webpage 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)
https://github.com/webextensions/console-panel

Last synced: 16 days ago
JSON representation

A console panel within webpage 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)

Awesome Lists containing this project

README 

        
# 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](https://raw.githack.com/webextensions/console-panel/master/demo/demo.html) to view online demo.



# How to use



## Files to include



* [console-panel.css](src/console-panel.css)

* [console-panel.js](src/console-panel.js)



## Minimal setup



In your HTML file, add the following tags:

```html



    consolePanel.enable();



```



## Full-featured setup



In your HTML file, add the following tags:

```html



 



    consolePanel.enable();



```



# API



## consolePanel.enable(config)



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



### Configuration options



  position

  



  **Summary**: Position of console-panel's icon  

  **Type**: `string`  

  **Supported positions**: `"top-left"`, `"top-right"`, `"bottom-left"`, `"bottom-right"`  

  **Default value**: `"bottom-right"`  

  **Example value**: `"top-right"`  



  



  functionsToIntercept

  



  **Summary**: List of console functions which should be intercepted  

  **Type**: `` OR `string "all"` OR `array (of strings)`  

  **Supported function names**: `"window.onerror"`, `"console.error"`, `"console.warn"`, `"console.info"`, `"console.log"`  

  **Default value**: `"all"`,  

  **Example value**: `["window.onerror", "console.error"]`  

  **Notes**: `console.clear()` would always get intercepted when `consolePanel.enable(config)` is called  



  



  showOnlyForTheseRelevantMessages

  



  **Summary**: List of console function calls for which console-panel icon should be shown  

  **Type**: `` OR `string "all"` OR `array (of strings)`  

  **Supported function names**: `"window.onerror"`, `"console.error"`, `"console.warn"`, `"console.info"`, `"console.log"`  

  **Default value**: `null`  

  **Example value**: `["window.onerror", "console.error", "console.warn"]`  

  **Notes**: If it is a ``, then console-panel notification icon would be shown all the time  



  



  strongNotificationFor

  



  **Summary**: List of console function calls for which console-panel notification should be shown strongly  

  **Type**: `` OR `array (of strings)`  

  **Supported function names**: `"window.onerror"`, `"console.error"`, `"console.warn"`, `"console.info"`, `"console.log"`  

  **Default value**: `["window.onerror", "console.error"]`  

  **Example value**: `["window.onerror", "console.error", "console.warn"]`  



  



  skipStrongNotificationIfNoStackTrace

  



  **Summary**: When it is set as true, "strong-notification" effect is not shown for errors for which stack trace is not available. This can be used to avoid highlighting errors which are occurring due to a cross-origin / third-party script.  

  **Type**: `boolean`  

  **Allowed values**: `` OR ``  

  **Default value**: `false`  

  **Example value**: `false`  



  



  reportLogLines

  



  **Summary**: When it is set as `true`, the corresponding code line is mentioned along with each console entry. When it is set as `true`, it may interrupt your debugging session if you are using the "Pause on caught exceptions" feature in browser DevTools  

  **Type**: `boolean`  

  **Allowed values**: `` OR ``  

  **Default value**: `true`  

  **Example value**: `true`  



  



  doNotUseWhenDevToolsMightBeOpenInTab

  



  **Summary**: Disable console-panel if browser DevTools might be open within the tab  

  **Type**: `boolean`  

  **Allowed values**: `` OR ``  

  **Default value**: `false`  

  **Example value**: `false`  

  **Reference**: https://github.com/sindresorhus/devtools-detect#support  



  



  disableButtonTitle

  



  **Summary**: Customize the title for the "disable" button in console-panel  

  **Type**: `string`  

  **Allowed values**: Any non-empty string  

  **Default value**: `"Disable for this instance"`  

  **Example value**: `"Disable\n(and keep disabled)"`  



  



  beforeDisableButtonClick

  



  **Summary**: Function to be called before performing the default action for "disable" button  

  **Type**: `function`  

  **Example value**: `function () { localStorage['console-panel-status'] = 'disabled'; }`  

  **Notes**: If this function returns boolean `false`, then the default action would not be performed  



  



### Examples



```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 Google Chrome



Microsoft Edge Microsoft Edge (and Internet Explorer)



Mozilla Firefox Mozilla Firefox



Opera 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](TODO.md)



# Alternative solutions you may like



  Remote debugging

  



  * Android: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

  * iOS: https://github.com/google/ios-webkit-debug-proxy



  



  vConsole

  



  A lightweight, extendable front-end developer tool for mobile web page (https://github.com/Tencent/vConsole)



  



  Firebug Lite

  



  In your HTML file, add the following tags:

  ```html

  

  

      firebug.init();

  

  ```



  References:

  * https://blog.getfirebug.com/2013/08/21/firebug-1-12-0/

  * https://blog.getfirebug.com/2013/05/02/future-of-firebug-lite/

  * http://www.softwareishard.com/blog/planet-mozilla/how-to-start-with-firebug-lite/



  



# About this project



## Author



* Priyank Parashar - [GitHub](https://github.com/paras20xx) | [Twitter](https://twitter.com/paras20xx) | [LinkedIn](https://linkedin.com/in/ParasharPriyank/)



## Connect with us



* https://www.webextensions.org/

* [GitHub](https://github.com/webextensions/live-css-editor)

* [Twitter](https://twitter.com/webextensions)



## License



* [MIT](LICENSE)