Load local javascript file in chrome for testing?

Question

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?

What if the html file is not running on a web server, and never will? In my case I need a html page that runs locally but still needs to load json files. I cannot tweak my Chrome settings because the html file should run anywhere, not just on my own machine. — Kokodoko, Sep 28 '14 at 11:17
@SLaks not a good answer if you're planning to eventually run it in a WebView on Android (which WILL run local resources) but need to debug bootstrapping issues locally. — Michael, Oct 11 '17 at 19:12
Simplest solution: drag and drop your js file to the browser console and see the magic. — Davidson Lima, Apr 15 '21 at 00:23

score 30 · Answer 1 · edited Dec 10 '21 at 08:17

30

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>

edited Dec 10 '21 at 08:17

ZygD

22,092
39
79
102

answered Aug 03 '14 at 18:16

picmate 涅

3,951
5
43
52

11

This worked when I did ```file:///Users/someuser/dev/file.js``` – Clay Sep 08 '17 at 22:48
2

I get a *lot* of weird behavior when I try this - I can't access CSS style objects, some of my event handlers don't work, I can't provide credentials for AJaX requests, ... – Michael Sep 08 '19 at 21:56
I agree with @Michael this is not a good approach – Gass Dec 30 '21 at 10:52

score 22 · Answer 2 · answered Dec 23 '13 at 18:01

22

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 script is now loaded the browser. You can test it from console.

answered Dec 23 '13 at 18:01

Magesh

454
2
6

11

That's a lot of hassle just to test a local file. Also it won't work when the file needs to run anywhere, instead of only on your own machine. – Kokodoko Sep 28 '14 at 11:25
8

@Kokodoko - Isn't the question about loading and executing a javascript file from the local machine? – Magesh Sep 29 '14 at 04:59
Though this is unnecessary work for the original question, this was a great solution for adding an externally hosted script (axios for making API requests in my case) to the browser console to experiment with. – zgillis Feb 08 '19 at 05:46
1

Running a server was simpler for me. If Python is installed, navigate PowerShell to the directory containing the .html file, run `python3 -m http.server 8000`, then navigate Chrome to `localhost:8000/my-file.html`. No need for modifying the script, although I did need to allow JS for localhost:8000 when Chrome prompted that it had blocked it (I have JS disabled by default in Chrome). – ggorlen Apr 21 '21 at 18:20

score 17 · Answer 3 · edited Apr 21 '21 at 18:06

17

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

e.g. 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.

edited Apr 21 '21 at 18:06

ggorlen

44,755
7
76
106

answered Dec 24 '13 at 16:43

jing3142

1,821
1
11
16

6

I just tried this, to no effect. Is there anything else that needs to be set? – Carlos Jun 13 '14 at 17:38
1

Works on linux /usr/bin/chromium-browser --allow-file-access-from-files – Rian Oct 01 '15 at 12:08
4

Not on Win10 in Powershell or Cmd: ` C:\"Program Files (x86)"\Google\Chrome\Application\chrome.exe --all ow-file-access-from-files`. In fact in Cmd it tries to open the .exe as a page for some reason... – Blair Houghton Nov 06 '15 at 17:59
Works for me on Ubuntu. But you must totally kill all chrome processes before such chrome restart. – Dzenly Oct 16 '19 at 03:30

score 10 · Answer 4 · answered Sep 09 '20 at 12:01

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

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.

Install Visual Studio Code

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.

Add the Live Code Extension

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.

Live Server Extension

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 in Code

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.

Open with Live Server

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.

Troubleshooting

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.

score 6 · Answer 5 · answered Sep 24 '17 at 21:58

6

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.

answered Sep 24 '17 at 21:58

minimallinux

139
2
10

You can get it here https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en and whatever default folder you set will be your web server, handy if you dont want to have to set up Apache or anything else. – minimallinux Sep 24 '17 at 22:01
1

An even shorter way if you use VS Code Editor at https://code.visualstudio.com/ is to install the Live Server extension, then you don't need anything else at all, with your project folder (can be any folder) open in VS Code just right click on the HTML file (with linked js) in the explorer and select "open with live server", and browse to localhost:5500 and you can view output in browser and use chrome/firefox console. – minimallinux Jan 23 '18 at 23:07

Mitch · Answer 6 · 2018-02-21T17:51:45.087

4

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.

edited Feb 21 '18 at 17:51

answered Feb 21 '18 at 17:27

Mitch

641
1
10
13

score 4 · Answer 7 · answered Jul 26 '18 at 07:05

4

You can do it by a feature of chrome's DevTools: Snippets

Create a new snippets
Copy and paste the file you would like to execute.
Hit CtrlEnter to run the snippet

answered Jul 26 '18 at 07:05

Sophie Su

73
1
3

https://developer.chrome.com/docs/devtools/javascript/snippets/ – SteveWithamDuplicate May 14 '21 at 12:51
I appreciate this info, but when @Sophie Su says "copy and paste the file", I think that means copy and paste the whole contents of *one* js file. But I think the original question was about having an html file run potentially multiple js files and commands *exactly as it would* if fetched from a server, not pushing it along one file or command at a time. – SteveWithamDuplicate May 14 '21 at 12:56

score 3 · Answer 8 · answered Dec 10 '15 at 03:53

3

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

answered Dec 10 '15 at 03:53

razor2816

33
1
8

Junaid · Answer 9 · 2022-10-10T15:45:53.667

3

Running a simple local HTTP server

To test such examples, one needs a local webserver. One of the easiest ways to do this is offered by Python's SimpleHTTPServer (or http.server, depending on the version of Python installed.)

# 1. Install Python 3 & use:
python3 -m http.server
# On windows, instead of "python3" try "python" or "py -3"

# If you installed python version 2 then use:
python -m SimpleHTTPServer

# 2. To serve a specific folder use the --directory flag:
python3 -m http.server --directory /Users/junaid/WebstormProjects

# Note: I use MacOs & I have given the absolute path to my projects folder & I was able to serve my desired folder.

edited Oct 10 '22 at 15:45

answered Dec 22 '20 at 13:00

Junaid

4,682
1
34
40

everyone shows this. but no one has an example of what comes next programatically. do you then use webrowser.open with the file path to your file? or does it have to be some http path and if so, what is the relative path from the http.server? – mike01010 Oct 08 '22 at 00:53
What's your use case, can you state what are you trying to achieve? – Junaid Oct 10 '22 at 15:51
the use case is to programmatically build and launch an html. to do this i have to start the simplehttpserver asynchronously, then open the html. what's not discussed in these solutions to how to set a web_root w/ simplehttpserver. after much experimentation i was able to figure out how to do that so that it could find that file i was copying to a 'working directory'. – mike01010 Oct 10 '22 at 18:40
Glad that you found a solution. Make sure to share with others as well. – Junaid Oct 11 '22 at 12:29
ok, i added yet another solution - this one for folks that want to programmatically open a file after the server has been started. – mike01010 Oct 12 '22 at 07:18

score 1 · Answer 10 · answered Jul 22 '19 at 23:57

Here's what I did by creating 2 files in the /sandbox directory:

First file: sandbox.js
Second file: index.html

const name = 'Karl'

console.log('This is the name: ' + name)

<html>
  <head>
    <script type = "text/javascript" src = "file:///Users/karl/Downloads/sandbox/sandbox.js"></script>
  </head>
</html>

You can then use Chrome or any browser to inspect and debug/console your code!

score 1 · Answer 11 · answered Jan 12 '22 at 10:41

setup

You will want to serve the file from a web server. Everything else will be quirky workarounds that might differ greatly from the final result. On the web, files are being served via web servers. You'll want to mimic that locally.

Since you're apparently (at least part-time) being a web developer, do yourself a massive favour and install node, if you haven't already. It comes bundled with the npx binary, which we'll use. Make sure you have a recent LTS version. Bonus points for using n, which will make it easy to stay up to date with your versions, and even switch them as you need.

steps to take

Inside the folder where your file is located: npx http-server -c-1
You can now access the file at http://127.0.0.1:8000/filename
Last thing to do is make the browser load the file. Magesh's answer works well for that, but I would recommend putting that snippet into a "custom js" extension. This one has served me well so far.
With everything in place, simply reload the page to get an updated version of your local file.

@mike01010 Anywhere, basically. Just be careful to execute the `npx` command inside the folder where your files are (e.g. your shell should have that as the current working directory). Also, the folder should be owned by your user to avoid permission conflicts. — panepeter, Oct 08 '22 at 12:11

score 1 · Answer 12 · answered May 13 '22 at 02:01

Note: this question comes top on google when you search for "chrome read local css without server". So...

If you really want to serve a local webpage and load its CSS and JS, and you really do not have or don't want to use a http server, then don't load the scripts nor styles; inline them.

Instead of something like this:

<link rel="stylesheet" href="somefile.css">

Define the style like:

<style>/*Here goes all the CSS file content*/</style>

And the same with the JavaScript files. The HTML file will be larger, but it will work.

Basically you just have to copy the file contents and paste it inline.

You really should use a server, but if you are forced to, you can use this method.

score 0 · Answer 13 · answered Oct 21 '17 at 20:10

0

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.

answered Oct 21 '17 at 20:10

Vishera

133
1
7

Not anymore. Even when marking as "your code" nothing happens, and the files disappear from the console. – SilverbackNet Jan 14 '18 at 09:41

score 0 · Answer 14 · answered Oct 12 '22 at 07:17

for my use case, i need to startup a local server, create working an interactive html page, and open it for the user to be able to interact with it. the problem was how to set the local server's web root to my temp working folder where i create these dynamic files. this was a quick and dirty solution.

In the below code, LOCAL_WEB_DIRECTORY is essentially the root. and i then create/copy the files i want to open in the brower to that directory + /templates

import webbrowser
from http.server import ThreadingHTTPServer, SimpleHTTPRequestHandler

    httpd = ThreadingHTTPServer(('', 8001), lambda *_: SimpleHTTPRequestHandler(*_, directory=config.LOCAL_WEB_DIR))
    server_thread = threading.Thread(target=httpd.serve_forever, daemon=True)
    server_thread.start()
    webbrowser.open('http://localhost:8001//templates/' + work_html)
    while True: sleep(1)

score 0 · Answer 15 · answered Jun 27 '23 at 14:17

0

If you have Node.js installed, you can run the command:

npx serve .

It will serve you a static site/single page application in the current directory.

Reference

answered Jun 27 '23 at 14:17

Philip

3,135
2
29
43

score -1 · Answer 16 · edited Nov 03 '15 at 20:58

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.

It was down-voted because that only works with a webserver. Modern browser prevent this using local files. It's a "security" feature... — Gael, Jul 27 '19 at 05:40

score -2 · Answer 17 · answered Jan 15 '17 at 08:54

-2

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.

answered Jan 15 '17 at 08:54

velop

3,102
1
27
30

haydar · Answer 18 · 2013-12-24T17:22:19.490

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.