JSFiddle - React, Tailwind, and code Playground
JavaScript
(function(){
if (!window.chrome || !window.console) {
return ((window.console && console.log) || alert)('Chrome Inspector Helpers only supported in Google Chrome.');
}
window.chrome.inspector = window.chrome.inspector || {};
// As a side effect when running console.profile() to check if the
// inspector is open, WebKit prints a message to the console log. This
// clutters the log, but a workaround is to open a collapsed group (see
// https://developer.mozilla.org/en-US/docs/DOM/console#Using_groups_in_the_console
// ) that the messages are collected into.
//
// However, with this approach, we still would like console messages from
// external code to appear. The trick we use below is to keep track of
// whether there is a collapsed group currently open, and decorate the
// builtin console loging methods (log, info, warn, etc) as well as group,
// groupCollapsed and groupEnd to close the group if this is the case.
var logMethods, origGroupEnd, groupActive,
origGroupCollapsed, groupMethods,
isOpen, isDocked
;
logMethods = ['info', 'warn', 'log', 'debug' , 'error'];
origGroupEnd = console.groupEnd;
groupActive = false;
logMethods.forEach(function(method) {
var orig = console[method];
console[method] = function() {
if(groupActive) {
origGroupEnd.apply(console);
groupActive = false;
}
return orig.apply(console, arguments);
};
});
origGroupCollapsed = console.groupCollapsed;
groupMethods = ['group', 'groupCollapsed'];
groupMethods.forEach(function(method) {
var orig = console[method];
console[method] = function() {
if (groupActive) {
origGroupEnd.apply(console);
groupActive = false;
}
orig.apply(console);
};
});
console.groupEnd = function() {
...