Some records of getting started with front-end debugging

1. vscode

I originally wanted to use eclipse, but the eclipse js plug-in is too unfriendly to debugging, so I tried to use vscode. Although it did not meet the ideal requirements, it can still be used. After downloading, it can be installed by default.

To debug the front end, you must first install a Debugger for Chrome, as shown below

2. Local engineering

Open Baidu in the browser, save the webpage as select all, there will be an html file and a folder, put these 2 in the same folder, and then open it with vscode, it looks

like this, 3 from top to bottom on the left The two areas are the opened file, the project directory and the outline view of the file being edited

3. Single step debugging

The default configuration is like this. After

running, there will be an error.

This is caused by the browser not being found. You can specify the browser path through runtimeExecutable, and file to specify the local page to be opened. For example, I set the 360 ​​browser.

        "type": "chrome",
        "request": "launch",
        "name": "360 test",
        "file": "${workspaceFolder}/百度一下，你就知道.html",
        "runtimeExecutable": "C:\\Users\\Administrator\\AppData\\Roaming\\360se6\\Application\\360se.exe",
        "sourceMaps": true

Next, you can set breakpoints for single-step debugging, not much else, pay attention to a few areas in the screenshots

4. Online Engineering

The previous article compiled the source code of fossil, and fossil uses the front-end as the ui, just based on this project to learn the online debugging of the front-end. The front-end source code of fossil is placed in the www folder directory, use vscode to open the directory, the debugging configuration file is as follows

"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}",
        "runtimeExecutable": "C:\\Users\\Administrator\\AppData\\Roaming\\360se6\\Application\\360se.exe"
    }
]

After running, the following page will be opened.

I wanted to set a breakpoint in vscode for debugging. What was embarrassing was that I could not find the source file for a while, because I found index.wiki in the source code and the browser requested it. The index.wiki file is different. Maybe the server has done some processing on the original file. Now you are not very familiar with the front-end. Please add it when you are familiar with the front-end interaction in the future.

5. The developer mode of the browser

Press F11 to enter the developer mode. The


focus is mainly on the construction and analysis of the relevant packages of the http request in the Network column. Others such as console (see logs, terminal), source (source code, debugging), search (search), etc. are also available Pay attention, don't go to other places, it's useless.