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?

Answer 1

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.

Answer 2

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.

Answer 3

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> .

Answer 4

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.

Answer 5

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

Answer 6

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