深入講解VsCode各場景高級調(diào)試與使用技巧 代碼編寫效率提升2倍
我要評論{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true,
"pathMapping": {
"/_karma_jpgack_": "${workspaceFolder}"
},
"sourceMapPathOverrides": {
"jpgack:/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
},
"preLaunchTask": "serve"
}
]
}
復(fù)制代碼添加任務(wù)腳本
{
"version": "2.0.0",
"tasks": [
{
"label": "serve",
"type": "npm",
"script": "serve",
"isBackground": true,
"problemMatcher": [
{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
復(fù)制代碼該腳本的作用是運行npm run serve編譯命令。
按F5啟動調(diào)試即可
注意：此方式的主要點在于launch.json配置文件中，通過preLaunchTask字段指定調(diào)試前先運行一個任務(wù)腳本，preLaunchTask的值對應(yīng)tasks.json文件中的label值。
借助vscode插件Debugger for Chrome在Chrome中調(diào)試
- 第一步還是初始化vue項目，添加
vue.config.js文件配置，指定要生成sourceMaps資源
module.exports = {
configureWebpack: {
// 生成sourceMaps
devtool: "source-map"
}
};
復(fù)制代碼- vscode中擴展中安裝
Debugger for Chrome插件，并確保沒有禁用插件
- 手動啟動項目的運行, 此方式不需要配置
tasks.json任務(wù)
# 終端執(zhí)行命令，啟動項目 npm run serve 復(fù)制代碼
按F5啟動調(diào)試即可
借助vscode插件Debugger for Firfox在Firefox中調(diào)試
- 和
Debugger for Chrome基本一樣，區(qū)別在于安裝Debugger for Firfox插件，并在launch.json配置中，增加調(diào)試Firefox的配置即可，配置如下
{
"version": "0.2.0",
"configurations": [
// 省略Chrome的配置...
// 下面添加的Firefox的配置
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "jpgack:///src/", "path": "${webRoot}/" }]
}
]
}
復(fù)制代碼- 調(diào)試時選擇對應(yīng)的調(diào)試命令即可
Firefox初始啟動時不會觸發(fā)調(diào)試，需要刷新一次
調(diào)試Electron項目
Electron很多人都使用過，主要用于開發(fā)跨平臺的系統(tǒng)桌面應(yīng)用。那么來看下vue-cli-electron-builder創(chuàng)建的Electron項目怎么調(diào)試。步驟如下：
- 在初始化項目后，首先修改
vue.config.js文件配置，增加sourceMaps配置：
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
復(fù)制代碼- 創(chuàng)建調(diào)試配置
.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Electron: Main",
"type": "node",
"request": "launch",
"protocol": "inspector",
"preLaunchTask": "bootstarp-service",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"args": ["--remote-debugging-port=9223", "./dist_electron"],
"outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
},
{
"name": "Electron: Renderer",
"type": "chrome",
"request": "attach",
"port": 9223,
"urlFilter": "http://localhost:*",
"timeout": 0,
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"jpgack:///./src/*": "${webRoot}/*"
}
},
],
"compounds": [
{
"name": "Electron: All",
"configurations": ["Electron: Main", "Electron: Renderer"]
}
]
}
復(fù)制代碼此處配置了兩個調(diào)試命令: Electron: Main用于調(diào)試主進程，Electron: Renderer用于調(diào)試渲染進程；compounds[].選項用于定義復(fù)合調(diào)試選項; configurations定義的復(fù)合命令是并行的; preLaunchTask用于配置命令執(zhí)行前先執(zhí)行的任務(wù)腳本，其值對應(yīng)tasks.json中的label字段; preLaunchTask用在compounds時，用于定義configurations復(fù)合任務(wù)執(zhí)行前先執(zhí)行的腳本。
- 創(chuàng)建任務(wù)腳本
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "bootstarp-service",
"type": "process",
"command": "./node_modules/.bin/vue-cli-service",
"windows": {
"command": "./node_modules/.bin/vue-cli-service.cmd",
"options": {
"env": {
"VUE_APP_ENV": "dev",
"VUE_APP_TYPE": "local"
}
}
},
"isBackground": true,
"args": [
"electron:serve", "--debug"
],
"problemMatcher": {
"owner": "custom",
"pattern": {
"regexp": ""
},
"background": {
"beginsPattern": "Starting development server\\.\\.\\.",
"endsPattern": "Not launching electron as debug argument was passed\\."
}
}
}
]
}
復(fù)制代碼- 啟動調(diào)試
在主進程相關(guān)代碼上打上斷點，然后啟動調(diào)試主進程命令就可以調(diào)試主進程了
注意，這里的options參數(shù)是根據(jù)實際的情況，自定義添加我們運行項目時所需要的參數(shù)，比如我這里因為啟動項目的npm命令是:
"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve" 復(fù)制代碼
- 主進程調(diào)試成功
- 開始調(diào)試渲染進程
切換到渲染進程的調(diào)試選項，在渲染進程的代碼處打上斷點，點擊調(diào)試。注意，此時并不會有斷點終端，需要ctrl+r手動刷新軟件進程才會看到渲染進程的斷點。
刷新渲染進程后的效果，如下圖，已經(jīng)進入了斷點
另一種方式
同時開啟渲染進程和主進程的調(diào)試，只需要切換到調(diào)試全部的選項即可。注意，此種方式因為compounds[].configurations配置是并行執(zhí)行的，并不一定能保證渲染進程調(diào)試一定能附加到主進程調(diào)試成功(估計是時機問題)，有些時候會調(diào)試渲染進程不成功。所以，可以采取上面的方式進行調(diào)試。
其他技巧
技巧一：代碼片段(snippets)
從擴展商店中安裝snippets
@category:"snippets" 復(fù)制代碼
創(chuàng)建全局代碼片段
- 選擇
文件 -> 首選項 -> 用戶片段 - 選擇
新建全局代碼片段文件
相關(guān)文章
VS Code怎么設(shè)置分支排序順序? 按提交人日期分支排序的技巧
VS Code怎么設(shè)置分支排序順序？VS Code中想要控制分支的排序順序，在哪來設(shè)置呢？下面我們就來看看VSCode按提交人日期分支排序的技巧2023-08-19VSCode的autopep8插件無法自動格式化含中文的utf-8編碼文件錯誤的解決
配置autopep8插件并安裝相關(guān)依賴后，VSCode無法自動格式化含有中文的代碼文件，這里就為大家分享一下解決方法2023-09-24VSCode選項卡上的擴展怎么關(guān)閉出發(fā)? vscode不顯示觸發(fā)選項卡上的擴展技
VSCode選項卡上的擴展怎么關(guān)閉出發(fā)？VSCode選項卡中可以出發(fā)擴展，也可以關(guān)閉觸發(fā)，該怎么操作呢？下面我們就來看看vscode不顯示觸發(fā)選項卡上的擴展技巧2023-10-07vscode怎么關(guān)閉啟用預(yù)覽? VSCode取消右側(cè)預(yù)覽面板的技巧
vscode怎么關(guān)閉啟用預(yù)覽？vscode中可以預(yù)覽，該怎么開啟或者關(guān)閉預(yù)覽面板呢？下面我們就來看看VSCode取消右側(cè)預(yù)覽面板的技巧2023-10-16VSCode合并運行按鈕怎么關(guān)閉? VSCode關(guān)閉一鍵運行的技巧
VSCode合并運行按鈕怎么關(guān)閉？雖然合并運行很方便但是有時候用不到，想要關(guān)閉，該怎么操作呢？下面我們就來看看VSCode關(guān)閉一鍵運行的技巧2025-04-03VS Code怎么取消自動簽名? VSCode關(guān)閉總是簽字的技巧
VS Code怎么關(guān)閉自動簽名？VSCode中可以自動簽名，現(xiàn)在想要關(guān)閉自動簽字，該怎么操作呢？下面我們就來看看VSCode關(guān)閉總是簽字的技巧2023-10-16VS Code怎么開啟緊湊視圖? VSCode設(shè)置緊密檢視的技巧
VS Code怎么開啟緊湊視圖？VS Code中可以設(shè)置視圖樣式，該怎么使用緊湊樣式呢？下面我們就來看看VSCode設(shè)置緊密檢視的技巧2023-10-16- VS Code單元焦點指示器槽怎么設(shè)置？VS Code中想要設(shè)置單元焦點指示器槽的位置上，該怎么設(shè)置呢？詳細請看下文介紹2023-10-16
VSCode怎么設(shè)置不顯示空值? VSCode不顯示空值的設(shè)置技巧
VSCode怎么設(shè)置不顯示空值？VSCode中的空值也會顯示，想要不顯示空值，該怎么操作呢？下面我們就來看看Visual Studio Code設(shè)置不顯示空值的方法2023-11-27VSCode導(dǎo)航欄怎么顯示函數(shù)? VSCode設(shè)置顯示函數(shù)的方法
VSCode導(dǎo)航欄怎么顯示函數(shù)？VSCode中的函數(shù)很常用，想要顯示在導(dǎo)航欄，該怎么操作呢？下面我們就來看看VSCode設(shè)置顯示函數(shù)的方法2023-11-27
