浅析Visual Studio Code断点调节和测验Vue分分快三计

作者:编程技术

经 群主指点 (QQ群:18668853) 趴了下官网,阅读了发行文档,终于在ASP.NET博客 中找到了答案,原来有小伙伴同样遇到问题

2、创建 launch.json

在项目根目录下创建 .vscode/launch.json,内容如下:

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome with ng serve",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

并没有什么特别是的,只需要注意 url 添加项目浏览地址即可。

macOS

工具>选项>项目和解决方案> Web项目“,取消选中”浏览器窗口关闭时停止调试器“

结论

这样你会发现,其实我只打开两个窗口,一是VS CODE、一是Chrome,这样如果你是使用多屏幕或window10的多桌面的话,简直可以浪一把。

而且当我在调试时发现错误,可以直接在VSCODE中修改代码,保存后由于 Angular Cli 自动刷新,并同时进入修改代码后的DEBUG。

爽……

happy coding!

打开控制台执行:

使用Chrome 调试闪退,MMP ,一想肯定是VS的锅咯,各种抓头发。。

1、安装 Debugger for Chrome

直接在市场中找就行了。

修改 webpack 的 sourcemap

都勾上后,瞬间跑起来了,但是问题来了,每次会新运行一个Chrome ,各种不爽

然……

Windows

OK,完事了,万事大吉,开心撸码吧。。。。。。。。。

3、启动 ng serve

当然这里最好是在 VSCODE TERMINAL 启动 ng serve 了。

Visual Stuido Code 安装插件

试试看看VS配置发现 ,多了点东西。。

其实……

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

为啥 泪奔?

当定位到错误总是需要一直在 Chrome 与 VSCODE 切换。

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

分分快三计划 1

我们可以简化这一过程,只需要把调试在VSCODE里面完成,这样当定位错误的时候可以直接修改代码。

  • 点击 Visual Studio Code 左侧边栏的 调试 按钮, 在弹出的调试配置窗口中点击 设置 小齿轮, 然后选择 chrome, VS Code 将会在工作区根目录生成.vscode 目录,里面会有一个 lanch.json 文件并会自动打开
  • 用下面的配置文件覆盖自动生成的 lanch.json 文件内容。

巨硬build后发了15.7.1满载期待的升级了。。结果NM泪奔...................

怎么做?

两步骤即可。

添加 Visual Studio Code 配置

Chrome Dev Tools 绝对是目前最爽的 JavaScript 调试工具之一,一方面可以通过在代码 debugger 或 直接在 Sources 中添加断点,并且可以直接进入 Typescript 源代码,真的无可挑剔。

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

4、调试

在VSCODE按F5进入调试状态,最后打开 Chrome 刷新页面,会直接在 VSCODE 进入断点。

{
 // Use IntelliSense to learn about possible attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
  {
   "type": "chrome",
   "request": "attach",
   "name": "Attach to Chrome",
   "port": 9222,
   "webRoot": "${workspaceRoot}/src",
   "url": "http://localhost:8080/#/",
   "sourceMaps": true,
   "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
   }
  }
 ]
}

修改代码 > 打开Dev Tools > 设置断点 > 调试 > 回到VSCODE

google-chrome --remote-debugging-port=9222

我们一般在开发Angular,首先需要在CMD终端 (或VSCODE TERMINAL)启动 ng serve,后打开浏览器,然后打开 Dev Tools,进入断点,此时再回过头VS CODE修改代码;而其实我们在开发过程中需要一直重复以下流程:

  • 通过第一步的方式以远程调试打开的方式打开 Chrome
  • 在 vue 项目中执行npm run dev以调试方式启动项目
  • 点击 VS Code 左侧边栏的调试按钮,选择 Attach to Chrome 并点击绿色开始按钮,正常情况下就会出现调试控制条。
  • 现在就可以在.vue文件的js代码中打断点进行调试了。

打开控制台执行:

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

Linux

设置 Chrome 远程调试端口浅析Visual Studio Code断点调节和测验Vue分分快三计划。

开始调试吧

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

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

/Applications/Google Chrome.app/Contents/MacOS/Google浅析Visual Studio Code断点调节和测验Vue分分快三计划。 Chrome --remote-debugging-port=9222

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

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 开源工具技巧 angular...