vscode 怎么打断点调试

头像
顾昀峰
    阅读 2 分钟
    2

    第一步：在vscode中安装Debugger for Chrome 或者debugger for fireFox的插件

    在这里插入图片描述
    在这里插入图片描述

    第二步：快捷键F5 或者点击运行=>启动调试

    在这里插入图片描述

    第三步：选择环境需要配置的环境Chrome ，firefox或者node

    在这里插入图片描述

    第四步：上一步选chrome 或者firefox的环境随便选其中一个，此时会出现一个launch.json的配置文件

    在这里插入图片描述

    第五步：配置launch.json加入chrome和firefox的配置项，再一次按下F5，添加配置文件，选择fiefox：server，会自动生成配置在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    第六步：全局安装http-server

    npm i http-server -g

    第七步：测试（在js中打上断点），

    在这里插入图片描述

    并在命令行中运行http-server，会自动产生一个模拟路径，

    在这里插入图片描述

    最后再一次F5 ，出现可以拦截到之前所设置的断点

    在这里插入图片描述

    通过切换配置项我们可以更换为火狐游览器

    在这里插入图片描述

    Microsoftvisual-studio-code调试工具编译器
    顾昀峰
    410 声望6 粉丝
    « 上一篇
    element ui在style scoped的情况下，父组件的样式怎么修改子组件的样式

    引用和评论

    推荐阅读
    头像
    喜大普奔，适用于 VS Code 的 GitHub Copilot 全新免费版本正式推出，GitHub 全球开发者突破1.5亿

    鸣飞赞 8阅读 12.9k评论 1

    头像
    使用Visual Studio Code编写和激活ABAP代码 (上)

    注销阅读 5.4k

    头像
    如何使用Visual Studio Code调试PHP CLI应用和Web应用

    注销赞 1阅读 2.5k

    头像
    笔记：写Flink SQL Helper时学到的一些姿势

    泊浮目赞 2阅读 4.6k

    头像
    如何在vscode中调试代码?

    热饭班长阅读 2.9k

    头像
    调用SCIP C++接口，viusal studio项目工程搭建（For新手）

    楚知行阅读 1.7k

    头像
    如何提高后台服务应用问题的排查效率？日志 VS 远程调试

    注销阅读 1.7k

    0 条评论
    得票最新