# Debug in VScode

我們常常會用瀏覽器提供的開發者工具來Debug，在程式碼裡面輸入console.log()，然後在瀏覽器按下F12選擇console來查看結果。


但如果只有單螢幕的話要把畫面切來切去Debug，這會非常麻煩，所以我們可以直接用VSCode提供的Debug功能。

先在VSCode安裝 **Live Server** 擴充套件


然後新增一個資料夾後，用VSCode打開，並在裡面新增兩個檔案，**index.html** 和 **app.js**


之後在VSCode按下左邊選單的 **Run and Debug**


點擊 **create a launch.json file** 然後選擇Chrome，成功後會出現以下畫面，並且在根目錄會出現 **.vscode**的資料夾


還記得我們剛剛安裝的擴充套件 **Live Server** 嗎？ 你應該不希望**每次存檔後都還要按下重新整理吧？**

我們先把**launch.json**檔案設定一下，將以下設定檔直接貼上就好。

==注意：url的部分是Live Server運作的port，如果port有改過的話記得不要照我的填，我的port是套件預設。==

***launch.json***

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:5500",
            "name": "Open index.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

改好以後，我們開啟**app.js**並在VSCode右下角按下 **Go Live**。


可以看到**Live Server**幫我們開啟了網頁，現在可以把這個網頁關閉。

之後回到**Run and Debug**按下左上角的**綠色開始鍵**，成功後會打開網頁，

並且在VSCode的**DEBUG CONSOLE**會看到我們的console


現在試著在app.js在輸入一條console，然後按下存檔~

成功的話你會看到以下畫面，因為有**Live Server**的關係，我們不需要手動將網頁重新整理！


還有很多Debug的功能，之後再介紹。