关于vscode断点调试

关于vscode断点调试很多人习惯在Chrome的调试窗口中调试Vue代码,或者直接使用console.log来观察变量值,这是非常痛苦的一件事,需要同时打开至少3个窗体。个人还是更加习惯于断点调试。这篇文章将介绍如何配置VisualStudioCode和Chrome来完成直接在VSCode断点调试代码,并且在VSCode的调试窗口看到Chrome中console相同的值。设置…

大家好,又见面了,我是你们的朋友全栈君。

很多人习惯在 Chrome 的调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体。个人还是更加习惯于断点调试。这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值。

设置 Chrome 远程调试端口

首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS Code 才能 attach 到 Chrome 上:

Windows

  • 右键点击 Chrome 的快捷方式图标,选择属性
  • 在目标一栏,最后加上–remote-debugging-port=9222 注意要用空格隔开

macOS

打开控制台执行:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome –remote-debugging-port=9222

Linux

打开控制台执行:

google-chrome –remote-debugging-port=9222

Visual Stuido Code 安装插件

点击 Visual Studio Code 左侧边栏的扩展按钮, 然后在搜索框输入Debugger for Chrome并安装插件,再输入,安装完成后点击 reload 重启 VS Code

添加 Visual Studio Code 配置

  • 点击 Visual Studio Code 左侧边栏的 调试 按钮, 在弹出的调试配置窗口中点击 设置 小齿轮, 然后选择 chrome, VS Code 将会在工作区根目录生成.vscode 目录,里面会有一个 lanch.json 文件并会自动打开
  • 用下面的配置文件覆盖自动生成的 lanch.json 文件内容。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
//…
“version”:
“0.2.0”,
“configurations”: [
{
“type”:
“chrome”,
“request”:
“launch”,
“name”:
“vuejs: chrome”,
“url”:
“http:192.168.1.210:8010”,
“webRoot”:
“${workspaceFolder}/src”,
“breakOnLoad”:
false,
“sourceMapPathOverrides”: {
“webpack:///src/*”:
“${webRoot}/*”
}
}
]
}

修改 webpack 的 sourcemap

如果你是基于 webpack 打包的 vue 项目, 可能会存在断点不匹配的问题, 还需要做些修改:

  • 打开根目录下的 config 目录下的 index.js 文件
  • 将dev 节点下的 devtool 值改为 ‘eval-source-map’
  • 将dev节点下的 cacheBusting 值改为 false

开始调试吧

一切具备了, 现在验收成果了

  • 通过第一步的方式以远程调试打开的方式打开 Chrome
  • 在 vue 项目中执行npm run dev以调试方式启动项目
  • 点击 VS Code 左侧边栏的调试按钮,选择 Attach to Chrome 并点击绿色开始按钮,正常情况下就会出现调试控制条。
  • 现在就可以在.vue文件的js代码中打断点进行调试了。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143683.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 35 个 Java 代码性能优化总结 10-20「建议收藏」

    35 个 Java 代码性能优化总结 10-20

  • Python生成exe文件的方法及步骤

    Python生成exe文件的方法及步骤为什么要生成可执行文件不需要安装对应的编程环境 可以将你的应用闭源 用户可以方便、快捷的直接使用打包工具pyinstaller安装pyinstaller如果你的网络稳定,通常直接使用下面的命令安装即可:pipinstallpyinstaller检查pyinstaller安装成功与否:只需要执行如下命令其中一个即可:pyinstaller-vpyi…

  • msm8953之spi配置

    msm8953之spi配置//===========================================spi5msm8953.dtsialiases{spi5=&spi_5;};spi_5:spi@7af5000{/*BLSP1QUP5*/compatible=”qcom,spi-qup-v2″;…

    2022年10月18日
  • bitcomet官方_Bitcomet

    bitcomet官方_Bitcometudp://mgtracker.org:2710/announcehttp://share.camoe.cn:8080/announceudp://11.rarbg.me:80/announcehttp://tracker.tfile.me/announcehttp://open.acgtracker.com:1096/announcehttp…

  • macpro录屏快捷键_mac屏幕录制设置

    macpro录屏快捷键_mac屏幕录制设置在视频内容越来越丰富的今天,录屏是我们经常会用到的一个功能,不管是录制一些无法下载的视频还是录制屏幕制作自己的视频,都需要用到录屏功能,本文中我们来推荐几款好用的Mac录屏软件Mac系统自带的录屏工具虽然我们可能天天都在使用Mac系统,但是可能很多人都不知道,其实Mac已经自带了一个好用的截图和录屏工具,你可以随时使用Command+Shift+5快捷键调出Mac自带的录屏功…

  • 新服务器部署完整流程

    新服务器部署完整流程配置服务器的登录一般不要把root用户给其他人使用,而是创建一个普通用户账号,例如我现在创建一个用户名叫做“laowang”的账号,并且配置它的登录密码。为了服务器的安全性,root用户登录配置成秘钥登录安装Docker对于CentOS6,可以使用EPEL库安装Docker,命令如下:$sudoyuminstallhttp://mirrors.yun-idc.com/…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号