當時的想法是xxx.vue 代碼里面是否打斷點,或者在閱讀源時,看了解某一變量的值,或者方法是否被調用
參考了 vscode中斷點調試vue 但實際實踐,還是有不少具體情況要注意
1. VSCode(1.43)安裝Debugger for Chrom插件后之后(重啟),左側有一個"蟲子"的按鈕圖標,說明這個插件被安裝成功了.點擊后, 發現實際界面和文章里有差異, 搞了半天不知道到哪里設置launch.json, 這個坑蠻大的. 但VS彈出一些提示, 摸着腦袋嘗試. 突然可以設置launch.json, 界面也和參考文章基本接近.
第11行,改成自己的要調試的Vue項目端口
2.按F5進入調試模式,調試時會另起一個瀏覽器,在這個瀏覽器中的操作會觸發斷點,這個點務必注意. 調試斷點最好在調試前打好, 調試中所打到斷點在我實踐的時,發現沒效果.
如果斷點時灰的,別忘記啟用斷點(上圖)
調試效果圖(上圖)