资讯专栏INFORMATION COLUMN

vscode 调试 帮助你快递开发

Jinkey / 1769人阅读

摘要:前端不只是只能在浏览器调试,现在越来越多单页面,在编辑器里面进行调试将大大提高你的开发效率调试开发环境需要打开方便调试为根路径在中配置为你启动项目的端口然后按就会启动一个的页面在编辑器里就可以打断点了调试环境下某个文件此为数组可以写多个调

前端不只是只能在浏览器调试,现在越来越多单页面,在编辑器里面进行调试将大大提高你的开发效率~~

1、调试vue 开发环境需要打开 source-map 方便调试 workspaceRoot 为根路径

在 launch.json 中配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8087",  // 8087 为你启动vue项目的端口
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
  ]
}

然后按 F5 就会启动一个google 的页面在编辑器里就可以打断点了

2、调试 node 环境下某个 js 文件

{
  "version": "0.2.0",
  "configurations": [
    // 此为数组可以写多个
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/build/creat.js"  
    },
  ]
}

3、调试 node 后台项目 注意:自己写node时候一般是 node ./bin/www 启动一个服务,调试时候不需要启动直接 按 F5 启动调试即可(会自动启动服务) 否则会导致端口冲突调试失败

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}inwww"
    }
  ]
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106548.html

相关文章

  • 利用vscode调试nodejs代码实践总结

    摘要:支持,和三种环境,并且可以安装扩展插件,因而可以满足绝大多数人的要求,安装配置非本文所要讲述的内容,请自行查找,本文着重讨论如何用更好的调试代码,希望能对大家有所帮助。 2018.5.12更新 最近在用vscode 1.23版本的时候发现outDir不可以使用了,建议这么改吧,直接program采用编译后的文件,然后打开sourceMaps,同时在babel编译的时候自己搞--watc...

    chenatu 评论0 收藏0
  • 提高 JavaScript 开发效率的高级 VSCode 扩展之二!

    摘要:将这些命令绑定到键盘快捷键是有帮助的,例如向上箭头用于平衡向外,而向下箭头用于平衡向内。是和的快速原型开发平台。 本系列的第一篇可以在这里看到: 提高 JavaScript 开发效率的高级 VSCode 扩展! showImg(https://segmentfault.com/img/bVbnn2j?w=1254&h=768); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质...

    cyrils 评论0 收藏0
  • VS Code上手与超实用插件安利

    摘要:软件跨平台支持以及,运行流畅,可谓是微软的良心之作微软有这个宇宙最强,自然也不会弱宇宙最强编辑器说到代码编辑器,我们有必要提一提还有。 原文链接:VS Code上手与超实用插件安利 工欲善其事必先利其器 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号...

    miracledan 评论0 收藏0
  • 用webpack写个现代的JavaScript包

    摘要:这里我们可以尝试运行一下命令尝试能否构建成功,成功的情况下在目录下会生成的文件。在添加调试代码打开调试面板在下拉选项中选择添加配置或者直接创建并打开文件使用了解相关属性。 webpack 作为目前主流的构建工具,其较快的版本迭代和复杂的配置方式,使得每次开发前不得不规划相当部分时间来调试。这里将记录整个环境的搭建过程,为新手提供基础思路。 就像我在开发vue-sitemap时一样,构建...

    yhaolpz 评论0 收藏0
  • 一些所不知道的VS Code插件

    摘要:摘要你所不知道的系列。允许你写入缩写代码并返回的相应标记,目前已经内置,所以不用配置了。自从年双十一正式上线,累计处理了亿错误事件,付费客户有金山软件百姓网等众多品牌企业。摘要: 你所不知道的系列。 原文:提高 JavaScript 开发效率的高级 VSCode 扩展之二! 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 作为一名业余爱好者、专业人员,甚至是每月只有一次编...

    Near_Li 评论0 收藏0

发表评论

0条评论

Jinkey

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<