How to Read from Chrome's Console in JavaScript

How to read from Chrome's console in JavaScript

You can't. What's in the console can't be read from JavaScript.

What you can do is hook the console.log function so that you store when it logs :

console.stdlog = console.log.bind(console);
console.logs = [];
console.log = function(){
    console.logs.push(Array.from(arguments));
    console.stdlog.apply(console, arguments);
}

console.logs contains all what was logged. You can clean it at any time by doing console.logs.length = 0;.

You can still do a standard, non storing, log by calling console.stdlog.

Accessing the console log commands via chrome extension

I found this post and I think Tampermonkey injects a script with the immediate function that you add in the Tampermonkey Chrome extension page, I found something similar in extensions like Wappalyzer, and looks good and safe, you could use WebRequest to inject to your website the new "polyfill" before the page is fully loaded as the post says.

Here the example of Wappalyzer that I mentioned before, this is the JS load in StackOverflow with Wappalyzer using the code injection, I didn't test it with Tampermonkey yet

Sample Image

EDIT

Checking Wappalyzer, how to inject the code is the easy part, you can use (Wappalyzer github example):

const script = document.createElement('script')
script.setAttribute('src', chrome.extension.getURL('js/inject.js'))

This probably will not fix your problem, this code is executed after all the content was loaded in the DOM. But, you can find how to fix that problem in this post

I'll suggest to use onCommitted event (doc1/doc2)

Using the mozilla.org example you will have something like

 const filter = {
  url: //website to track logs
  [
    {hostContains: "example.com"},
    {hostPrefix: "developer"}
  ]
}

function logOnCommitted(details) {
  //Inject Script on webpage
}

browser.webNavigation.onCommitted.addListener(logOnCommitted, filter);

how to display web browser console in a webpage

It will print whatever in console inside div tag.(ERROR FIXED!)

<html>
<head>
    <title>Console In Webpage</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div class="output"></div>
    <script language="javascript">
        var realConsoleLog = console.log;
        console.log = function () {
            var message = [].join.call(arguments, " ");
            $(".output").text(message);
            realConsoleLog.apply(console, arguments);
        };
        console.log("hello", "my", "name", "is", "shantharuban");
    </script>
</body>
</html>

interacting with javascript through the chrome console

You were correct in that all of your variables inside the function are only being defined locally, and thus can't be accessed via the console. However, in Javascript there are at least two options for setting global variables from inside functions; If you use these to declare a variable you want to access from outside the function, it will work:

Assign a value to an undeclared variable: varname=value;
Assign the variable to the window object: window.varname=value; or window['varname']=value;

Chrome Console logging elements in different formats

I was able to reproduce this result with Chrome v93 on Windows 10.

The "desired format" of the DOM element is what should be expected from console.log, while the JSON type output is what should be expected from console.dir.

I've found that wrapping the expression in a DOMContentLoaded or onload function seems to improve the result, but it still sometimes displays the full object instead of the expected DOM element.

window.onload = function() {
    console.log(document.querySelector(".heading")); 
};

I suspect that this is a bug in Chrome. I was unable to replicate this behavior in Firefox or Edge.

My best guess of what's happening here is that Chrome is attempting to log the element before the DOM is fully loaded.

This may also help explain somewhat:

Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you open the console.
https://developer.mozilla.org/en-US/docs/Web/API/Console/log

When I see the full object (undesired format) appear in the console, I've found that closing DevTools and re-opening with no page refresh seems to make it show the correct result.

How to Read from Chrome's Console in JavaScript