关于vscode断点调试

很多人习惯在 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 文件内容。

{

//...

"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代码中打断点进行调试了。

关于vscode断点调试相关推荐

VScode断点调试出现unbound breakpoint（断点是灰色）问题
是否遇到过这样的情况,写代码做调试的时候发现断点是灰色的,在VScode里用不了断点调试. 如果你把当前目录移动到工作区最上面,然后进行调试,你会发现其实调试就正常了. 那么为什么呢? 因为Live ...
VSCode断点调试PHP
##今天突然要写一点PHP的小东西,多层次嵌套,逻辑有点复杂,之前一直都是打日志的方式来调试的,本来我们.Neter都是被VS惯坏了的人,于是就在VSCode里面来试试给PHP加上Debug 1 . ...
vscode+php+phpstudy：断点调试（f5后vscode无法继续下一步；浏览器无法断点，直接返回执行结果的解决方法）
文章目录前言 1.设置phpstudy 2.设置vscode 前言以前用的phpstorm断点调试,今天突然想用vscode断点调试,就是不能继续执行断点下一步,都是如下图所示看了诸多博客,步骤 ...
Vue中进行断点调试的两种方式(使用外部浏览器和VsCode的 Debug for Chrome插件)
场景在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点,然后逐步或者逐过程进行调试. 但是在Vue中如果想要进行调试时,如果是在js中调试的话,可以直接添加一个debug ...
PHP vscode+XDebug 远程断点调试服务器上的代码
对于简单的项目或仅仅想知道某一位置的某个变量是什么值,直接使用var_dump配置exit来打印和中断就可以了,方便又快捷, 而对于大型项目的调试,或想了解某个系统的整个运行过程,xdebug可能会是 ...
VScode+ROS(C++)代码断点调试实践笔记
VScode+ROS代码断点调试功能总结文档使用的是github上古月ROS入门21讲的learning_topic功能包一.配置好ROS环境,catkin_make编译好要调试的功能包(这些工作 ...
vscode之python框架flask 断点调试的配置（官方推荐的配置，务必注意端口）
flask的配置务必注意端口,默认端口5000如果被占用,你访问的数据无法返回,请更换端口! 更多细节配置,看官方文档,最权威:Debugging configurations for Python ...
VSCode远程Linux断点调试C++
由于手上有一台强大的Linux工作站,尽管在Windows下使用Visul Studio写C++十分舒服,但是考虑到以后很多工作都是在Linux下完成,所以需要配置C++的远程调试环境. 使用Remo ...
VSCode chrome断点调试遇到的坑
当我以为简单配置就可以实现断点调试时候, 意外的坑出现了: chrome弹出页面显示about:blank 然后提示: 无法连接到运行中的进程,将在10000毫秒后超时前提是我已经按照配置教程原样操 ...

关于vscode断点调试

关于vscode断点调试相关推荐

最新文章

热门文章