使用 vscode 调试前端代码

    今天我们以webpack项目为基础讲解配置
复制代码

1. 安装插件 Debugger for Chrome

2. 修改 config/index.js

将devtool: 'cheap-module-eval-source-map' 修改为 devtool: 'source-map'
将 cacheBusting: true 修改为 cacheBusting: false
复制代码

3. 点击调试上面的小齿轮，选择Chrome，自动生成配置文件。修改配置文件为：

{// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Chrome 调试","url": "http://localhost:8080",  // 根据自己情况配置"webRoot": "${workspaceFolder}/src","breakOnLoad": false,"sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*"}}]
}
复制代码

4. 设置断点，点击DUGEG开始调试。

使用 vscode 调试前端代码相关推荐

Google浏览器调试前端代码
我们在开发web程序时难免要自己编写前端的代码,而前端代码又涉及到很多细节,时不时就会犯下某个小错误,然后特别不好发现错误,使得网页经常显示不出来.此时就体现出调试的重要性.下面我将结合图片为大家讲 ...
如何用vscode调试ts代码
如何用vscode调试ts代码准备工作:ts下载好,vscode下载好,node下载好,npm包安装好打开vscode,在拓展商店搜索"Code Runner",下载好, 编辑 ...
mac vscode 运行html,【转载】Mac平台上用VSCode调试C++代码
[转载]Mac平台上用VSCode调试C++代码 [转载]Mac平台上用VSCode调试C++代码
VScode调试C++代码时无法查看STL容器(string、vector等）
如下图所示:用VScode调试C++代码时,无法显示我们想要的值. 解决方法:编辑launch.json,加入如下设置: "setupCommands": [{"desc ...
利用vscode调试vue代码
利用vscode调试代码,实测非常好用注意:现在只支持vue2.x. 1.配置launch.json {// 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述.// 欲 ...
使用Vscode调试vue代码
如何在 VS Code 中调试浏览器中运行的通过 Vue CLI 生成的 Vue.js 应用程序官网解释先决条件安装了 VS Code 安装扩展 Debugger for Chrome Debug ...
如何使用VScode调试JS代码
首先准备一个test文件夹,文件夹中有test.html文件下载vscode之后,把test文件夹在vscode编辑器中打开,最左侧的菜单选项里会有一个调试的图标,点击[运行和调试]选择[chrom ...
vscode 调试_如何使用VSCode调试JS？
更多精彩,请点击上方蓝字关注我们! 序言做前端开发的朋友经常需要使用Visual Studio Code编辑代码,很多朋友就想在VSCode调试JS代码,下面我们就介绍下如何配置操作. 一.环境准备 ...
使用VSCode调试JS
如何使用VSCode调试JS 序言插件安装修改配置文件序言作为前端开发的朋友经常需要使用VSCode编辑代码,很多朋友就想在VSCode调试JS代码,下面我们就介绍如何配置操作. 插件安装首 ...

使用 vscode 调试前端代码

使用 vscode 调试前端代码

1. 安装插件 Debugger for Chrome

2. 修改 config/index.js

3. 点击调试上面的小齿轮，选择Chrome，自动生成配置文件。修改配置文件为：

4. 设置断点，点击DUGEG开始调试。

使用 vscode 调试前端代码相关推荐

最新文章

热门文章