We Keep Coding

createElement(script)/appendChild how to debug added script?

var js = document.createElement("script");
js.type = "text/javascript";
js.innerHTML = layout[i].text;
document.body.appendChild(js);
I am adding a script like that, notice there is no src, but innerHTML instead, a script is fetched on demand with XMLHttpRequest. Unfortunately the script does not appear in the dev tools, not in Chrome not in Firefox.
How to append a script from a source string so that I can still debug it in the devtools?

To be able to debug dynamically added scripts in Chrome, you need to append //# sourceURL=test_file_name.js at the end of the script that you want to debug, like below
var js = document.createElement("script");
js.type = "text/javascript";
js.innerHTML = layout[i].text + "//# sourceURL=test_file_name.js";
document.body.appendChild(js);
Now, if you open the source tab in Dev console, you will find test_file_name.js under the (no domain) section (normally). I just verified it in Chrome version 67.0.X
I believe the same should work on Firefox as well,
Refer these links also,
Chrome Dev Tools
sourceMappingURL and sourceURL syntax changed
Update :
This doesn't work in firefox. There are several bugs created for this issue, but no fix so far, script tag using sourceURL doesn't appear in debugger sources pane

JS function works on chrome console but not when load from plugin

So I have a webpage with a function applaud. When I call it from the console, I get the normal return:
applaud(3004,1935);
undefined
However, if I use CTG plugins (simple plugin to run a js script), with that code
applaud(3004,1935);
I get the following error in console:
3VM5444:1 Uncaught ReferenceError: applaud is not defined
at <anonymous>:1:1
(anonymous) # VM5444:1
and function isn't working.
Do you know how I can use it?
Thanks.

I know this is a bit outdated, but I can answer this. (I made the extension in question.)
Chrome Extensions by default insert scripts into a webpage in a different context than the rest of the page. This is for security reasons. If you'd like to run code in the context of the webpage, you'd need to use a little workaround.
In the script that the Chrome Extension injects, have that inject a <script> tag into the body of the page. Then that script will be loaded and be able to execute the functions like you can in the console.
Here's a demo of code that can do what I'm talking about:
//Create a new script element.
var script = document.createElement("script");
//Get the function you want to inject as a string and add it to the script.
script.innerHTML = injection.toString();
//Add a call to that injection function so it'll automatically execute once it's injected.
script.innerHTML += "injection();";
//Inject that newly created script into the body of the page.
document.body.appendChild(script);
//The contents of this script will be run inside the same context as the webpage.
function injection(){
applaud(3004, 1935);
}

Does Google Apps block code from the Chrome console?

I noticed the Chrome console gave an error when the following was typed:
$("body").hide();
Is there a solution to modify HTML elements when working with Google Apps?

Jquery can't be accessible in browser console directly, because it's a external library file & doesn't come inbuilt within browser.
So to access the Jquery from console, you can run below line in console;
var jqlib = document.createElement('script');
jqlib.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jqlib);
Here we get the script tag of current page & injecting JQuery library into it.
After running above lines, you can execute your code;
$(body).hide();

Dynamically loaded javascript not executing

For my debugging, I'm trying to load a javascript file from the console. I've tried several options:
var ns = document.createElement("script");
ns.type = 'text/javascript';
ns.src = 'http://localhost/test.js';
document.getElementsByTagName("head")[0].appendChild(ns);
and also:
$.getScript('http://localhost/test.js');
Neither worked as expected. I can see the <script> tag added in the DOM tree but the script is not execute and the Network tab in the developer's tools does not show the script being loaded.
How can I get it to execute?
UPDATE: Interestingly, the code works fine on Chrome, but not on FireFox (I'm on Ubuntu 12.04).

Chrome Extension: Injecting external script

I'm creating a Chrome extension that appends a script tag to a page, and then uses code defined in that external script:
$('body').append('<script src="..."></script><script>console.log(SomeObject)</script>');
SomeObject is defined in the external script, so I should be able to access it, right? Well, I can't, as I get an "undefined" error.
I even tried using head.js to load the external script and execute a function after the script is loaded, to no avail.
If I open the Chrome console, I can access the damn object just fine!!!
I tried both a content script and executeScript inside a background page to no avail. On both, if I use console.log(window), I can inspect the window object in the console, and SomeObject is nowhere to be found. If I inspect the window object on the Chrome console, there it is!
Are injected scripts sandboxed somehow or what gives?
Thanks!

This is what finally worked:
var script = document.createElement('script');
script.src = "...";
script.addEventListener('load', function() {
// SomeObject is available!!!
});
document.head.appendChild(script);
I wonder why none of the other methods worked...

I bet the script just isn't loaded when you call it right away, does this work:
<script src="..."></script><script>setTimeout(function() {console.log(SomeObject)}, 3000)</script>

So it seems the answer is you can't, due to security restrictions :(
I had to hack my way around it by using an iframe (oddly, the iframe can access its parent document).