console-panel
Advanced tools
A console panel in webpage to help 3 use-cases: show console message automatically ; debug mobile ; debug IE/Edge
A console panel within web page to help in the following use-cases:
Click here to view online demo.
In your HTML file, add the following tags:
<link rel="stylesheet" href="console-panel.css" />
<script src="console-panel.js"></script>
<script>
consolePanel.enable();
</script>
In your HTML file, add the following tags:
<!-- Optional: Required for resizing panel height -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RickStrahl/jquery-resizable@0.32/dist/jquery-resizable.min.js"></script>
<!-- Optional: Required for logging arrays and objects -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/native-promise-only/0.8.1/npo.js"></script> <!-- Optional: A polyfill for native ES6 Promises (Not required for modern browsers) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.26.2/jsoneditor.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.26.2/jsoneditor-minimalist.min.js"></script>
<!-- Optional: Required for logging DOM elements with syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js" data-manual></script>
<!-- Required: Code for console-panel -->
<link rel="stylesheet" href="console-panel.css" />
<script src="console-panel.js"></script>
<script>
consolePanel.enable();
</script>
This will initiate the interception logic based on the configuration options and activate console-panel as requested.
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"
Summary: List of console functions which should be intercepted
Type: <falsy-value> 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
Summary: List of console function calls for which console-panel icon should be shown
Type: <falsy-value> 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 <falsy-value>, then console-panel notification icon would be shown all the time
Summary: List of console function calls for which console-panel notification should be shown strongly
Type: <falsy-value> 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"]
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: <falsy-value> OR <truthy-value>
Default value: false
Example value: false
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: <falsy-value> OR <truthy-value>
Default value: true
Example value: true
Summary: Disable console-panel if browser DevTools might be open within the tab
Type: boolean
Allowed values: <falsy-value> OR <truthy-value>
Default value: false
Example value: false
Reference: https://github.com/sindresorhus/devtools-detect#support
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)"
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
// 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();
// 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']
});
// 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
});
// 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'
});
// 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'
});
// 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
});
// 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
});
// 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';
}
});
}
If you wish to deactivate console-panel, run consolePanel.disable(). It will restore the intercepted functions to their original state.
Google Chrome
Microsoft Edge (and Internet Explorer)
Mozilla Firefox
Opera
console.clear() is always intercepted whenever consolePanel.enable() is called.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).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.
A lightweight, extendable front-end developer tool for mobile web page (https://github.com/Tencent/vConsole)
In your HTML file, add the following tags:
<script src="https://getfirebug.com/firebug-lite.js"></script>
<script>
firebug.init();
</script>
References:
FAQs
A console panel in webpage to help 3 use-cases: show console message automatically ; debug mobile ; debug IE/Edge
The npm package console-panel receives a total of 393 weekly downloads. As such, console-panel popularity was classified as not popular.
We found that console-panel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.