資訊專欄INFORMATION COLUMN
摘要：前端不只是只能在瀏覽器調(diào)試，現(xiàn)在越來越多單頁(yè)面，在編輯器里面進(jìn)行調(diào)試將大大提高你的開發(fā)效率調(diào)試開發(fā)環(huán)境需要打開方便調(diào)試為根路徑在中配置為你啟動(dòng)項(xiàng)目的端口然后按就會(huì)啟動(dòng)一個(gè)的頁(yè)面在編輯器里就可以打斷點(diǎn)了調(diào)試環(huán)境下某個(gè)文件此為數(shù)組可以寫多個(gè)調(diào)
前端不只是只能在瀏覽器調(diào)試，現(xiàn)在越來越多單頁(yè)面，在編輯器里面進(jìn)行調(diào)試將大大提高你的開發(fā)效率~~
1、調(diào)試vue 開發(fā)環(huán)境需要打開 source-map 方便調(diào)試 workspaceRoot 為根路徑
在 launch.json 中配置
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8087", // 8087 為你啟動(dòng)vue項(xiàng)目的端口
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*"
}
},
]
}
然后按 F5 就會(huì)啟動(dòng)一個(gè)google 的頁(yè)面在編輯器里就可以打斷點(diǎn)了
2、調(diào)試 node 環(huán)境下某個(gè) js 文件
{
"version": "0.2.0",
"configurations": [
// 此為數(shù)組可以寫多個(gè)
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/build/creat.js"
},
]
}
3、調(diào)試 node 后臺(tái)項(xiàng)目 注意：自己寫node時(shí)候一般是 node ./bin/www 啟動(dòng)一個(gè)服務(wù)，調(diào)試時(shí)候不需要啟動(dòng)直接 按 F5 啟動(dòng)調(diào)試即可(會(huì)自動(dòng)啟動(dòng)服務(wù)) 否則會(huì)導(dǎo)致端口沖突調(diào)試失敗
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}inwww"
}
]
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/106548.html
摘要：支持，和三種環(huán)境，并且可以安裝擴(kuò)展插件，因而可以滿足絕大多數(shù)人的要求，安裝配置非本文所要講述的內(nèi)容，請(qǐng)自行查找，本文著重討論如何用更好的調(diào)試代碼，希望能對(duì)大家有所幫助。 2018.5.12更新 最近在用vscode 1.23版本的時(shí)候發(fā)現(xiàn)outDir不可以使用了，建議這么改吧，直接program采用編譯后的文件，然后打開sourceMaps，同時(shí)在babel編譯的時(shí)候自己搞--watc...
摘要：將這些命令綁定到鍵盤快捷鍵是有幫助的，例如向上箭頭用于平衡向外，而向下箭頭用于平衡向內(nèi)。是和的快速原型開發(fā)平臺(tái)。 本系列的第一篇可以在這里看到： 提高 JavaScript 開發(fā)效率的高級(jí) VSCode 擴(kuò)展！ showImg(https://segmentfault.com/img/bVbnn2j?w=1254&h=768); 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)...
摘要：軟件跨平臺(tái)支持以及，運(yùn)行流暢，可謂是微軟的良心之作微軟有這個(gè)宇宙最強(qiáng)，自然也不會(huì)弱宇宙最強(qiáng)編輯器說到代碼編輯器，我們有必要提一提還有。 原文鏈接：VS Code上手與超實(shí)用插件安利 工欲善其事必先利其器 Visual Studio Code (簡(jiǎn)稱 VS Code / VSC) 是一款免費(fèi)開源的現(xiàn)代化輕量級(jí)代碼編輯器，支持幾乎所有主流的開發(fā)語(yǔ)言的語(yǔ)法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號(hào)...
摘要：這里我們可以嘗試運(yùn)行一下命令嘗試能否構(gòu)建成功，成功的情況下在目錄下會(huì)生成的文件。在添加調(diào)試代碼打開調(diào)試面板在下拉選項(xiàng)中選擇添加配置或者直接創(chuàng)建并打開文件使用了解相關(guān)屬性。 webpack 作為目前主流的構(gòu)建工具，其較快的版本迭代和復(fù)雜的配置方式，使得每次開發(fā)前不得不規(guī)劃相當(dāng)部分時(shí)間來調(diào)試。這里將記錄整個(gè)環(huán)境的搭建過程，為新手提供基礎(chǔ)思路。 就像我在開發(fā)vue-sitemap時(shí)一樣，構(gòu)建...
摘要：摘要你所不知道的系列。允許你寫入縮寫代碼并返回的相應(yīng)標(biāo)記，目前已經(jīng)內(nèi)置，所以不用配置了。自從年雙十一正式上線，累計(jì)處理了億錯(cuò)誤事件，付費(fèi)客戶有金山軟件百姓網(wǎng)等眾多品牌企業(yè)。摘要： 你所不知道的系列。 原文：提高 JavaScript 開發(fā)效率的高級(jí) VSCode 擴(kuò)展之二！ 作者：前端小智 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 作為一名業(yè)余愛好者、專業(yè)人員，甚至是每月只有一次編...
閱讀 894·2021-09-03 10:42
閱讀 1511·2019-08-30 15:56
閱讀 1443·2019-08-29 17:27
閱讀 869·2019-08-29 15:25
閱讀 3155·2019-08-26 18:27
閱讀 2479·2019-08-26 13:41
閱讀 1888·2019-08-26 10:39
閱讀 1569·2019-08-23 18:36
