Capture console log of an iframe

Question

Is there a way to capture the console outside of an iframe?

I'm working on an online IDE similar to jsFiddle and I wanted to give the users to option to at least read the results of the javascript console.

You can overwrite `console.log` as suggested [here](http://stackoverflow.com/questions/11049996/redirect-calls-to-console-log-to-standard-output-in-jasmine-tests#11050414) — A. Rodas, Feb 17 '13 at 18:27
Won't that print the results in the iframe's content? I'd like to print the console logs in a div inside the iframe container's body — Adonis K. Kakoulidis, Feb 17 '13 at 18:46

A. Rodas · Answer 1 · 2013-02-17T20:25:20.407

24

If you want to print the log messages inside the window container's body, it is possible to declare the panel there:

var console = {
    panel: $(parent.document.body).append('<div>'),
    log: function(m){
        this.panel.prepend('<div>'+m+'</div>');
    }       
};
console.log('message');

edited Feb 17 '13 at 20:25

answered Feb 17 '13 at 19:21

A. Rodas

20,171
8
62
72

Hi, thanks it works as expected but could you please explain what this line does? `panel: $(parent.document.body).append('
'),`, I don't understand why we use the `.append('div')` part.
– Adonis K. Kakoulidis Feb 17 '13 at 23:01
That's only for wrapping the messages into a single `div`. You can use `panel: $(parent.document.body)` too, but then you'll have each message directly as a child of the container's body. – A. Rodas Feb 17 '13 at 23:19
1

Ya after a while i understood its purpose and modified it to fit my needs, thanks for taking the time to explain it to me. – Adonis K. Kakoulidis Feb 18 '13 at 03:45

score 15 · Accepted Answer · answered Nov 11 '17 at 18:40

Here is another solution if you don't want to append to HTML

var console = {
  __on : {},
  addEventListener : function (name, callback) {
    this.__on[name] = (this.__on[name] || []).concat(callback);
    return this;
  },
  dispatchEvent : function (name, value) {
    this.__on[name] = (this.__on[name] || []);
    for (var i = 0, n = this.__on[name].length; i < n; i++) {
      this.__on[name][i].call(this, value);
    }
    return this;
  },
  log: function () {
    var a = [];
    // For V8 optimization
    for (var i = 0, n = arguments.length; i < n; i++) {
      a.push(arguments[i]);
    }
    this.dispatchEvent("log", a);
  }
};

Outside the iframe

iframe.contentWindow.console.addEventListener("log", function (value) {
  console.log.apply(null, value);
});

score 11 · Answer 3 · answered Jul 21 '21 at 17:04

11

You can use Chrome DevTools. There is a Javascript Selector "Top" where you can select the source. The logs from that source will show up.

answered Jul 21 '21 at 17:04

Matt

1,388
15
16

The answer is really offtopic though, the goal is to capture the logs in code and during runtime, this should run in everyone's machine, not just the developer's. – Adonis K. Kakoulidis Jul 22 '21 at 23:42
3

I was looking for this answer. Needed to reload the page for changes to take effect, for some reason. +1 – Victor Zakharov Jul 26 '21 at 12:57
The user is asking about how to capture the console output to print inside a div, not how to see the iframe console. – Jonathan Arias Jun 08 '22 at 17:37

Capture console log of an iframe

3 Answers3