欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入講解VsCode各場(chǎng)景高級(jí)調(diào)試與使用技巧 代碼編寫效率提升2倍

csdn   發(fā)布時(shí)間：2023-12-22 12:01:52   作者：小明的學(xué)習(xí)圈子   我要評(píng)論
VSCode是一款開源免費(fèi)的跨平臺(tái)文本編輯器，它的可擴(kuò)展性和豐富的功能使得它成為了許多程序員的首選編輯器,在本文中，我將分享一些VSCode的使用技巧，幫助您更高效地使用它

補(bǔ)充知識(shí)點(diǎn)：每次調(diào)試時(shí)重新編譯

按上述的操作已經(jīng)生成了task.json配置文件

{
	"version": "2.0.0",
	"tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": "build",
      "label": "tsc: 構(gòu)建 - tsconfig.json"
    }
  ]
}
復(fù)制代碼


  • 點(diǎn)擊運(yùn)行 -> 添加配置 -> 選擇nodejs




  • 在生成的launch.json文件中，添加preLaunchTask字段，值是tasks.json的label值，一定要相同，注意大小寫。該字段的作用是在執(zhí)行命令前先執(zhí)行改task任務(wù)。




注意，如果編譯后的js文件不在相應(yīng)的位置，通過圖中的outFiles字段可以指定ts編譯后的js路徑。


  • 在index.ts文件中按F5啟動(dòng)調(diào)試，可以看到調(diào)試前已經(jīng)生成了編譯文件，而后就可以正常調(diào)試了。




補(bǔ)充知識(shí)點(diǎn)：VsCode的TS版本說明


vscode本身內(nèi)置了對(duì)ts的支持


vscode內(nèi)置的ts版本(即工作區(qū)版本)，僅僅用于IntelliSense(代碼提示)，工作區(qū)ts版本與用于編譯的ts版本無任何關(guān)系。


修改工作區(qū)ts版本的方法：


  • 在狀態(tài)欄選擇typescript的圖標(biāo)，選擇版本切換




  • 選擇你需要的版本即可






調(diào)試html項(xiàng)目


學(xué)會(huì)了上述ts的調(diào)試后，我們嘗試調(diào)試html文件，并且html文件中引入ts文件:


  • 創(chuàng)建html，引入ts編譯后的js文件


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3>Hello</h3>
  <script src="./out/index.js"></script>
</body>
</html>
復(fù)制代碼


  • ts源文件如下：


const num: number =  1221;
console.log(num);
function fn(arg: string): void {
  console.log('fn', arg);
}
document.body.append('World')
fn("he");
復(fù)制代碼




  • 打debug




  • launch.json啟動(dòng)命令配置


{
  // 使用 IntelliSense 了解相關(guān)屬性。 
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息，請(qǐng)?jiān)L問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "file:///E:/demo/vscode/debug/ts/index.html",
      "preLaunchTask": "tsc: 構(gòu)建 - tsconfig.json",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
復(fù)制代碼




  • 選擇我們的啟動(dòng)命令




  • 按F5可以正常喚起chrome瀏覽器，并在vscode的ts源碼處會(huì)有debug效果


調(diào)試Vue項(xiàng)目的兩種方式


下面介紹兩種調(diào)試vue2項(xiàng)目的3種方法，其他框架的調(diào)試也類似：


不使用vscode插件Debugger for chrome的方法


  • 初始化vue項(xiàng)目，配置vue.config.js，指定要生成sourceMaps資源


module.exports = {
  configureWebpack: {
    // 生成sourceMaps
    devtool: "source-map"
  }
};
復(fù)制代碼


  • 根目錄下創(chuàng)建./vscode/launch.json文件 或者選擇運(yùn)行 -> 添加配置 -> Chrome



						

						

						
						

					

					

						
						
					

					

						
					

					

					

						
相關(guān)文章

						
					

					

						
					

					
					

						
最新評(píng)論