Shulou(Shulou.com)06/02 Report--

Editor to share with you how vscode debug html, I hope you have learned a lot after reading this article, let's discuss it together!

How does vscode debug html?

Debugging with Debugger for Chrome

First download the corresponding plug-in

Ctrl+Shift+x opens the plug-in store, and search chrome to see the plug-in. Click install-> reload.

The plug-in can be configured in two ways, one is debug based on local files, and the other is debugging based on server-client mode.

The local file debug starts chrome to read the local file, and then renders the page directly according to the file

Server-client loads the files to be debugged into the service container (such as tomcat), and all files are provided in the form of services.

Chrome accesses the file based on the url address of the service and then loads it into the browser.

The following are two ways to configure

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 local debugging", "url": "http://localhost:8080"," webRoot ":" ${workspaceFolder} "," file ":" ${file} "]}}

Configuration explanation:

${file} means to open the current file

${workspaceRoot} indicates that vscode is currently loading the root directory

Launch indicates that a new chrome process loads the file

Relative to the attach of launch, indicates that the current file is loaded into an existing chrome process

Select the "Launch Chrome Local debugging" option in the debugging menu bar, and click [f5] or [fn+f5] to see the page.

You can see the address at the beginning of file:/// on the url search bar, indicating that the file was read locally. After that, all of them

Html files can be debugged like this

1.1.2. Debugging based on server configuration

1.1.2.1. Start the server side

Naturally, based on the server-client approach, you have to load the file into the server container first. Instead of using tomcat, you will

The python way.

On the bash terminal, cd goes to the root directory of vscode, for example, mine is ~ / daily, run the following instructions

Cd ~ / daily

# Files under the current directory are loaded into the container. The external port is 8080 ip. Local access can be done using localhost.

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} indicates the path relative to the root directory

Then select [Launch Chrome from http] and click [f5] or [fn+f5] to see that chrome has loaded the file. At the same time, we can see from the address of the search bar that chrome is using the files accessed by http protocol.

1.2. Debug using Nodejs

The configuration of debugging using Nodejs is basically the same as that of chrome, except that it is modified by type, as follows

{"type": "node", "request": "launch", "name": "Node Launch Program", "program": "${workspaceFolder} / ${relativeFile}"}

Select [Node Launch Program] in the debugger menu bar, then click [f5], and the debugging information will be displayed below.

On the debugging console, there is no screenshot.

If nodeJs is not installed, debian computers can run the following instructions

Apt install nodejs npm

General use of apt installation may lead to a backward version, you can use the source installation, the official installation manager, or configure ppa.

I choose to configure ppa, using the 10.x LTS version

Cat / etc/apt/sources.list.d/nodesource.list deb https://deb.nodesource.com/node_10.x sid maindeb-src https://deb.nodesource.com/node_10.x sid main has finished reading this article. I believe you have some understanding of how vscode debugs html. You want to know more about it. Welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.