How to hide messages in console that came from iframes

Question

I am using console.log(...) for debugging purposes. However the console gets messages from iframes too(I am using iframes in my HTML code). How can I see only the logs that I sent and not the logs that came from iframes?

This might be similar to what you're looking for: http://superuser.com/questions/394213/how-can-i-suppress-chrome-extension-output-from-web-inspectors-console-log — Devon Bernard, Mar 02 '16 at 08:19
A possible workaround would be to use `console.info` or `console.debug` instead, and then filter the message types. — Kruga, Mar 02 '16 at 08:37
Thanks @Kruga. Its not the exact solution, but its works for me. Another workaround would be to prepend all `console` logs with a pattern and then use regex to filter them — rramakrishnaa, Mar 04 '16 at 10:56
@rramakrishnaa Is the iframe always going to be on the same domain as the parent page or will you be using third-party domains/pages? — pseudosavant, Mar 10 '16 at 20:34
@pseudosavant one of the iframe and the main page will be on the same domain. However their are multiple iframes from different domains on my page — rramakrishnaa, Mar 12 '16 at 15:15

score 14 · Accepted Answer · answered Dec 08 '18 at 19:13

14

This is kinda old post, but still, for those who will come here for help:

In Chrome you can check the "Selected context only" (screenshot here) option, and it'll be this.

answered Dec 08 '18 at 19:13

gulpnerd

156
1
3

First you need to select the window from which messages should be shown. After doing that, this worked! – rramakrishnaa May 10 '22 at 11:47

score 3 · Answer 2 · edited May 23 '17 at 12:10

How about adding a snippet in your JavaScript to catch errors thrown by the iFrames?

You could replace [IFRAME ERROR MESSAGE] with the errors your iFrame is throwing. If the snippet catches an error from an iFrame, it will do nothing, otherwise, it will output the error to the console:

window.onerror = function (msg, url, line) {
    if (msg == "[IFRAME ERROR MESSAGE]") {
        return true
    }
    else {
        //do nothing
    }
}

Make sure to put this code as early as possible in your script.

Reference

Reference 2

Working example (save it as test.html and open in chrome):

<button onclick="myfunction()">x is not defined</button>
<button onclick="myfunction2()">y is not defined</button>

<script>
window.onerror = function (msg, url, line) {
    if (msg == "Uncaught ReferenceError: x is not defined") {
        return true
    }
    else {
        //do nothing
    }
}
function myfunction(){
    console.log(x);
}
function myfunction2(){
    console.log(y);
}

</script>

In this example, you will see that no errors will be outputted in the console when you click the first button, but you will see errors when you click the second button.

Downvote, cause this won't work 100%. A CORS error inside iframe will still be thrown. — Andrei, Apr 18 '23 at 04:19

score 2 · Answer 3 · answered Apr 18 '19 at 15:42

Just filter out (using the Chrome's filter box) the log messages from the iFrame.

In Chrome's Console tab you have a Filter box, type there the name of the file you want to filer out, with a minus sign "-" before the file name. You can filter multiply files, using space as a delimiter.

For example:

-LogUtil.js -FrameService.js

Or instead of typing, just right click on a log message, and select Hide message from <file_name>.

score 1 · Answer 4 · answered Apr 29 '16 at 13:20

You can add something like "?nofrm=1" to the src attribute of the page's script tags you want to see logs for. Then in Chrome you can type "nofrm" into the filter to get logs from only them scripts. Add "?nofrm=1" to the url if you want to log inline scripts too.

score 1 · Answer 5 · edited Jan 18 '20 at 01:09

I wrote a logger service for the client side. I used a pattern by which I can filter out the logs/errors etc which are being produced by my script and not by the iframes.

function logger(){
    var pattern="PC:";
    var info=function(){
        Array.prototype.unshift.apply(arguments, [pattern]);
        console.info.apply(console, arguments);
    }
        var log=function(){
        Array.prototype.unshift.apply(arguments, [pattern]);
        console.log.apply(console, arguments);
    }
    var warning=function(){
        Array.prototype.unshift.apply(arguments, [pattern]);
        console.warn.apply(console, arguments);
    }
    var debug=function(){
        Array.prototype.unshift.apply(arguments, [pattern]);
        console.debug.apply(console, arguments);
    }
    var error=function(){
        Array.prototype.unshift.apply(arguments, [pattern]);
        console.error.apply(console, arguments);
    }
    return {
        info:info,
        log:log,
        warning:warning,
        debug:debug,
        error:error
    }
}

Here "PC:" is the pattern

score 0 · Answer 6 · answered Mar 18 '16 at 14:13

0

You can filter the logs by source / hide from other scripts than you own. It will of course only be a solution if you get logs from a smaller number of scripts

answered Mar 18 '16 at 14:13

Steen

2,749
2
20
36

How to hide messages in console that came from iframes

6 Answers6