文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

VS Code 折腾记 - (7) 内置Debug功能深入【调教angular-cli 最新版】

前言 很多小伙伴说用了打包工具(Webpack)之后，断点调试相当痛苦； 常规的方式无非是debugger,console.log()大法； 但是，vscode这货天生支持debug功能，不用白不用，今天我就说说怎么调教...angular-cli; ---- 题外话（号外） 最近vscode又更新了。。...简言之：就是让你的代码在chrome上调试，为什么vscode不集成这个，可能控制体积大小什么的。。...type：调试的类型，vscode天生支持node,比如go,php,chrome这些就依赖插件啦 request : 配置文件的请求类型，有launch和attach两种，具体看官方文档 url:这个是...然后vscode就可以看到你想瞅瞅的数据了。。调试过程（单步什么的）,对应的本地文件会显示数据变动在你的 ?

98220
您找到你想要的搜索结果了吗？
是的
没有找到

整理：Visual Studio Code (vscode) 配置C、C++环境编写运行C、C++（主要Windows、简要Linux）

，今天我自己按照我原来写的尝试了以下，确实出现了问题，可能是VScode或者cpp的插件版本问题，2018.12.29更新，我会用绿色的字体表示。...4、配置系统环境变量path 然后配置系统环境变量path，这一步为必须 在 我的电脑 上右键 属性： 然后按照下面步骤做即可，注意最后新建的项要与之前MinGW安装位置相对应 Windows7...下面这个是最后用getchar()的旧图，没删供参考 【更新：似乎下面的步骤配置c_cpp_properties.json不需要了，因为我按照上面的步骤来似乎没有在头文件有下划线和原来有的灯泡图标什么的...但是这个貌似不够高大上，其实我们一般是使用system('pause');实现，换上后再次运行，这时候报错了。...【要是根据上述方法还没有配置成功，请看评论区是否有人提出了类似问题，还可以按照我在这篇文章之后一段时间写的一篇：这篇文章，那篇文章使用了codeblocks自带的MINGW，而且配置方法比这个简单一些（

4.2K10

VSCode插件大全｜VSCode高级玩家之第二篇

用错了单词其实对于维护性是有一定的影响的。 一个好的单词作为方法名、类名和变量名会给自己回去查看代码是更多的意义。甚至是别人去查看我们的代码时更容易懂其中的用意。...但是如果我们拼错了单词，有些时候就无法理解这个单词是什么意思了。 所以这个插件对我们来说非常实用，就算是老外都非常多人在使用它。...用习惯这个主题的可以在VSCode中安装使用。使用量也是有200多万+。这款主题在我使用SublimeText的时候非常热爱。...它通过解析代码并使用它自己的规则重新打印代码来强制实现一致的样式，这些规则考虑到最大行长度，在必要时包装代码。 在一个多人协同开发的团队中，统一的代码编写规范非常重要。...提供了一种安全的方法在VSCode中呈现web内容，并支持一些有趣的特性，如编辑器内调试等! 再也不用在浏览器和编辑器中来回切换而觉得麻烦了！

4.6K30

Angular 工具篇之VSCode调试

接下来，我们将介绍一下在 VSCode 中如何利用 Chrome 浏览器调试 Angular 应用。...之后，在项目的根目录下会生成一个 .vscode 目录，该目录下也会自动生成一个 launch.json 文件： { // 使用 IntelliSense 了解相关属性。...应用程序的地址，通常情况下，在开发阶段我们会使用 Angular CLI 来辅助开发，使用 Angular CLI 我们可以运行以下命令来启动本地服务器： $ ng serve 因为该服务器的默认端口是...4200，所以我们需要更新一下 launch.json 文件中默认的 url 配置： "url": "http://localhost:4200" 最后我们就可以进入调试面板，点击运行按钮开始调试 Angular...上面我们已经介绍如何使用 VSCode 和 Chrome 调试 Angular 应用程序。其实除了 Chrome 浏览器之外，在 VSCode 中我们也可以使用 Firefox 或 Edge 浏览器。

1.9K10

让你 nodejs 水平暴增的 debugger 技巧

学习 nodejs 最重要的是什么？可能每个人都有自己的答案。 我觉得学习 nodejs 除了要掌握基础的 api、常用的一些包外，最重要的能力是学会使用 debugger。...debugger client debugger client 一般都是有 ui 的（当然，在命令行里面通过命令来调试也可以，但一般不这么做）。...使用vscode 调试能力的方式是修改项目根目录下的 .vscode/launch.json 配置。 attach 点击右下角的按钮来添加一个配置项。这里选择 nodejs 的 attach： ?...image.png 这样，在 ts 源码中打的断点和在编译出的 js 打的断点都能生效。 多进程调试 当代码中有子进程的时候，就有了第二条控制流，需要再启动一个 debugger。...vscode debugger 的使用主要是在 .vscode/launch.json 里面添加调试配置。

1K10

新手向：前端程序员必学基本技能——调试JS代码

3配置 auto-attach VSCode 调试 JS 的方法有很多，目前比较推荐的就是无需配置的 auto-attach。...auto attach 默认智能 更多可以查看官方文档：nodejs-debugging[4] 4调试 Node.js 代码 我特意新建了一个仓库。供读者动手实践。...选择调试模式 操作方式二：终端命令 通过快捷键 ctrl + ` 反引号 打开终端。或者通过 查看 —— 终端 打开 VSCode 终端。 在终端进入到目录。执行相应的脚本。...单步调试（F11）：点击后进入到当前函数的内部调试，比如在 fn 这一行中执行单步调试，会进入到 fn 函数内部进行调试。...VSCode 调试 Node.js 说明 调试走到不是想看的文件时（或者完全不是这个目录下的文件时），可以选择单步退出按钮或者重新调试。 5其他调试 由于很多项目都配置了代码压缩，难于调试。

71010

这些必备的VSCode JavaScript插件你都用过吗？

在本文，我主要介绍专门针对前端开发者的VS Code插件。有很多满足此条件的VS Code插件，当然我不会都作介绍。相反，我会着重介绍那些已经相当流行而且对前端开发者来说必不可少的VS Code插件。...为简单起见，我把它们分为10类。 在这之中可能有你已经知道并且正在使用的插件，但也很有可能有一些是你听说过但未曾使用过的，我也希望通过本文能为你简要的介绍一下这些插件。...JS Refactor（提供许多重构JavaScript代码的实用方法和操作，例如抽取变量和方法，把现有代码转为使用箭头函数和模板字符串的等价形式，导出函数等。）...这里有一些工具，能极大地减少你开发时的这种重复流程，而不是每次都手动刷新浏览器： 1. Debugger for Chrome（在编辑器中打断点，让你轻松地在Chrome里调试JavaScript。...公告 以后每月5、15、25号更新原创文章，内容不限，喜欢小编的可以点击关注，也可在下方评论留言，你喜欢什么内容，小编根据大家喜欢的内容尝试更新

5.7K10

2022年了，该学会用VSCode debug了

前言 VSCode作为目前使用人数最多的IDE，在前端开发者中也是十分受欢迎的。...你可能会说，要什么Debug，我console.log一把梭走天下。没错，这也是目前很多人在使用的调试方法。...VS Code把调试配置信息保存在.vscode目录下的launch.json文件中（.vscode目录一般存在于项目的根目录下）。...调试前要确保所有配置都是有意义的。 launch和attach 在VS Code中，有两种核心的调试模式，Launch和Attach，他们为开发者提供两种不同类型的工作流。...最简单的方式来理解这两种工作流： launch配置可以理解为VS Code启动调试程序的说明书； attach配置则是如何将VS Code的调试器连接到已运行的应用程序或进程的方法； VS Code的调试支持用调试模式启动一个程序

67120

Script Lab 11：OIfficeJS的三种调试方式

一共有三种方法可用于调试： 通过将清单发布到 Office Online 通过将清单发布到网络文件共享 使用 sideload 命令进行测试 从方便和测试效果综合来看，推荐使用 sideload 方法来做测试...Office Online 【适合范围】 此方法需要在 Office Online 中操作，不适用于在 Windows上 运行测试。...网络文件共享 【适合范围】 此方法仅适用于在Windows上运行的Excel，Word和PowerPoint加载项; 并且仅适用于使用yo office工具创建并且在package.json文件sideload...着Excel中会出现方加载项的TaskPan按钮 sideload 【适合范围】 如果项目是使用 Visual Studio 创建的，或者VSCode 使用较早的 Office 模板而没有 sideload...无论您使用的是Yeoman Generator，Visual Studio Code，node.js，Angular还是其他工具，都可以附加调试器。

2.2K20

分享几个我日常使用的VS Code插件

这可以提供很多帮助，尤其是当你的项目变得很大，并且在 package.json 中包含很多依赖项时。我不想再错过这个插件了，强烈推荐！...itemName=WallabyJs.quokka-vscode Docker 由于我经常使用 NodeJS，因此习惯了完全使用 Docker 设置开发环境。在找到这个扩展之前，我只会用 CLI。...我仍在不时使用静态网站和标准 JavaScript，而且这样做的时候我不想安装诸如 webpack-dev-server 之类的东西。...我用 Markdown 做很多事情。例如，在 hashnode.com 或 dev.to 上写文章，为我的私人项目写文档，或者在 markdown 中写笔记来理顺自己的想法。...我希望你发现了一些对你的工作流程有用的新东西，你有什么好用的扩展也可以在评论里推荐。

1.5K10

OpenRestyNginx Lua服务远程调试方法

7.3（1161），而本人的电脑/笔记本的操作系统均为Windows 10，为了更加方便的开发和调试Linux上的Openresty程序（ngx-lua模块），这里在Windows上使用VSCode（...远程调试 这里主要是使用VSCode自身的debuggee来完成远程调试的工作。...接下来需要对VSCode的debuggee进行配置，在对应的工作区的launch属性中直接配置即可。在实际工作中，我们可以针对不同的调试模式使用不同的debuggee配置。...扩展 远程编译 todo attach模式自动选择对应pid 当我们使用attach的调试模式的时候，可能需要频繁的重复F5和输入pid这2个操作，而且每次操作的pid可能都不一样，也就意味着，每次attach...但是，当我们使用launch的调试模式，在调试结束的时候，nginx.pid文件并没被删除掉。

5.3K20

使用vscode调试你的node应用

留意下调试控制台, 在调试时 vscode 执行的命令, 实际上就是使用了 nodejs 原生的debuuger 模块....[添加配置] 之后 vscode 会在打开项目路径中帮我们新增.vscode/launch.json文件, 文件中已经补充了最基础的配置. { // 使用 IntelliSense 了解相关属性。...所以使用上面的配置来启动 debug 时, 效果和我们上面提到的对当前文件进行 debug 是一样的. 再举个我平常使用比较频繁的场景的例子. 就是程序的启动命令为一个 npm 模块提供的命令....request: launch / attach 因为调试配置中可选参数实在太多了, 对其一一进行解析意义不大....而 vscode 中的attach模式也是一样的道理, 我们可以先以 debug 模式运行程序, 然后通过attach把 vscode 的 debugger 连接到已经运行的程序中去.

2.5K30

VS Code 折腾记 - (11) 再来一波插件推荐!(代码片段,框架,Node,touchbar,TS,Git,数据库,python!!)

优秀的插件需要用户去尝试,更需要作者花时间沉淀和打造.社区需要多些包容, 我看到很多人会在一些插件下面辱骂.说什么万能不更新,辣鸡插件卸载不掉....- ES6, TS, JSX, TSX: 这个插件是作者在一个长期不更新的项目加以维护的,类似智能补全的,基本跟进主流 React Native Tools: 让 vscode可以写 RN 的插件,包括调试...html,ng,vue,.net等使用(布局局限具体看文档)....挺实用的 Debugger for Chrome: 更新迭代了那么久,稳定性已经很不错了,非常棒的调试工具.用过都说好 Complete JSDoc Tags : 智能提示补全JSDOC的语法 Git...MagicPython: 戴上Magic,有人喜欢有人讨厌,看人吧..针对python魔术方法还有新特性的插件.好不好你说了算 ---- Mac TouchBar(MBP 的触摸条) Nasc VSCode

1.5K30

把 puppeteer 融入调试流程，调试体验爽翻了！

我试了一下还真可以，用 puppeteer 来自动执行脚本，并且过程中还可以打断点调试，调试体验简直不要太爽。 这篇文章就来分享下。...首先，react 项目我是通过 vscode debugger 来调试的： 在 .vscode > launch.json 的调试配置文件里新增一个 chrome 类型的调试配置，输入调试的 url。...然后点击 debug 启动： 执行到代码中的断点就会在 vscode 里断住： 这样就可以在 vscode 里断点调试 react 项目了。...既然 puppeteer 和调试都要以调试模式跑浏览器，那我们就等 puppeteer 跑起 chrome 之后，vscode debugger 再 attach 上它来调试。...试一下： 然后我们把 vscode debugger 也 attach 上。 之后再跑 puppeteer 的脚本。 猜下这时候会发生什么？ 执行了自动化测试脚本，并且还在断点处断住了！

95820

VSCode打造成为开发神器

VSCode现在是世界上最为常用的编辑器之一，为什么被称为编辑器，是因为它不像IDE一样集成了大量开发环境的配置，必须你手动配置很多东西，才能将它打造成为一个趁手的生产工具。...注：在开启该插件后，VSCode会有一个很长的文件搜索时间，不推荐使用。 koroFileHeader：在文件头部生成注释，并且能够一键生成函数JSDOC注释。...编辑器拓展 4.1 Cocos-creator 让VSCode能够成为Cocos开发工具，cocos-creator目前主要用来做H5游戏。...Debugger for Chrome：能够使VSCode在Chrome上面调试代码。 Debugger for Firefox：能够使VSCode在Firefox上面调试代码。...Docker：使VSCode具有操控Docker的功能。 Draw.io Integration：可以在VSCode中创建流程图。 Gist：使VSCode能够快速创建Gist代码片段。

1.9K20

VS Code 调试完全攻略（5）：基于浏览器的 React 应用

它超级强大，同时又很容易，所以在调试 CRA 和 React 程序时没有理由不这样做。 ? VS Code 调试完全攻略系列目录 ?...代码中已经包含了这个配置文件。尽管非常简单，但还是逐行介绍一下，确保你能够了解它都做了些什么事。打开 .vscode/launch.json： ?...另一种可能性是 attach 到已经运行的调试服务器，这在当前的配置下是不可能的。最后，当你停止调试会话时，VS Code 会负责关闭 Chrome。...断点 然后在调试浏览器中与网站进行交互，但是这次启用了调试功能?让我们来看看在示例程序中成功的 fetch 是什么样子的： ?...确保在调试侧栏中打开了 Watch，并添加了一些表达式： ? 添加监视表达式 让我们尝试 fetch 一个存在的内容，并留意表达式： ?

2.2K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券