We Keep Coding

JavaScript path doesn't load on Live Server extension (VS Code)

HTML and CSS files are working perfectly on my live server. But every time I lead to a .js script it will not be shown on my live server. If I try to load the .js file directly through the URL it shows "Cannot GET /line.js". I already tried out everything I've found on the internet but it's still not working. Here are the points I checked/did:
Installed Code Runner
Installed Node.js = node.js system path done
Settings = Live Server Config = specified browser
"liveServer.settings.CustomBrowser": "chrome" on JSON settings
.js file is in a separate folder and accessed via <script src="line.js"></script> on index.html
Chrome is set as default browser on my system
Thanks for your inputs.

If the js file is in a separate folder, you need to provide the exact route to the folder in the script tag, since in the current form it is trying to find the js file in the root directory. The script tag should look like this:
<script src="FOLDER_NAME/line.js"></script>

It's possible that your javascript file is being loaded before the HTML page is rendered. You can try adding "defer" to your script tag like this:
<script src="demo_defer.js" defer></script>

how to navigate to the source file when debugging js in google chrome

I am using the google chrome to debugging the javascript source file, now I could debbugging the output js file, but the output js file is not human friendly readable. It looks like this:
from the google chrome console, I can see the call stack, and the google chrome tips shows that the source map are avaliable. But how to navigate the the js source file with current debugging line? I already type command + P in macOS but just shows the source files, I did not know which line should to navigate. the call stack only show the output js file line number.

Next to the "Page" tab (you can make the side bar bigger or click on those two arrows, there you will find the "Filesystem tab". If you add the corresponding folder to the workspace you will be able to edit and save those files.
Here's an article that explains it in details using a python server.
(note that you can use any local server you'd like)
(note that it won't work with local files url like file:///)

If you are trying to debug your current JS file at line 23487, steps would be to-
Load URL.
Open chrome debugger tools.
Put debug point on desired line.
Reload the URL, the debugger will pause at debug point.
You can watch below video for this, specifically #10:40 timestamp.
https://www.youtube.com/watch?v=WmVEddplwbo

how to load javascript file from absolute network path

Is there a way i can define my script tag to use absolute path instead of relative path so that my JavaScript files are loaded from a network location?
This is what i have tried:
<script src="file:\\\MyDFSDirectory\Test\TestApp\Scripts\jquery-1.7.1.js"></script>
This does not work. in FF, i get the error Security Error: Content at http://localhost/Test/Test.html may not load or link to file:\\\MyDFSDirectory\Test\TestApp\Scripts\jquery-1.7.1.js
In IE, I dont see the file being downloaded. In Network Tab (IE Dev Toolbar), it shows Received 0 B. If i take the URL and paste it in the File Explorer, it opens the JS file.
What am i missing here?

You are indeed running up against the security model of the browsers. The only way around this is to run a web server locally and serve up the files that way.

Cannot import a local js file in html page [duplicate]

For development purposes, I'd like to be able to easily load locally-stored scripts into the browser instead of having to copy-paste to the console.
Creating a new <script> element isn't working, it gives a Not allowed to load local resource: file://.... error (in Chrome).
Also, creating a userscript won't work--I'd have to re-install it every time I make an edit.
Is there an alternative way to easily load a local script via a bookmarklet/etc?

In Chrome, you can create an extension that holds all of the local files that you need to load. It will make your files accessible via chrome-extension://... instead of file://...
Make a file named manifest.json in a new folder and fill it with:
{
"name": "File holder",
"manifest_version": 2,
"version": "1.0",
"web_accessible_resources": ["test.js", "other.js", "yetanother.js"]
}
Then, put all the scripts you want to load in that new directory, and make sure they are included in the web_accessbile_reources manifest list. Load the extension by going to chrome://extensions, enabling Developer Mode, and selecting the new folder with Load unpacked extension....
Now you can access all the files in your extension directory using chrome-extension://[app_id]/[file_name], where "app_id" is the hash listed for the extension on the chrome://extensions page. Note that because the protocols and hostnames differ from where you've doing your actual work (unless you decide to do all your development in the extension folder, which might be acceptable to you), the extension resources are cross-domain and can only be loaded via <script> tag.
Now from the console, you can do:
var s = document.createElement("script");
s.src = "chrome-extension://aefigdoelbemgaedgkcjpcnilbgagpcn/test.js";
document.body.appendChild(s);
(Assuming your file is test.js and your app id is aefigdoelbemgaedgkcjpcnilbgagpcn.)
It's a quite bit to type, I know, but perhaps you can store the chrome-extension://[app_id] part as a shorthand variable?

Sadly, Chrome doesn't allow you to load local files via AJAX; however, you can work around this limitation by launching the browser with the flag --disable-web-security (details vary per host operating system).

run chrome as:
chrome.exe --allow-file-access-from-files
from CLI

you need to run local http server
this is a good document for this:
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

Have you tried a relative path from your page to your js file liek so...
src='/js/javascript.js'

must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

I need help with problems loading my landing page. I keep getting this messages on my "inspector" in chrome -
Denying load of chrome-extension://bjgfdlplhmndoonmofmflcbiohgbkifn/js/lib/jquery-2.0.2.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Denying load of chrome-extension://bjgfdlplhmndoonmofmflcbiohgbkifn/js/lib/backbone-min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
GET chrome-extension://invalid/
This is the link for my website http://www.itayroisman.com
Please help me with this issue.

The Hootsuite chrome extension doesn't seem to be compatible with the latest build of chrome.
Go to tools>extensions and click Developer mode. The id numbers come up on each of your extensions and you can match them to the errors in Developer Tools

I found another anwser may be OK.
Just remove this line from the top of jquery file
//# sourceMappingURL=jquery-1.10.2.min.map
If you check the source of Jquery 1.10.2, it has included source map line on the top. I hope you are not using Source Maps. For more details just check these links:
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)
Alternate approach
Download the source map file from jquery downloads page and put jquery-1.10.2.min.map in the extension directory.
Download uncompressed source code as well and put in the extension directory.
Basically you need three files [SourceMap, Compressed, Uncompressed].
Add these map file path and uncompressed file paths to web_accesible resources.

I just had the same problem.
If you're not using the the sourcemap:
Open your jquery.js, remove the following line fro mthe top of the file:
//# sourceMappingURL=jquery-2.0.3.min.map
If you do want the sourcemap:
Download code.jquery.com/yourfilename (see the comment in your jquery file, mentioned above)
Add a line line
"web_accessible_resources": [
"js/jquery-2.0.3.min.map"
],
To your manifest.json
Reload your extension.

For me disabling: XPath Helper 1.0.13 in chrome://extensions/ solved the problem

For those who are developing a Chrome extension and are having this same problem, this answer may help you.