I am trying to test some JavaScript on my local computer using the Chrome browser but Chrome will not load local resources. Is there an easy work around for this?
This question is related to
javascript
browser
You can do it by a feature of chrome's DevTools: Snippets
If you still need to do this, I ran across the same problem. Somehow, EDGE renders all the scripts even if they are not via HTTP, HTTPS etc... Open the html/js file directly from the filesystem with Edge, and it will work.
To load local resources in Chrome when just using your local computer and not using a webserver you need to add the --allow-file-access-from-files flag.
You can have a shortcut to Chrome that allows files access and one that does not.
Create a shortcut for Chrome on the desktop, right click on shortcut, select properties. In the dialog box that opens find the target for the short cut and add the parameter after chrome.exe leaving a space
eg C:\PATH TO\chrome.exe --allow-file-access-from-files
This shortcut will allow access to files without affecting any other shortcut to Chrome you have.
When you open Chrome with this shortcut it should allow local resources to be loaded using HTML5 and the filesystem api
Use Chrome browser and with the Web Server for Chrome extension, set a default folder and put your linked html/js files in there, browse to 127.0.0.1:8887 (0r whatever the port is set at) in Chrome and open the developers panel & console. You can then interact with your html/js scripts in the console.
The easiest way I found was to copy your file contents into you browser console and hit enter. The disadvantage of this approach is that you can only debug with console.log statements.
Look at where your html file is, the path you provided is relative not absolute. Are you sure it's placed correctly. According to the path you gave in the example above: "src="../js/moment.js" " the JS file is one level higher in hierarchy. So it should be placed as following:
Parent folder sub-folder html file js (this is a folder) moment.js
The double dots means the parent folder from current directory, in your case, the current directory is the location of html file.
But to make your life easier using a server will safe you troubles of doing this manually since the server directory is same all time so it's much easier.
Here's what I did by creating 2 files in the /sandbox directory:
const name = 'Karl'_x000D_
_x000D_
console.log('This is the name: ' + name)<html>_x000D_
<head>_x000D_
<script type = "text/javascript" src = "file:///Users/karl/Downloads/sandbox/sandbox.js"></script>_x000D_
</head>_x000D_
</html>You can then use Chrome or any browser to inspect and debug/console your code!
You can use a light weight webserver to serve the file.
For example,
1. install Node
2. install the "http-server" (or similar) package
3. Run the http-server package ( "http-server -c-1") from the folder where the script file is located
4. Load the script from chrome console (run the following script on chrome console
var ele = document.createElement("script");
var scriptPath = "http://localhost:8080/{scriptfilename}.js" //verify the script path
ele.setAttribute("src",scriptPath);
document.head.appendChild(ele)
The easiest workaround I have found is to use Firefox. Not only does it work with no extra steps (drag and drop - no muss no fuss), but blackboxing works better than Chrome.
Running a simple local HTTP server
To test such examples, one needs a local webserver. One of the easiest ways to do this for our purposes is to use Python's SimpleHTTPServer (or http.server, depending on the version of Python installed.)
# Install Python & try one of the following depending on your python version. if the version is 3.X
python3 -m http.server
# On windows try "python" instead of "python3", or "py -3"
# If Python version is 2.X
python -m SimpleHTTPServer
Not sure why @user3133050 is voted down, that's all you need to do...
Here's the structure you need, based on your script tag's src, assuming you are trying to load moment.js into index.html:
/js/moment.js
/some-other-directory/index.html
The ../ looks "up" at the "some-other-directory" folder level, finds the js folder next to it, and loads the moment.js inside.
It sounds like your index.html is at root level, or nested even deeper.
If you're still struggling, create a test.js file in the same location as index.html, and add a <script src="test.js"></script> and see if that loads. If that fails, check your syntax. Tested in Chrome 46.
For security reasons, modern browsers won't load resource from locally running HTML files (files using file:// protocol in the address bar).
The easiest way to get a modern browser to load and run JavaScript files in local HTML files is to run a local web server.
If you don't want to go through the trouble of setting up a Node or Apache web server just to test your JavaScript, then I'd suggest you install Visual Studio Code and the Live Server extension.
Visual Studio code is a source code editor for pretty much any programming language under the sun. It has built-in support for JavaScript, HTML, CSS, TypeScript, and almost any kind of language used for Web development.
You can get the Visual Studio Code editor for your platform from https://code.visualstudio.com/. It supports Windows, Linux, and Mac. I think it also works on your Surface Pro if that's your thing.
After installing VS Code, you can add the Live Code code extension using the Extension panel (Ctrl+Shift+X in Windows) in Visual Studio Code.
After adding the extension, you should see a "Go Live" button in the bottom-right corner of the Visual Studio Code IDE (as shown in the above screenshot).
Open the root folder where your HTML and JavaScript files exist in Visual Studio Code and click the "Go Live" button. Optionally, you can right-click the HTML file in the Explorer (Ctrl+Shift+E) and select Open with Live Server from the pop-up menu that appears.
This should create a locally running web server and open the file or folder in your web browser. If your file paths are correct, your JavaScript files should also load and run correctly.
If for some reason, the page doesn't load in your favorite browser, check that the address and port number are correct. If the Live Server is running, it should display the port number in the bottom-right corner of the Visual Studio IDE. Make sure the address in your browser says http://127.0.0.1:<PORT>/index.html where <PORT> has the same number as shown in the status bar in Visual Studio Code.
Windows 8.1 add:
--allow-file-access-from-files
to the end of the target text box after the quotes.
EX: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
Works like a charm
If you are trying to just test the functionality of your javascript file: create a blank html file, add a link to your js file as you would normally load a js file from html, and open the html file in Chrome. Go to the javascript console. You'll be able to interact with the functionality of your js code as usual. You wouldn't need to set up a server for this. If still not clear, here's an example:
<html>
<head>
<script type = "text/javascript" src = "path/to/your/jsfile"></script>
</head>
</html>
Source: Stackoverflow.com