I am building and debugging the application through VSCode and live-server, and I am hosting the application on a local XAMPP apache server.
I would like to keep the javascript code the same and just switch between live-server and apache
the way I see doing this is by keeping an index.html
for apache and debug.html
for live-server in VSCode
So in index.html I would have something like this:
<body>
<div id="main_div" style="position: relative; "></div>
<script type="text/javascript" src="main.js">
bbCSV = 'http://xxx.xxx.xxx.xxx/BB.csv';
smtCSV = 'http://xxx.xxx.xxx.xxx/SMT.csv';
</script>
</body>
Where xxx.xxx.xxx.xxx
represents the IP of the server
And in debug.html I would have this
<body>
<div id="main_div" style="position: relative; "></div>
<script type="text/javascript" src="main.js">
bbCSV = 'http://localhost:8080/BB.csv';
smtCSV = 'http://localhost:8080/SMT.csv';
</script>
</body>
But these variables do not work in the javascript file, presumably because they are created after main.js is parsed.
Is there a way to create the variables before the JavaScript file is loaded?
Or is there a better suggested way of doing this?
2
Answers
Use the chrome extension to launch a debugger session, or you can type ‘debugger’ into your code and open debugger tools to pause your script
vscode Chrome Debugger
Also, load your variables first then the JS file. Things run synchronously, so your file does not see those when it loads.
When you use a script tag with a
src
all the script inside will be ovewritten by the loaded script.Try this: