Home>Article>Web Front-end> Solve the JavaScript runtime environment
The
Related free learning recommendations:javascript(Video)
Inlay JavaScript in an html, and the inlay tag
JsTest.html
ZX test title
displays the effect as shown below.
将js代码写入一个js文件中,然后通过html调用这个脚本。
function js_main(){ alert('main alert ZX test'); console.log('main console ZX test'); document.write('main document ZX test'); } js_main();
Insert the js file into the html file
ZX test title
The display effect is as follows shown.
JavaScript debugging printing is called out by pressing F12 in the browser, and is implemented using the console object in the code.
There are many ways to debug and print JavaScript, including directly printing numbers, arrays, strings, and even structures and classes.
Source code
function js_console_test(){ var strtest = "string"; var chartest = 'A'; var istest = 3; var fpai = 3.14159; var arraytest = ["zx",6.626E-34,'B',8]; var stTest = { siindex: 1, strname: "ZX Test", sinum: 2.71828, functest: function stfunc(){ return true;} }; console.log(strtest); console.log(chartest); console.log(istest); console.log(fpai); console.log(arraytest); console.log(stTest); }
Execution result
The console object has a printing level for debugging printing, corresponding to different debugging environments.
Source code
function js_console_level(){ console.log("This is log level."); console.debug("This is debug level."); console.info("This is info level."); console.warn("This is warn level."); console.error("This is error level."); }
Execution results
Clicking the position on the right will jump to the code debugging options
As long as the browser is installed, you can write js code through Notepad. But to make js run, you must embed js into the html file
When the browser opens the html file, you can execute the js script.
Press F12 in the browser to bring up the debugging environment. You can put breakpoints on the source code, single-step debugging, and view the output. As shown below.
Debug the code on edge, as shown below
Using Visual Studio Code is lightweight, and combined with Node.js development, you don’t need to call the browser to debug the code.
Different from browsers, js files can be run independently without being embedded in html, and can be loaded and run through Node.js.
Visual Studio Code download: https://code.visualstudio.com/
Node.js download: https://nodejs.org/en/
After installation, open the specified Folder, as shown in the figure below
Select LF as the encoding format, consistent with Linux, as shown in the figure below
After installing Node.js, configure the Visual Studio Code environment to debug js code. As shown below.
Controlling the configuration of the debugging code is controlled by the file launch.json. You can configure debugging options in adding configuration options. The launch.json file is placed in the .vscode folder of the project directory, as shown in the figure below.
The editing interface can break points for debugging, and the output information can be seen in the debugging console. The variable bar allows you to observe js variables at all times. As shown below.
In Linux, JavaScript debugging is supported and nodejs needs to be installed
sudo apt-get install nodejs-legacy nodejs $ node -v v4.2.6
Execute JavaScript script
$ node Jsmain.js string A 3 3.14159 [ 'zx', 6.626e-34, 'B', 8 ] { siindex: 1, strname: 'ZX Test', sinum: 2.71828, functest: [Function: stfunc] }
The js file is saved in utf-8 mode, otherwise garbled characters will appear, as shown in the figure below.
Published Date | Revised Chapter | Author | |
---|---|---|---|
2018.05.01 | Writing draft | Zhong Xin | |
2018.05.05 | Add js variable definition | Zhong Xin | |
2018.05 .05 | Add js compilation environment | Zhong Xin | |
2018.05.11 | Add js Function | Zhong Xin | |
2018.05.14 | Add destructuring assignment | Zhong Xin | |
2018.05.19 | Add function definition and class definition | Zhong Xin | |
2018.05.27 | Add class definition | Zhong Xin | |
2018.06 .09 | Add time definition | Zhong Xin |
The above is the detailed content of Solve the JavaScript runtime environment. For more information, please follow other related articles on the PHP Chinese website!