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

User · Answer

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  quot Go Live quot  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  quot Go Live quot  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  lt PORT gt  index html where  lt PORT gt  has the same number as shown in the status bar in Visual Studio Code

User · Answer

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

User · Answer

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  amp  try one of the following depending on your python version  if the version is 3 X python3 -m http server   On windows try  quot python quot  instead of  quot python3 quot   or  quot py -3 quot    If Python version is 2 X python -m SimpleHTTPServer

User · Answer

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

User · Answer

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        lt html gt            lt head gt                lt script type    text javascript  src    path to your jsfile  gt  lt  script gt           lt  head gt        lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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  amp  console  You can then interact with your html js scripts in the console

User · Answer

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

User · Answer

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

User · Answer

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  lt script src  test js  gt  lt  script gt  and see if that loads  If that fails  check your syntax  Tested in Chrome 46

User · Answer

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

User · Answer

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

User · Answer

Here s what I did by creating 2 files in the  sandbox directory    First file  sandbox js Second file  index html    x000D   x000D  const name    Karl  x000D   x000D  console log  This is the name      name  x000D   lt html gt  x000D     lt head gt  x000D       lt script type    text javascript  src    file    Users karl Downloads sandbox sandbox js  gt  lt  script gt  x000D     lt  head gt  x000D   lt  html gt  x000D   x000D   x000D    You can then use Chrome or any browser to inspect and debug console your code

[javascript] Load local javascript file in chrome for testing?

Visual Studio Code

Install Visual Studio Code

Add the Live Code Extension

Open in Code

Troubleshooting

Examples related to javascript

Examples related to browser