Access call stack in iframe

Question

Since the chrome dev tools is blocked on my school computer (a chromebook), I have to build my own dev tools for debugging.

I chose to use a html file for debugging. This is what I have now: a giant textarea for source code, a console for debugging, and an iframe for displaying my result.

I want to view the call stack whenever log() is called in the iframe. Here's the code I have for logging (as a replacement for console.log):

outputIframe.contentWindow.log = function(tobelogged) {
    consoleDisplay((new Error).stack);   //for getting the stack trace https://stackoverflow.com/questions/1340872/how-to-get-javascript-caller-function-line-number-how-to-get-javascript-caller
    consoleDisplay(tobelogged);
}

However, this is the result:

Source code input: <html><body><script>function abc(){log(123);};abc()</script></body></html>

Console output:

<  Error
       at outputIframe.contentWindow.log (<anonymous>:244:34)
       at refresh (<anonymous>:260:47)
       at HTMLIFrameElement.outputIframe.onmouseenter (<anonymous>:235:25)
--------------------------------------------------------------------------
<  123

This is what I want:

<  Error
       at abc (<anonymous>:1:16)
       at <anonymous>:1:27
--------------------------------------------------------------------------
<  123

or:

<  123
       at log (somewhere:1:16)   //this line actually does not matter
       at abc (<anonymous>:1:16)
       at <anonymous>:1:27

In short, I want to access the call stack inside an iframe. Any ideas?

Thank you in advance.

P.S. Since my computer is a chromebook, I don't need browser compatibility. The browser I'm using is always the latest version of google chrome.

When you say blocked, are you saying they aren’t available in chrome on chrome books or the school is intentionally blocking that capability? — Geuis, May 01 '18 at 05:20
https://support.google.com/chrome/a/answer/2657289 Look for developer tools. — John128217, May 02 '18 at 17:56

John128217 · Accepted Answer · 2018-05-02T19:25:28.100

I put (new Error).stack in the iframe instead of my editor source code and it solved my problem.

To prevent beforeunload popup and TypeError: Assignment to constant variable., the way I update iframe is completely remove it and then put a clone of it back in (maybe I should just use location.reload() and change the addEventListener()).

So, I just added a line of script in the iframe and remove it before I put the actual stuff in.

outputIframe.contentWindow.document.write('<script>window.log = function(a){parent.consoleDisplay((new Error).stack);parent.consoleDisplay(a);}<\/script>');
outputIframe.contentWindow.document.close();     //log function will be saved and
outputIframe.contentWindow.document.write('');   //event listeners will not be saved
outputIframe.contentWindow.addEventListener("error", (event)=>{consoleDisplay(event.error.stack);});
outputIframe.contentWindow.document.write(things_to_put_in);
outputIframe.contentWindow.document.close();

I think another way is to create a script element, append it, and then remove it. I haven't tested it though.

score -1 · Answer 2 · answered May 01 '18 at 05:14

-1

This doesn't answer your direct question, but why not just use firebug lite? You get the functionality you are describing, plus way more:

function test() {
    console.log((new Error).stack);
}

test();

<script id="FirebugLite" src="https://getfirebug.com/firebug-lite.js#startOpened" firebuglite="4"></script>

<div id="firebug">Just use firebug lite</div>

answered May 01 '18 at 05:14

dave

62,300
5
72
93

Not a good answer. Basic dev tools should be available. Besides firebug stopped development a while back because their mission succeeded. – Geuis May 01 '18 at 05:22
Yes, they should be, but they're not. On a Chromebook, Chrome Developer Tools is enabled/disabled through Chrome Policies, which is maintained by the Chrome Management Console as part of a Google Work account. The only ones with access to these policies would be his school. You not understanding the problem doesn't make this not a good answer. – dave May 01 '18 at 06:45
My school use goguardian, a chrome extension, to block our sites. If everyone in our school can use inspect, we can just type `window.close()` in that extension to complete disable that system. Even though it is easy to bypass goguardian, I don't think I can bypass google's police since they have a good bug report system. Methods to bypass that usually lasts for only a month. – John128217 May 02 '18 at 17:56
Yeah, you're right. I should just use other's code and it's more convenient. I actually figured out a way to answer my direct question for future reference. – John128217 May 02 '18 at 18:06

Access call stack in iframe

2 Answers2