Visual Studio Code 前端调试不完全指南

本文最初发布于我的个人博客:咀嚼之味

Visual Studio Code (以下简称 vscode) 如今已经代替 Sublime,成为前端工程师们最喜爱的代码编辑器。它作为一个大型的开源项目,不断推陈出新;社区中涌现出大量优质的插件,以支持我们更加舒服地进行开发工作。在近期的工作中,我尝试通过 vscode 来提升调试代码的幸福度,积累了一点点小心得在此与大家分享一下。

接下来的内容将从以下几方面进行展开:

  1. launch / attach

  2. 调试前端代码

  3. 调试通过 Nodemon 启动的 Node 服务器

1. launch / attach

要使用 vscode 的调试功能,首先就得配置 .vscode/launch.json 文件。以最简单的 Node 调试配置为例:

{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Launch","program": "${workspaceRoot}/index.js"},{"type": "node","request": "attach","name": "Attach","port": 5858}]
}

其中最重要的参数是 request ,它的取值有两种 launchattach

  • launch模式:由 vscode 来启动一个独立的具有 debug 模式的程序

  • attach模式:附加于(也可以说“监听”)一个已经启动的程序(必须已经开启 Debug 模式)

这两种截然不同的模式到底有什么具体的应用场景呢?且看后文。

2. 调试前端代码

通过 vscode 调试前端代码主要依赖于一个插件:Debugger for Chrome,该插件主要利用 Chrome 所开放出来的接口 来实现对其渲染的页面进行调试。可以通过 Shift + Cmd + X 打开插件中心,搜索对应插件后直接安装。安装完成并重新加载 vscode 后,可以直接点击调试按钮并创建新的启动配置。如果你之前已经创建过启动配置了,就可以直接打开 .vscode/launch.json 进行修改。

图片上传中...

其中调试 Chrome 页面的配置如下所示:

{"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "启动一个独立的 Chrome 以调试 frontend","url": "http://localhost:8091/frontend","webRoot": "${workspaceRoot}/frontend"}]
}

如之前所述,通过第一个 launch 配置就能启动一个通过 vscode 调试的 Chrome。大家可以直接使用我组织好的项目 zry656565/vscode-debug-sample 进行测试,测试方法在该项目的 README 里面写得很清楚了。简要步骤概括为:

  1. npm run frontend

  2. 启动调试配置:“启动一个独立的 Chrome 以调试 frontend”

  3. frontend/index.js 中加断点

  4. 访问 http://localhost:8091/frontend/

延伸问题

使用 launch 模式调试前端代码存在一个问题,就是 vscode 会以新访客的身份打开一个新的 Chrome 进程,也就是说你之前在 Chrome 上装的插件都没法在这个页面上生效(如下图所示)。

vscode-debug-launch

在这种情况下 attach 模式就有它存在的意义了:对一个已经启动的 Chrome 进行监听调试。

{"version": "0.2.0","configurations": [{"type": "chrome","request": "attach","name": "监听一个已经启动调试模式的 Chrome","port": 9222,"url": "http://localhost:8091/frontend","webRoot": "${workspaceRoot}/frontend"}]
}

其中 9222 是 Chrome 的调试模式推荐的端口,可以根据需要进行修改。不过目前我并没有成功实施这个设想,对此有兴趣的同学可以从下面这两个链接入手去研究一下:

  • Chrome DevTools Protocol Viewer

  • Debugger for Chrome / Attach

有一部分遇到的问题可以直接在 Debugger for Chrome 的 FAQ 中得到解答。

3. 调试通过 Nodemon 启动的 Node 服务器

如今,使用 Node 服务器开发一些中间层的服务也慢慢纳入了所谓“大前端”的范畴。而在开发 Node 服务时,我们通常要借助类似于 nodemon 这样的工具来避免频繁手动重启服务器。在这种情况下,我们又如何利用 vscode 来进行断点调试呢?先来看看示例配置文件:

{"version": "0.2.0","configurations": [{"type": "node","request": "attach","name": "附加于已启动的 Node 服务器(debug模式)","port": 5858,"restart": true},{"type": "node","request": "attach","name": "附加于已启动的 Node 服务器(inspect模式)","port": 9229,"restart": true}]
}

首先,为了配合 nodemon 在监听到文件修改时重启服务器,此处需要添加一个 restart 参数。同时大家可能注意到了,这里给出了两种模式,大家可能根据以下区别来选择合适自己的协议:

Runtime'Legacy Protocol''Inspector Protocol'
io.jsallno
node.js< 8.x>= 6.3 (Windows: >= 6.9)
Electronallnot yet
Chakraallnot yet

通俗来说,旧版 Node (< 6.3) 推荐使用 Legacy Protocol (--debug模式,默认 5858 端口),而新版的 Node (>= 6.3) 推荐使用 Inspector Protocol (--inspect模式,默认 9229 端口)。

需要注意的是,在启动 nodemon 程序时,也要添加对应的参数,比如:

nodemon --debug server/app.js
nodemon --inspect server/app.js

详细的例子同样可以在 zry656565/vscode-debug-sample 中找到。

参考资料

  • VS Code - Debugger for Chrome - README

  • Debugging in VS Code

  • Chrome DevTools Protocol Viewer

  • bdspen/nodemon_vscode

  • Node.js Debugging in VS Code

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456429.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习之LDA主题模型算法

文章目录1、知道LDA的特点和应用方向1.1、特点1.2、应用方向2、知道Beta分布和Dirichlet分布数学含义3、了解共轭先验分布4、知道先验概率和后验概率5、知道参数α值的大小对应的含义6、掌握LDA主题模型的生成过程7、知道超参数α等值的参考值8、LDA总结1、知道LDA的特点和应用…

[Go] Template 使用简介

Golang 提供了两个标准库用来处理模板 text/template 和 html/template。我们使用 html/template 格式化 html 字符。 模板引擎 模板引擎很多&#xff0c;Python 的 jinja&#xff0c;nodejs 的 jade 等都很好。所谓模板引擎&#xff0c;则将模板和数据进行渲染的输出格式化后的…

内存泄露监测

2019独角兽企业重金招聘Python工程师标准>>> iOS 内存泄露监测 144 作者 谢谢生活 已关注 2017.05.19 17:38* 字数 4235 阅读 209评论 0喜欢 6 iOS可能存在的内存泄露&#xff1a;block 循环引用。当一个对象有一个block属性&#xff0c;而block属性又引用这个对象…

玩Azkaban跳过的坑

文章目录一号坑&#xff1a;启动Azkaban报错&#xff1a;User xml file conf/azkaban-users.xml doesnt exist.二号坑&#xff1a;报错&#xff1a;failed SslSocketConnector0.0.0.0:8443: java.io.FileNotFoundException: /home/hadoop/app/azkaban/azkaban-web-2.5.0/bin/ke…

删除节点removeChild()

http://www.imooc.com/code/1700 删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功&#xff0c;此方法可返回被删除的节点&#xff0c;如失败&#xff0c;则返回 NULL。 语法: nodeObject.removeChild(node) 参数: node &#xff1a;必需&…

机器学习自主解决安全威胁离我们还有多远?

曾经听见不止一次这样的问题&#xff1a; “机器学习会替代基于人工经验规则的安全解决方案么&#xff1f;”把这个问题放在去年来看&#xff0c;我们已经得到了非常多的讨论甚至是一些已经实际应用的解决方案&#xff0c;对于人工智能在安全以及其它各种对数据进行价值挖掘的场…

Vue:解决[Vue warn]: Failed to resolve directive: modle (found in Anonymous)

解决问题 [Vue warn]: Failed to resolve directive: modle (found in <ComponentA>) console.error(("[Vue warn]: " msg trace)); 原因是 我把model 写成了 modle 这类错误一般是单词写错了 (found in <Anonymous>) 解决思路

一行Python代码制作动态二维码

目录 1、普通二维码 2、艺术二维码 3、动态二维码 在GitHub上发现了一个比较有意思的项目&#xff0c;只需要一行Python代码就可以快捷方便生成普通二维码、艺术二维码(黑白/彩色)和动态GIF二维码。 GitHub网站参加&#xff1a;https://github.com/sylnsfar/qrcode 用法比…

Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量 Vue是什么&#xff1f; Vue.js&#xff08;读音 /vjuː/, 类似于 view&#xff09; 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是&#xff0c;Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层&#xff0c;并且非常…

Pycharm常用高效技巧总结

文章目录1、PyCharm如何自动生成函数注释2、pycharm运行程序时在Python console窗口中运行3、Pycharm在创建py文件时,如何自动添加文件头注释4、Pycharm配置远程调试5、pycharm同一目录下无法import明明已经存在的.py文件1、PyCharm如何自动生成函数注释 一般在函数def()行下敲…

EntityFramework中常用的数据删除方式

最近在学EF&#xff0c;目前了解到删除操作有三种方式&#xff0c; 第一&#xff0c;官方推荐的先查询数据&#xff0c;再根据查询的对象&#xff0c;删除对象。 这是第一种&#xff0c;官方推荐 第二&#xff0c;自己创建一个对象&#xff0c;然后附加&#xff0c;然后删除。 …

Elasticsearch的前后台运行与停止(tar包方式)

备注&#xff1a;在生产环境中&#xff0c;往往一般用后台来运行。jps查看。 1、ES的前台运行 [hadoopdjt002 elasticsearch-2.4.3]$ pwd/usr/local/elasticsearch/elasticsearch-2.4.3[hadoopdjt002 elasticsearch-2.4.3]$ bin/elasticsearch 2、ES的后台运行 [hadoopdjt002 e…

解决pycharm运行Flask指定ip、端口更改无效

后来查了一下官网文档&#xff0c;原来Flask 1.0 版本不再支持之前的FLASK_ENV 环境变量了。 Prior to Flask 1.0 the FLASK_ENV environment variable was not supported and you needed to enable debug mode by exporting FLASK_DEBUG1. This can still be used to control…

Android中SimpleAdapter的使用—自定义列表

本人初学Android&#xff0c;今天研究到Adapter这块感觉挺有意思的&#xff0c;写了个自定义列表进行测试 首先我们新建一个layout列表布局文件&#xff0c;具体布局可以自己设定。 下面贴上我的自定义布局文件代码 1 <?xml version"1.0" encoding"utf-8&qu…

linux lvm扩容

linux lvm扩容 LVM磁盘管理 一、LVM简介... 1 二、 LVM基本术语... 2 三、 安装LVM... 3 四、 创建和管理LVM... 4 2、 创建PV.. 6 3、 创建VG.. 7 4、 创建LV.. 9 5、LV格式化及挂载... 10 一、LVM简介 LVM是 Logical Volume Manager(逻辑卷管理)的简写&#xff0c;它由Heinz …

Python基础常见面试题总结

文章目录基础知识题看程序写结果题编程题以下是总结的一些常见的Python基础面试题&#xff0c;帮助大家回顾基础知识&#xff0c;了解面试套路。会一直保持更新状态。PS&#xff1a;加粗为需要注意的点。基础知识题 1、深拷贝和浅拷贝的区别是什么&#xff1f; 深拷贝是将对象…

Flask-Script扩展命令行manager = Manager(app)

通过使用Flask-Script扩展&#xff0c;我们可以在Flask服务器启动的时候&#xff0c;通过命令行的方式传入参数。而不仅仅通过app.run()方法中传参&#xff0c;比如我们可以通过python hello.py runserver --host ip地址&#xff0c;告诉服务器在哪个网络接口监听来自客户端的连…

Python基础总结之常用内置方法总结

文章目录前言1、str1.1、内置方法&#xff1a;1.2、常用的内置方法1.3、String模块的一些方法2、list2.1、内置方法2.2、常用内置方法3、tupple3.1、内置方法3.2、常用内置方法4、dict4.1、内置方法4.2、常用内置方法5、其他5.1、几个sort的使用5.2、enumerate&#xff08;&…

线程的条件变量实例

情景1&#xff1a;Jack开着一辆出租车来到一个网站停车。看见没人就走了。过段时间。Susan来到网站准备乘车。可是没有来&#xff0c;于是就等着。过了一会Mike开着车来到了这个网站&#xff0c;Sunsan就上了Mike的车走了。如图所看到的&#xff1a;程序实现该情景&#xff1a;…

浅谈互联网寒冬与经济形势

文章目录前言&#xff1a;闲扯总结&#xff1a;前言&#xff1a; 作为刚进入职场一年多的小白来说&#xff0c;刚准备“猥琐发育涨经验”&#xff0c;却碰到这股互联网寒冬&#xff0c;也感到鸭梨山大。也许有人认为我在贩卖焦虑&#xff0c;但是现实真的很严峻。接下说下过去…