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
Related
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();
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).
I mean it, i want write a simple script in a .js file to execute in the console of the dev tools (with the dev tools API), for example is a use the $ sign in the simple .js file to pass to the dev- tools (script in a html page ) i get error :
Uncaught ReferenceError: $ is not defined console.js:10
(anonymous function)
but in the dev-tools API, in the Chromium console it'll use to select the DOM element (selectByQuery()).
The problem is i can't understand how pass the script that it must be exec in the dev-tools console. How can i solve this ?
Thanks in Advance
look at example how load jquery library. Just execute this in console. You can do similar with any script you need.
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
document.body.appendChild(script);
Hope, i understood you right
I've recently added a third-party javascript library to my website in order to manage email subscriptions:
<script type="text/javascript" src="http://forms.aweber.com/form/catID/formID.js"></script>
This javascript file contains a line to load another javascript file to style a popover that's displayed on the page:
var script = document.createElement('script');
script.src = "http://forms.aweber.com/form/styled_popovers_and_lightboxes.js";
script.type = 'text/javascript';
document.getElementsByTagName('HEAD')[0].appendChild(script);
Oddly enough, this script loads fine in Safari, IE and Firefox, but in chrome the script fails to load:
Yet I can load the same script in a new tab. When I debug the network request, the only information I can gather is that there was no response:
Why would Chrome (only) be unable to load this script?
You're not adding a new <script> tag; you're just passing a URL to .appendChild().
var newScript = document.createElement('script');
newScript.src = "http://forms.aweber.com/form/styled_popovers_and_lightboxes.js";
document.getElementsByTagName('head')[0].appendChild(newScript);
This script is blocked by AdBlocker in Chrome. If you disable it, it should work.
Maybe you could host this script on your server? Or you would need to notify your users that they have to disable their AdBlocker use everything on this site, but this probably won't make them happy.
You have to append script tag not url of javascript into head element, something like this,
var script = document.createElement('script'); //creating script element.
script.src = "http://forms.aweber.com/form/styled_popovers_and_lightboxes.js";
document.getElementsByTagName('HEAD')[0].appendChild(script);
I encountered a webpage that shows a popup, however, the only related JavaScript code I found on that page is the code below. What exactly does this code do and how does it hide the actual implementation (showing the popup)?
<script language="javascript" type="text/javascript">
var script = document.createElement("script");
script.src = "/in.php?referer=" + escape(document.referrer);
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
This code only inject a <script> tag.
When you look in the Chrome dev tools, you'll see the file referenced here in the sources tab.
This javascript file will have this name: "/in.php?referer=" (and document.referrer as value to the query string).
There's really nothing hidden, it's just that this way the javascript file is loaded asynchronously and won't block further script from loading/executing. This technique is often used by third party in order to leave the smallest footprint possible (google maps, twitter, facebook SDK, youtube, etc, etc).