Home > Article > Development Tools > How to debug html with vscode
How to debug html with vscode?
Use Debugger for Chrome for debugging
First download the corresponding plug-in
Ctrl Shift x to open the plug-in store, search chrome to see the plug-in, click to install ->Just reload
There are two configuration methods for this plug-in, one is debugging based on local files, and the other is debugging based on server-client mode.
Local file debugging starts chrome to read local files, and then directly renders the page based on the file
server-client loads the file to be debugged into the service container (such as tomcat and the like) ), all documents are provided as a service.
Chrome accesses the file based on the url address of the service and then loads it into the browser.
Related recommendations: "vscode tutorial"
The two configuration methods are introduced below
1.1.1. Debugging based on local file configuration
Create a new launch.json file under the .vscode folder and add the configuration as follows
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome 本地调试", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "file": "${file}" } ] }
Configuration explanation:
${file} means opening the current file
${workspaceRoot} represents the current loading root directory of vscode
launch represents a new chrome process to load the file
Attach relative to launch, indicating that the current file is loaded into the existing chrome process
Select the [Launch Chrome local debugging] option in the debugging menu bar, click [f5] or [fn f5], you can see the page
You can see it Above the url search bar is an address starting with file:///, which indicates that the file is read locally. After that, all
html files can be debugged like this
1.1.2. Debugging based on server configuration
1.1.2.1. Start the server
Based on the server-client method, the file must be loaded into the server container first. Tomcat is not used here, but the
python method is used.
In the bash terminal, cd into the root directory of vscode, for example, mine is ~/daily, run the following command
cd ~/daily
# Load files in the current directory Enter the container, the external port is 8080, host is the local ip, and localhost can be used for local access
python3 -m http.server 8080
1.1.2.2. Configure vscode
Add the following configuration information to the launch.json file,
{ "type": "chrome", "request": "launch", "name": "Launch Chrome from http", "url": "http://localhost:8080/${relativeFile}", "webRoot": "${workspaceFolder}" },
${workspaceFolder} represents the path relative to the root directory
Then select [Launch Chrome from http], click [f5] or [fn f5] You can see that chrome has loaded the file. At the same time, we can also see from the address in the search bar that chrome uses the http protocol to access files this time
1.2. Debugging using Nodejs
Debugging using Nodejs The configuration method is basically the same as chrome, but the type is changed, as follows
{ "type": "node", "request": "launch", "name": "Node Launch Program", "program": "${workspaceFolder}/${relativeFile}" },
Select [Node Launch Program] in the debugger menu bar, and then click [f5], the debugging information will be displayed below
On the debugging console, screenshots will not be taken.
If nodeJs is not installed, you can run the following command on a debian computer.
apt install nodejs npm
Generally, using apt to install may cause the version to be lagging behind. You can Use source code installation, official installation manager or configure ppa.
I choose to configure ppa, using the LTS version of 10.x
$ cat /etc/apt/sources.list.d/nodesource.list deb https://deb.nodesource.com/node_10.x sid main deb-src https://deb.nodesource.com/node_10.x sid main
The above is the detailed content of How to debug html with vscode. For more information, please follow other related articles on the PHP Chinese website!