資訊專欄INFORMATION COLUMN
摘要：平常開發(fā)的時候經(jīng)常性需要對某個組件進行單元測試。而提供了調(diào)試的程序的功能，就希望直接在源碼頁面上調(diào)試，這樣更加方便。優(yōu)化不過在處理過程中，發(fā)現(xiàn)斷點的地方往往與實際不相符，這是因為編譯后的源碼與實際源碼文件的行不一致造成的。
平常開發(fā)的時候,經(jīng)常性需要對某個組件進行單元測試。而VSCode提供了調(diào)試的node程序的功能，就希望直接在源碼頁面上調(diào)試，這樣更加方便。
啟用調(diào)試點擊Debug的標簽，如下圖：
在打開的lanuch.json文件復制以下內(nèi)容：
{
"version": "0.2.0",
"configurations": [
{
"name": "Run mocha",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
"stopOnEntry": false,
"args": [
"--no-timeouts",
"--require",
"./testHelper.js",
"--compilers",
"js:babel-core/register",
"--recursive"
],
"cwd": "${workspaceRoot}/",
"runtimeExecutable": null,
"env": {
"NODE_ENV": "testing"
}
}
]
}
在根目錄下創(chuàng)建 testHelper.js和registerBabel.js兩個文件：
testHelper.js:
require("./registerBabel");
registerBabel.js:
require("babel-core/register")({
// babel options
// ...
// 在這里可以處理某些特殊的需要，比如對`node_moduels`下某個組件啟用babel解析等等
});
抽離這兩個文件是為了讓正式程序也直接可以調(diào)用registerBabel.js文件。
當然要記得安裝babel-core
npm i babel-core -D
然后再你想打斷點的位置 打上斷點，點擊run 就可以了、。
優(yōu)化不過在處理過程中，發(fā)現(xiàn)斷點的地方往往與實際不相符，這是因為編譯后的源碼與實際源碼文件的行不一致造成的。只需要在.babelrc文件內(nèi)加上一個屬性即可：
{
"retainLines": true
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109235.html
摘要：這里我們可以嘗試運行一下命令嘗試能否構(gòu)建成功，成功的情況下在目錄下會生成的文件。在添加調(diào)試代碼打開調(diào)試面板在下拉選項中選擇添加配置或者直接創(chuàng)建并打開文件使用了解相關(guān)屬性。 webpack 作為目前主流的構(gòu)建工具，其較快的版本迭代和復雜的配置方式，使得每次開發(fā)前不得不規(guī)劃相當部分時間來調(diào)試。這里將記錄整個環(huán)境的搭建過程，為新手提供基礎思路。 就像我在開發(fā)vue-sitemap時一樣，構(gòu)建...
摘要：最近在使用調(diào)試寫的遇到一個問題，文件中了某個寫的文件代碼，跑的時候回報錯說無法找到。解決方式是在參數(shù)中加入 最近在使用VScode 調(diào)試 mocha 寫的 UT, 遇到一個問題，executor.js文件中require了某個ts寫的文件代碼，跑ut的時候回報錯說無法找到。 解決方式是在參數(shù)中加入 -r,ts-node/register { type: ...
摘要：一個帶提示的最后對于開發(fā)同學來說，就算不使用，也強烈建議使用提供注解，它會通過一些類型推導來檢查你的代碼的正確性，可以減少很多開發(fā)過程中的。相對于對象，它保證了輸入的類型你定義的對象可能某一天不再只有類型的，不再需要額外的類型判斷。 作者：陳達孚 香港中文大學研究生,《移動Web前端高效開發(fā)實戰(zhàn)》作者之一，《前端開發(fā)者指南2017》譯者之一，在中國前端開發(fā)者大會,中生代技術(shù)大會等技術(shù)...
摘要：本次給大家?guī)淼姆窒硎顷P(guān)于插件的一些經(jīng)驗，分享的內(nèi)容是我寫的一個插件。為了解決上面這個問題，我開發(fā)了這個插件。 本次給大家?guī)淼姆窒硎顷P(guān)于VS Code插件的一些經(jīng)驗，分享的內(nèi)容是我寫的一個插件：view-readme。 開發(fā)背景 在本地安裝好所有npm包后，有的時候想看看某個模塊的文檔，了解其特性以及如何使用。于是打開node_modules文件夾，大家都知道，這個文件夾里面的文件是...
摘要：名稱功能自動閉合標簽自動提示修改標簽時，自動修改匹配的標簽格式化編寫更加人性化的注釋添加行書簽的瀏覽器兼容性檢查運行選中代碼段支持大量語言，包括單詞拼寫檢查在中彈出瀏覽器并搜索，可編輯搜索引擎顏色值在代碼中高亮顯示小窗口顯示顏色值，等等拾色 名稱 功能 Auto Close Tag 自動閉合HTML標簽 Auto Import...
閱讀 2109·2021-11-23 09:51
閱讀 2847·2021-11-22 15:35
閱讀 2947·2019-08-30 15:53
閱讀 1046·2019-08-30 14:04
閱讀 3284·2019-08-29 12:39
閱讀 1816·2019-08-28 17:57
閱讀 1104·2019-08-26 13:39
閱讀 560·2019-08-26 13:34
