摘要:個人還是更加習(xí)慣于斷點調(diào)試。這篇文章將介紹如何配置和來完成直接在斷點調(diào)試代碼并且在的調(diào)試窗口看到中相同的值?,F(xiàn)在就可以在文件的代碼中打斷點進(jìn)行調(diào)試了。
很多人習(xí)慣在 Chrome 的調(diào)試窗口中調(diào)試 Vue 代碼, 或者直接使用 console.log 來觀察變量值, 這是非常痛苦的一件事,需要同時打開至少 3 個窗體。個人還是更加習(xí)慣于斷點調(diào)試。這篇文章將介紹如何配置 Visual Studio Code 和 Chrome 來完成直接在 VS Code 斷點調(diào)試代碼, 并且在VS Code的調(diào)試窗口看到Chrome中console相同的值。設(shè)置 Chrome 遠(yuǎn)程調(diào)試端口
首先我們需要在遠(yuǎn)程調(diào)試打開的狀態(tài)下啟動 Chrome, 這樣 VS Code 才能 attach 到 Chrome 上:
Windows右鍵點擊 Chrome 的快捷方式圖標(biāo),選擇屬性
在目標(biāo)一欄,最后加上--remote-debugging-port=9222 注意要用空格隔開
macOS
打開控制臺執(zhí)行:
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222Linux
打開控制臺執(zhí)行:
google-chrome --remote-debugging-port=9222Visual Stuido Code 安裝插件
點擊 Visual Studio Code 左側(cè)邊欄的擴(kuò)展按鈕, 然后在搜索框輸入Debugger for Chrome并安裝插件,再輸入,安裝完成后點擊 reload 重啟 VS Code
添加 Visual Studio Code 配置點擊 Visual Studio Code 左側(cè)邊欄的 調(diào)試 按鈕, 在彈出的調(diào)試配置窗口中點擊 設(shè)置 小齒輪, 然后選擇 chrome, VS Code 將會在工作區(qū)根目錄生成.vscode 目錄,里面會有一個 lanch.json 文件并會自動打開
用下面的配置文件覆蓋自動生成的 lanch.json 文件內(nèi)容。
{ // 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": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceRoot}/src", "url": "http://localhost:8080/#/", "sourceMaps": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] }修改 webpack 的 sourcemap
如果你是基于 webpack 打包的 vue 項目, 可能會存在斷點不匹配的問題, 還需要做些修改:
打開根目錄下的 config 目錄下的 index.js 文件
將dev 節(jié)點下的 devtool 值改為 "eval-source-map"
將dev節(jié)點下的 cacheBusting 值改為 false
開始調(diào)試吧一切具備了, 現(xiàn)在驗收成果了
通過第一步的方式以遠(yuǎn)程調(diào)試打開的方式打開 Chrome
在 vue 項目中執(zhí)行npm run dev以調(diào)試方式啟動項目
點擊 VS Code 左側(cè)邊欄的調(diào)試按鈕,選擇 Attach to Chrome 并點擊綠色開始按鈕,正常情況下就會出現(xiàn)調(diào)試控制條。
現(xiàn)在就可以在.vue文件的js代碼中打斷點進(jìn)行調(diào)試了。
前往我的技術(shù)小站 https://www.bbwho.com 查看更多博客。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/92931.html
摘要:在開發(fā)的過程中,幾乎不可能一次性就能寫出毫無破綻的程序,斷點調(diào)試代碼是一個普遍的需求。作為前端開發(fā)工程師,以往我們開發(fā)的程序都運(yùn)行在瀏覽器端,利用提供的開發(fā)者工具就可以方便的進(jìn)行源碼斷點調(diào)試。這幾個都是常見的斷點調(diào)試指令。 在開發(fā)的過程中,幾乎不可能一次性就能寫出毫無破綻的程序,斷點調(diào)試代碼是一個普遍的需求。 作為前端開發(fā)工程師,以往我們開發(fā)的JavaScript程序都運(yùn)行在瀏覽器端,...
摘要:更好的斷點控制啟用禁用重新啟用可以在調(diào)試視圖中的斷點區(qū)域設(shè)置。編輯器邊距中的斷點一般用紅色的實心圓表示。前端開發(fā)必備插件功能性插件匹配標(biāo)簽,關(guān)閉對應(yīng)的標(biāo)簽。這可以使得團(tuán)隊內(nèi)的書寫更為規(guī)范且具有一致性。 Visual Studio Code是個現(xiàn)下比較流行的編輯器,啟動非???,完全可以用來代替其他文本文件編輯工具。又可以用來做開發(fā),支持各種語言,相比其他IDE,輕量級完全可配置還集成Gi...
摘要:接下來的內(nèi)容將從以下幾方面進(jìn)行展開調(diào)試前端代碼調(diào)試通過啟動的服務(wù)器要使用的調(diào)試功能,首先就得配置文件。調(diào)試前端代碼通過調(diào)試前端代碼主要依賴于一個插件,該插件主要利用所開放出來的接口來實現(xiàn)對其渲染的頁面進(jìn)行調(diào)試。 本文最初發(fā)布于我的個人博客:咀嚼之味 Visual Studio Code (以下簡稱 vscode) 如今已經(jīng)代替 Sublime,成為前端工程師們最喜愛的代碼編輯器。它作為...
摘要:最近由于工作關(guān)系,開始寫程序,同事有用的,有用的。第一種適合及以上版本,因為在版本起,出現(xiàn)了文件,配置可以寫成用文件啟動程序,實測可以觸發(fā)斷點。 最近由于工作關(guān)系,開始寫flask web程序,同事有用Vim的,有用PyCharm的。在調(diào)研了一通python的編輯器,IDE之后,發(fā)現(xiàn)Visual Studio Code相對比較適合我。 VSC有相對較全的功能,比較好看舒服的主題,良好的...
摘要:和,這兩個配置文檔中說的是設(shè)置為。主要感慨就是,文檔一定要找到官方文檔,然后提高英語閱讀水平,隨后再加上多多嘗試即可。 本人微信公眾號:前端修煉之路,歡迎關(guān)注。 showImg(https://segmentfault.com/img/remote/1460000019475554?w=443&h=253); 這兩天有點時間,花時間學(xué)習(xí)了一下PHP基礎(chǔ)語法和語句。因為個人比較喜歡Vis...
閱讀 1065·2021-10-11 10:59
閱讀 3614·2021-09-26 09:55
閱讀 907·2019-08-30 15:55
閱讀 2663·2019-08-30 15:44
閱讀 445·2019-08-30 14:06
閱讀 691·2019-08-30 11:26
閱讀 3349·2019-08-30 10:49
閱讀 2506·2019-08-29 12:53