JavaScript 學習心得（VSCode）
===

###### tags: `JavaScript` `js` `VSCode` `Programming language` `程式語言`

---

安裝 Debugger for Chrome
點選左邊「執行」（ctrl + shift + D）
點選`建立 launch.json 檔案`
選擇環境`Chrome`
修改一下 launch.json 的設定

{
    // 使用 IntelliSense 以得知可用的屬性。
    // 暫留以檢視現有屬性的描述。
    // 如需詳細資訊，請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5500/20200520.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

url 資料欄位`http://localhost:8080 ` 改成 `http://localhost:5500`
意思是 port 由 8080 改成 5500（可能是裝 live server 的關係）
再來把`http://localhost:5500`後面加上 html頁面的檔案名稱
`http://localhost:5500/20200520.html` 裡面的 `20200520.html`
就是 html 檔案名稱
新增中斷點
按下執行「launch Chrome against localhost」
就能開始 Debug java script

PS.如果無法下中斷 記得開啟「允許在任何檔案中設定中斷點」（Debug:Allow Breakpoints Everywhere）
檔案->喜好設定->設定-> 搜尋「中斷」（Breakpoint） ->勾選「允許在任何檔案中設定中斷點」（Debug:Allow Breakpoints Everywhere）

## 參考資料
[在Vs code中使用debugger for chrome](https://www.jianshu.com/p/2242c82eda2d)

## 強烈推薦
[VSCode 必裝套件](https://hackmd.io/@sam-liaw/BJnLhni7U)
[Angular 學習心得](https://hackmd.io/@chiisen/SJLZQUph8)
[react 學習心得](https://hackmd.io/@chiisen/Sywk4upnI)
[Vue 學習心得](https://hackmd.io/@chiisen/Bk4_zwphU)

[jQuery-SlotMachine 使用筆記](https://hackmd.io/@chiisen/BydE8PmGw)