How to pass variables from HTML to Javascript for debugging and release-CodePudding

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?

CodePudding user response：

When you use a script tag with a src all the script inside will be ovewritten by the loaded script.

Try this:

<body>
  <div id="main_div" style="position: relative"></div>

  <script type="text/javascript">
    bbCSV = "http://localhost:8080/BB.csv";
    smtCSV = "http://localhost:8080/SMT.csv";
  </script>

  <script type="text/javascript" src="main.js"></script>
</body>

CodePudding user response：

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.


<script type="text/javascript">

const bbCSV = 'http://localhost:8080/BB.csv';
const smtCSV = 'http://localhost:8080/SMT.csv';

</script>

<script type="text/javascript" src="main.js"></script>