3. 開啟網頁
0020 以右鍵 Open with code 開啟 C:\work\debug\page1.html
你可以看到左方區塊 EXPLORER 下方提示 You have not yet opend a folder.
按下 Open Folder, 選擇資料夾 = C:\work\debug\
畫面會變成如下:
4. 下載 extension
A. Dubugger for Chrome v 4.12.1
B. Debugger for Edge v 1.0.12
以上2個 debugger 看要用哪一個除錯都可以.
C. Live Server
Launch a development local Server with live reload feature for static & dynamic pages
必須靠這個啟動你的網頁.
5. 以 Live server 啟動網頁
在 Explorer 區塊中, 選擇 DEBUG 下的清單項目= page1.html 後, 按右鍵 Open with Live Server
會啟動 Edge 瀏覽器顯示 page1.html 的執行畫面, 例如: 2020-BrowseBegin.jpg
在 page1.html 執行畫面中, 按下 append 按鍵, 可看到javascript 的執行結果 如 2030-PressButton.jpg
我們可以看到 在 Live Server 中執行的網頁 URL = http://127.0.0.1:5500/page1.html
將這個網址記下來, 後面會用到.
6. 設定 中斷點.
3010-SetBreakPoint.jpg
如果不能設定 Break Point, 則可能是沒有開啟 Break Point 功能.
可按左下方的 Manage 按鍵, 選擇 Settings
找到 User.Featurs.Debug.Allow Breakpoints Everywhere.Allow setting breakpoints in any file. 開啟後, 應該就可以設定中斷點.
3020-AllowSettingBreakpointsInAnyFile.jpg
4 Add Configuration
選擇左方 DEBUG後, 在上方DEBUG 區塊的下拉選單中選擇 Add Configuration 後,
再選擇 Select Environment = Edge
畫面會變更為
4030-LaunchEdgeForLocalHost.jpg
左方多出一個檔案 = 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": "edge",
"request": "launch",
"name": "對 localhost 啟動 Edge",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
將
"url": "http://localhost:8080",
改為
"url": "http://127.0.0.1:5500/page1.html",
後存檔
現在在 DEBUG 上方 新增出來的(對 localhost 啟動 Edge)項目左方, 按下除錯按鍵.
page1.html 網頁會重新顯示在 Edge 瀏覽器中, 在按下網頁中 append 按鍵
重新到 EXPLORER 中, 在 Debug清單中的 page1.html 按右鍵啟動 Open with live server
這次在 page1.html 網頁中, 按下append1 按鍵,
就可以看到網頁執行到中斷點停止了.
此時, 你可以使用左方的 Local/Global variables, CALL STACK, LOADED SCRIPTS,
或是上方的 Continue (F5)/Step Over (F10)/Step Into (F11)/Step Out (Shift+F11)/Stop (Shift+F5)