Filtering out groups in Google Chrome console?

Question

In the Google Chrome Developer tools, I have output from the Google Analytics debugger extension that dumps too much output into my console.

I am aware that there is a filter to allow you to filter messages. However, a large part of what the Google Analytics debugger outputs are statements enclosed by console.group and console.groupend.

Second image showing filtered console

As you can see, while a bunch of text inside the collapsed groups is hidden, the groups themselves are not, and there are currently a few hundred of those that are making it difficult for me to find my debug messages

While I can use the filter to filter out the text in the group, is there a way to filter out the group bars as well?

Answer 1

No one actually answered your question, and the answer is that it's an open bug.

https://bugs.chromium.org/p/chromium/issues/detail?id=363796&q=filter%20group%20console&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

Answer 2

I'm not sure what version of Chrome you're using but mine has an option in the console of whether or not to group similar.

If I disable that option it won't show the groups. You could also try adjusting which messages are shown (verbose, info, error, warning, errors) with that "default levels" drop down.

Answer 3

you can filter out console message based on their source. In your case, you can remove all the entries generated from analytics.debug.js. I used the following filter to accomplish this:

-url:analytics.debug.js

Answer 4

If you can execute the below code before google analytics it should do the trick. It's basically a monkey patch that just appends the group name as hidden text in front of every line logged out in that group. So when you filter it picks up the hidden text.

let groupFunc = console.group;
let logFunc = console.log;
let groupEnd = console.groupEnd();

console.group = (...groupArgs) => {
  groupFunc(...groupArgs)
  console.log = (...args) => {
    logFunc(`%c ${groupArgs[0]}`, `color: transparent; font-size: 0px`, ...args)
  }
  groupEnd = (...args) => {
    console.log = logFunc;
    groupEnd(...args);
  }
}