So, I'm working on a project in which the actual production environment has access to APIs that I can't get except by loading the page inside the production environment (they are using angular.$window.external
), but loading the page inside production means I can't access developer tools, console, etc. because it runs in an in-application browser instance. So I am trying to output all console log/etc statements into a div in my document to try to troubleshoot when my API calls do not work as expected.
I got it sort of working, but it misses some things and I am not sure why.
The code I am including as consoledebug.js
:
// Code adapted from https://stackoverflow.com/a/5677825/12869266
// Include consoledebug.js at the end of a file, and create a div with
// the id "logs" in your html file where you want output.
var logDiv = document.getElementById('logs')
var addToLogDiv = function (type, text) {
var node = document.createElement('p')
node.className = type
var content = document.createTextNode(type + ': ' + text)
node.appendChild(content)
logDiv.appendChild(node)
}
// define a new console
var console = (function (oldCons) {
return {
log: function (text) {
oldCons.log(text)
addToLogDiv('log', text)
},
info: function (text) {
oldCons.info(text)
addToLogDiv('info', text)
},
warn: function (text) {
oldCons.warn(text)
addToLogDiv('warn', text)
},
error: function (text) {
oldCons.error(text)
addToLogDiv('error', text)
}
}
})(window.console)
//Then redefine the old console
window.console = console
I put the <script src="../common/consoledebug.js"></script>
tag at the end of the HTML document, right before the </body>
tag.
When I run inside a regular chrome window, I get these lines in my HTML body:
log: test
error: TypeError: $window.external.SomeProprietaryAPI is not a function
But Chrome's log shows an additional error myhtml.html:35 Uncaught ReferenceError: someOtherProprietaryAPI is not defined at myhtml.html:35
Any suggestions as to why this does not get captured by my function or what I can do about it? Or an alternative way to output all console output into the HTML document itself?
I tried including the script at the top of the file, but all that did was give me 2 errors on not being able to append to null (for the 2 log entries it's capturing, but not for the third one that it isn't).
I'm pretty new to Javascript and trying to get a base of existing AngularJS code working on a new version of the production environment that has switched from using IE to Chromium for HTML display.
Edit: Put enough code to be relevant in a Plunker. As you can see the console.log('test')
in the controller gets logged to the document, but the uncaught reference error in the body of the html document does not.
Edit six months later: Just wanted to note that the problem and its solution are still applicable in Angular12 using Typescript for the application (although the script that intercepts the console changes is a JS file loaded in the "scripts":
array of my production configuration, not Typescript included in the project anywhere.)