前端调试入门的一些记录

1. vscode

本来想使用eclipse的，但是eclipse的js插件对调试太不友好了，于是尝试用vscode，虽然没达到理想中的要求，但还可以凑合着用，下载后默认安装即可。

调试前端，要先装一个之Debugger for Chrome，如下图

2. 本地工程

浏览器打开百度，网页另存为选全部，会有一个html文件和一个文件夹，把这2个放在同一个文件夹里，然后用vscode打开

打开后是这样的，左边从上到下的3个区域分别是，已打开的文件，工程目录和正在编辑文件的大纲视图

3. 单步调试

默认配置是这样的

运行后会出错

这是找不到浏览器导致的，可以自己通过runtimeExecutable指定浏览器路径，file指定要打开的本地页面，比如我设的是360浏览器

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

接下来就可以设断点单步调试了，其他不多说了，关注下截图的几个区域

4. 在线工程

之前的文章编译了fossil的源码，而fossil是以前端作为ui，正好基于这个工程来学习下前端的在线调试。fossil的前端源码放在www文件夹目录下，使用vscode打开该目录，调试配置文件如下

"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"
    }
]
           

运行后会打开如下页面

本来想在vscode里设断点调试一下，尴尬的是我发现自己竟然一时半会找不到源文件在哪里，因为我发现源码里的index.wiki和浏览器请求获取的index.wiki文件不一样，可能服务端对原始文件做了一些处理，现在对前端还不是很熟悉，等以后对前后端交互熟悉了之后再补充吧

5. 浏览器的开发者模式

按F11进入开发者模式

关注点主要在Network栏里的http请求的相关包的构造和解析上，其他如console（看日志，终端）、source（源代码，调试）、search（搜索）等也可以关注下，其他地方就不要去看了，没什么用。