What should I do if I want to access the history of console.log?

Asked 2 years ago, Updated 2 years ago, 83 views

I'm going to show you what's on the chrome console and what's on the console (iframe). I'd like to put it in a variable as a string and output it to html. What are the options?

Thank you for your cooperation.

javascript google-chrome-devtools

2022-09-30 20:28

3 Answers

Here are some tips for not using the library.

The iframe DOM node has an object called contentWindow. This is the same as the window in iframe. When some conditions are met from the outside frame You can rewrite the inside of this contentWindow

Once you have used this to replace contentWindow.console.log and others with another function, You can see the output (full history) from within iframe to console.log from the outside. The approximate code looks like this.

// Obtain the first iframe in the sentence.You ought to change your approach as necessary.
var firstFrame = document.getElementsByTagName('iframe')[0];

firstFrame.contentWindow.console.log=function(){
  // TODO:logging arguments as history
}

Some conditions are approximately as follows, and should only be rewritable if all of them are met.(Not verified)

  • iframe node hanging under document
  • Same origin of content outside and inside iframe
  • No sandbox restrictions

Reference: About Inline Frames - JavaScript Programming Course

If you can put any JavaScript in the content inside iframe, There is also a way to deal with different origin situations. It is a way to use parent.postMessage.

The explanation is to show a simple code, but it looks like the following: Also, the code does not include calls from online. If necessary, supplement as appropriate.

JavaScript inside iframe

console.log=function(){
  parent.postMessage(JSON.stringify(arguments), '*')
}

Outside JavaScript

window.addEventListener("message", receiveMessage, false);

function receiveMessage(ev){
  // Verify the message is from the expected origin
  if(ev.origin==='http://example.org/'){
    // record in one's history
  }
}


2022-09-30 20:28

From Google Chrome extensions, you can access console history using the chrome.experimental.devtools.console API.

This API is only available from within the developer tool and should be written as an extension to the developer tool.And the restriction is that you need to open the developer tool to get the logs.It is also an experimental API, so you need to manipulate the browser settings to allow it to be used.The flow is:

Include experimental permissions in manifest.json and specify HTML files in devtools_page

...
"permissions": [
  "experimental"
],
"devtools_page": "devtools.html",
...

Using the Historical API for Scripts referenced by devtools.html

appears in

Using the messaging API, you can print from within the developer tool to the original document:

Send a message from a script referenced by devtools.html:

//<script src="devtools.js"></script>, and so on.
chrome.experimental.devtools.console.onMessageAdded.addListener(function(message){
  chrome.runtime.sendMessage({
    "to": chrome.devtools.inspiredWindow.tabId,
    "payload": message
  });
});

Receive with the script Event Page and relay to Content Script:

//In the file specified in the manifest "background": {"scripts":[...]}
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
  chrome.tabs.sendMessage(message.to,message.payload,sendResponse);
});

Content Script prints to original document:

//In the manifest "content_scripts": In the file specified by [...]
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
  var log = document.createElement('div');
  log.innerHTML = JSON.stringify(message);
  document.body.appendChild(log);
});

The Advanced Developer Tool documentation also covers several use cases using the messaging API.


2022-09-30 20:28

This is not a direct way to access console.log history, but using a test framework like Sinon.js seems to do the same.
For example, Spy, which monitors arguments, return values, errors, and so on when a method is called, can retrieve the string passed to the console.log argument (firstlog contains "hoge" and secondlog contains "moge" as follows:

varspy=sinon.spy(console, "log");
console.log("hoge");
console.log("moge");
var firstlog = spy.getCall(0).args[0];
varsecondlog=spy.getCall(1).args[0];


2022-09-30 20:28

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.