# 在 vscode 中直接瀏覽並 debug 網站

會用到兩個 vscode 的套件，雖然這兩個都已經被貼上了棄用的標籤，但他們仍然還是很實用！

> 目錄
> [toc]

---

## Browser Preview

### 安裝擴充套件
可以直接在 vscode 裡的 `延伸模組 (Extension)` 功能裡直接搜尋 `Browser Preview`，
也可以直接到商店的頁面按安裝：[點我](https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview)

照理說安裝好之後，左邊的功能列會多出 Browser Preview 的 icon


### 設定
在這個延伸模組上按右鍵 > [擴充設定]

接這就會看到這些設定：


稍微解釋一下設定

#### `Chrome Executable`
應該預設值是空的，
不用設定基本上也不影響使用，但我還是喜歡設定一下。

#### Format
這一項是畫面顯示的圖像模式，預設值是 `jpeg`，你也可以改成 `png`。
他們決定性的差異就是 `jpeg` 有經過壓縮，`png` 則是沒有，
當然有壓縮過的畫質可能看起來會比較不好一點，但是效能上考慮的話，
vscode 會跑的比較不卡。

#### Start Url
每次打開 Browser Preview 之後的預設網址，
我通常會習慣設定成 dev server 的網址。

 
## Debugger for Chrome

### 安裝擴充套件
可以直接在 vscode 裡的 `延伸模組 (Extension)` 功能裡直接搜尋 `Debugger for Chrome`，
也可以直接到商店的頁面按安裝：[點我](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

 
## 在 vscode 中 debug

前面兩個都安裝好設定好之後，先按左邊的列表把 Browser Preview 打開

接著再到按下左邊列表的 Debug 功能


按下 **`建立 launch.json 檔案`** 之後，他會問你要 debug 哪個功能，
這時候選擇 Browser Preview


選好之後就會發現他在你的專案根目錄中建立 .vscode 資料夾，
裡面有一個 launch.json，而內容如下：

{
    // 使用 IntelliSense 以得知可用的屬性。
    // 暫留以檢視現有屬性的描述。
    // 如需詳細資訊，請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "browser-preview",
            "name": "Browser Preview: Attach",
            "request": "attach"
        },
        {
            "type": "browser-preview",
            "request": "launch",
            "name": "Browser Preview: Launch",
            "url": "http://localhost:3000"
        }
    ]
}

之後要開始 debug 只要按下上面的按鈕


你就可以在 **`偵錯主控台`** 看到 console 裡的內容囉！