前端調試入門的一些記錄

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（搜尋）等也可以關注下，其他地方就不要去看了，沒什麼用。