I have a few dynamically loaded JS scripts that I want to be able to debug in chrome DevTools. I have read that I should be able to achieve this by appending
//#sourceURL=someFile.js
To the source I will be using eval on.
This is what I currently have:
var loadDynamic = function(filename){
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
eval(this.responseText + "\r\n" + "//#sourceURL="+filename);
}
};
request.open("GET", filename, false);
request.send();
}
loadDynamic("someFile.js");
I am getting no errors in the console log and the source is not being added to the source tree. However the evaluated code is definitely loaded and executed correctly. It is just the #sourceURL that isn't getting picked up.
Am I using this correctly?
Thanks
Related
Right now I'm running getting a local template URL and creating a div to insert it into.
Inside of my template is a simple <h3>Hello World</h3>
var newDiv = document.createElement('div');
const template = chrome.runtime.getURL("template.html");
How can I insert the contents of template into my newDiv.innerHTML?
You can add HTML content to an element using element.innerHTML = ....
You can get the template content by using a XMLHttpRequest.
Have a look at this:
function getTemplate(url, success) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
// If the request doesn't have an error status code,
// the contents of the loaded URL (request.responseText) are sent
// to the callback function (success).
if (request.readyState === 4 && request.status === 200)
success(request.responseText);
}
request.open("GET", url, false);
request.send();
}
You can use the function like shown in the code below. It uses a callback function for the success argument, which you have to specify.
getTemplate(url, function(responseText) {
document.write(responseText);
// or add the responseText to your div with: yourDiv.innerHTML += responseText;
});
Note that the request will mostly fail when you try to load content from a different origin (like a different file on your computer, or when you try to load site A's content from a script on site B).
I want to load locally stored data using plain javascript (no jquery for example) and then use it to display it in a table in html. My project structure looks like this:
root
- js
-- main.js
- res
-- data.csv
- index.html
I tried using a XMLHttpRequest, but somehow I get status 0 when trying to load the file and when printing the response text it prints out nothing at all.
The following method is called using window.onload:
var url = "file://../res/data.csv/";
varxmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
console.log(this.responseText);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
I don't think you can access the file system through most browsers.
Even if it worked locally, it wouldn't work as soon as you put your page up on a server. This is because the client will be asking for a file that is local to itself, not the server.
Chrome may have something for you though:
https://www.html5rocks.com/en/tutorials/file/filesystem/
Here is my utube.js (copy of a tutorial):
let getXMLFile = function(path, callback) {
let request = new XMLHttpRequest();
request.open("GET", path);
request.onreadystatechange = function() {
if(request.readyState === 4 && request.status === 200)
{
callback(request.responseXML);
}
};
request.send();
};
getXMLFile("https://cors.io/?http://api.irishrail.ie/realtime/realtime.asmx/getStationDataByCodeXML_WithNumMins?StationCode='+Stationcode+'&NumMins=90&format=xml", function(xml) {
console.log(xml);
});
How can I check that this is gets the XML data I need? The content creator states 'you need to place it on a server or local host...' I tried placing the .js itself on my server and this simply opens it in a text format when I access it from my browser. Running the .js directly gives me a compile error (line 2, char 5, ';' expected).
The creator can debug from the chrome console (console displayed error in red, when fixed he could read the actual XML data in the console output). How do I get to this step?:
I suspect I need to place the .js in a html doc, place that on my server and then access it from my browser? Not sure where the console comes into play however.
Thanks for any help. This is my first time seriously using JS or attempting to use the console please try keep it simple!
For learning purposes, trying not to use jQuery to get remote content.
The following snippet works well. It fetches two divs and puts them in the current page.
It's fetching this raw gist:
<div class="remote" id='one'>one</div>
<div class="remote" id='two'>two</div>
function remoteFetch() {
var xhr = new XMLHttpRequest();
var varUrl = 'https://gist.githubusercontent.com/persianphilosopher/b0d4e948da801d09969b4ac6f5c0206d/raw/d139dd28e2cd5a73a4b38f489c8462c755c342c6/temp';
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
if (xhr.status == 200) {
document.getElementById("here").innerHTML = xhr.responseText;
}
}
}
xhr.open("GET", varUrl, true);
xhr.send();
}
remoteFetch();
<div id="here"></div>
Question: What I cannot figure out is the equivalent of the following jQuery bit:
$("#here").load("varUrl #one");
that would allow me to only fetch a div by its id.
The closest I found on SO is this answer but I failed to adapt it here for my needs.
Thanks in advance.
The implementation in your codepen almost works, there's two issues which I've rectified in this fork:
https://codepen.io/anon/pen/VdJYVG?editors=1010
First issue was a typo on svgDoc.getElementsById, it should just be svgDoc.getElementById.
Second issue was a parsing issue in the DOMParser. You are passing in text/xml as the expected MIME-type while the content you want to parse is text/html .
So im trying to get all data to display back from the request but i cant get a response it just keeps giving me [object XMLDocument] or blank if i use .responseText
This is the request URL http://www.omdbapi.com/?t=Chef&plot=full&r=xml
This is the site http://www.omdbapi.com/
This is the code i am using
<button onclick="loadXML()">Run</button>
<p id="output"></p>
<script>
function loadXML() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("output").innerHTML = this.responseXML;
}
};
xmlhttp.open("GET", "http://www.omdbapi.com/?t=Chef&plot=full&r=xml", true);
xmlhttp.send();
}
</script>
All i need is a response returned and i can go from there but nothing i try is working :/
Thankyou for looking but i figured it out. I was receiving HTML tags and when i was outputting these tags they wouldnt show because they were echoing as HTML tags. The data was there just hidden. To resolve this i just saved the file instead, or it could be cleaned before outputting