Vue 代碼除錯
- console
- debugger
- 瀏覽器除錯
- 推薦文章
初入職場，還是個前端小白，代碼寫不出來，師傅不在
小夢 vs 后端大兄弟：我運行了一個東西，一直出不來
后端大兄弟：我可以試一試斷點，看哪里出錯
······
后端大兄弟： 我好像不懂 如何打前端斷點，都被webpack 重新封裝過了
小夢：okok，是時候總結一番
Vue代碼如何進行除錯
console
作為小白，日常最常使用的就是
console.log輸出數值console.debug列印除錯資訊- 在推薦文章中 《你所不知道的 console》，
console.timeconsole.timeEnd進行時間計時 console.profile和console.profileEnd進行性能測驗
但需注意的地方
- 控制臺 console.log 無法實時列印出
參考型別的值console.log都會去截取快照，但是如果倆個修改參考型別的順序和時間十分的接近，這個console.log會顯示修改后的元素屬性- 列印時，
JSON.stringfyJSON.parse組合使用可輸出當前物件的值
debugger
debugger
const data = []
for (let id = 0; id < 1000; id++) {
data.push({
id,
value: faker.lorem.sentences() // 長文本
})
}
使用如上方法，可以出現除錯頁面，包含你關注的作用域（查看值）
但是會跳轉到 app.js 等很多無相關的頁面
瀏覽器除錯
1、 在瀏覽器中展示源代碼
打開 config/index.js并找到 devtool property，將其更新為：
如果你使用的是 Vue CLI 2，請設定并更新 config/index.js 內的 devtool property：
devtool: 'source-map',
如果你使用的是 Vue CLI 3，請設定并更新 vue.config.js內的 devtool property：
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
查看你的
Vue版本可從 控制臺中輸入vue -V查看
直接在瀏覽器中打開 Source 中的 webpack src 可查看源代碼，點擊代碼行數，可實作打斷點
各個按鈕詳解
resume/pause script execution恢復/暫停腳本執行step over next function call步過，將函式作為陳述句執行不展開step into next function call步入，進入函式執行背景關系step out of current function布出當前函式step執行下一步deactivate breakpoints使所有斷點暫時失效don‘t pause on exceptions出現例外不暫停
2、 如果你是從VS Code 啟動程式
點擊在 Activity Bar 里的 Debugger 圖示來到 Debug 視圖，然后點擊那個齒輪圖示來配置一個 launch.json 的檔案，選擇 Chrome/Firefox：Launch 環境，然后將生成的 launch.json 的內容替換成為相應的配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
}
- 根據瀏覽器自行選擇資料
- 如果是
chrome，請把type: chrome改為pwa-chrome，如果型別是chrome則需另外下載插件
- 如果是
推薦文章
你所不知道的 console
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301537.html
標籤：其他