Vscode快捷键及用Vscode调试前端项目

最新推荐文章于 2024-03-19 00:16:35 发布
最新推荐文章于 2024-03-19 00:16:35 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 开发工具 文章标签： visual studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwer1573037436/article/details/106249823
版权

Vscode如何调试前端项目

在VSCODE中安装debugger

你好！ 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

配置launch.json文件

在这里插入图片描述

Vscode打开前端项目

  1. 把前端项目运行起来，如npm run start
  2. 开启本地调试功能
    在这里插入图片描述
  3. 点击调试后会直接打开浏览器
  4. 在本地项目中需要调试的js文件中用console.log(‘打印出日志信息’)
  5. 浏览器中按F12打开开发者工具，打开console tab页找到 打印的日志信息
    在这里插入图片描述
  6. 打开浏览器中的js文件
    在这里插入图片描述
  7. 查看Vscode中源文件中的js断点
    在这里插入图片描述
    断点变成了黄色的箭头，即该js文件已经进入调试

Vscode快捷键

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

乘风破浪之美好未来
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VS Code 快捷键（中英文对照版）
10-07 751
原文地址：https://segmentfault.com/a/1190000007688656 常用 General 按 Press 功能 Function Ctrl + Shift + P，F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Quick Open Ctrl + Shift + N 新窗口/实例 New window/instanc...
vscode快捷键桌面背景图.jpg
11-26
vscode快捷键桌面背景图.jpg
10个最常用的 VSCode 快捷键，提升你的编码速度
前端达人
02-22 2万+
我们都知道，Visual Studio Code（VS Code）是程序员非常强大的工具。通过本文，我们将学习VS Code中一些最常用的快捷键，这将帮助我们在编程或写代码时更加高效。使用VS Code快捷键可以提高编程速度，让你在使用这个工具时看起来像是一个专家。让我们逐个看一下每个快捷键。1、打开命令面板如果你是初次接触 VS Code 编辑器，那么这个快捷键可能是你学习的最重要的键盘组合之一...
使用vscode前端debug
最新发布
weixin_71248459的博客
03-19 458
vscode 本地debug方式。
VSCode常用快捷键
Shelia_的博客
04-26 6957
快速复制一行 快捷键： shift+alt+ 下箭头(上箭头) 或者 ctrl+c 然后 ctrl+v 选定多个相同的单词 快捷键： ctrl + d 先双击选定一个单词，然后按下 ctrl + d 可以往下依次选择相同的单词。 这样同时修改相同的单词就非常方便 添加多个光标 快捷键： Ctrl + Alt + 上箭头(下箭头) 全局替换某写单词 当我们一个页面需要修改大量相同的文字的时候，我们一个的修改超级麻烦，此时我们可以使用全局替换 快捷键： ctrl + h
VSCode快捷键大全 - 附带动图举例 - 程序员必看
青春木鱼的博客
06-28 1万+
尽管我们经常使用 VS Code中的许多快捷方式，但是我们有可能会忘记它们。 这里用可视化制作了一些GIF，以便更好地记住它们，希望对你有所帮助。VSCode中的每个命令也可以通过使用CTRL + SHIFT + P和搜索查询的命令提示符来执行。 但是知道直接快捷键速度会更快。
【转】23个常用的VSCode快捷键（动图演示）
热门推荐
童话破灭i
10-30 2万+
这将打开最近工作区的列表，并且是切换到另一个文件夹或项目的超快速方法。请注意，如果在VS Code工作区中打开了一个终端，这会关闭当前的终端会话。英文原文地址：https://dev.to/devmount/23-lesser-known-vs-code-shortcuts-as-gif-80。尽管我们经常使用 VS Code中的许多快捷方式，但是我们有可能会忘记它们。如果我们不记得参数顺序，也不想通过查看文档来打断我们的流程，可以使用此命令。当我们希望看到完整的行而无需水平滚动时，它是一个方便的小帮手。
vscode快捷键-前端程序员必备-前端框架-大厂面试准备.docx
02-24
内容概要：是一款前端程序员vscode快捷键，word格式，直接打开便可以学习使用，里面有大约5页的vscode快捷键， 可以方便大家进行学习。虽说不可能全面，但也可以作为一个学习索引，大家可以根据自己的需求，进行学习...
vscode 快捷键集合，PDF中文版本，打印版本
04-19
vscode 快捷键集合，PDF中文版本，打印版本
VScode快捷键PDF，A4打印版本
02-03
VScode快捷键PDF，A4打印版本，转自https://github.com/skywind3000/awesome-cheatsheets/blob/cd8d0cebfe32c9263db8291a270bd33a162dc924/editors/keyboard-shortcuts-windows.pdf
VScode 快捷键大全 Linux
12-21
VScode 快捷键大全 Linux
VSCode常用的快捷键
m0_63893191的博客
07-13 2936
设置方法： 管理按钮 --- 键盘快捷方式 --- 输入 shift + alt + a 找到这个快捷键 ----- 点击编辑按钮 ---- 直接按下 ctrl + shift + / ---- 最后按下回车 修改完毕。比如js 的多行注释是 shift + alt + a ，我们想修改为 ctrl + shfit + /快捷键：shift+alt+下箭头（上箭头） 或者 ctrl+c 然后 ctrl+v。快捷键：ctrl+ +/- ctrl+ 加号或者减号。
VScode 快捷键
王林的博客
04-04 1万+
这里主要记录是 VScode开发工具常用的快捷键，以便提高工作效率，以及今后方便查阅！
前端学习之一——关于第一次使用VSCode打开前端代码并启动问题
Jupite_ch的博客
05-25 1万+
注意：所有涉及代码的软件，都不建议使用中文目录！！要不然会出事！！勿谓言之不预！ 如果不小心用了，后期出现问题，就要重装了。 一、软件环境准备（VSCode、git、nodejs、npm） 1、VSCode下载安装教程 下载： 官网网址：https://code.visualstudio.com/Download ​我是直接点这里。然后它的下载速度会很慢。这时候把下载任务的链接复制出来，将里面的 http://az764295.vo.msecnd.net 替换为 http://v..
分享11个常用的VSCode快捷键，让你编码更高效
前端达人
06-14 2599
因为频繁切换到鼠标可能会对你的手腕造成不利影响。说实话，快速编程是我继续编码的原因之一（开个玩笑，除非...）。无论如何，我发现让我变得更快的关键是与鼠标分离。想一想，每次你需要移动鼠标时，你必须做以下几件事情：将手从键盘移到鼠标上（哎呀，我的肩膀疼）找到该死的光标去了哪里将光标物理移动到需要的位置并点击将手移回键盘（再次，哎呀，我的肩膀疼）以下是我最常用的快捷键，使用它们时你会感觉自己就像在弹钢...
前端学习之小技巧----快速通过vscode打开项目
i96249264_bo的博客
11-27 8594
3、在黑窗口中输入code . 然后回车，这时就会打开vscode，此时项目就被打开了。比如，我这里的根目录是：‘D:\myData\vue\vue-admin’；2、在项目的根目录下的地址栏中输入cmd，并回车，就会弹出黑窗口。1、首先进入到项目的根目录。
VSCode_快捷键
Mr.小灰狼_随笔
08-16 1708
VSCode_快捷键 在这里整理一下 VSCode 编辑器一些常用的快捷键分享给大家 ~
使用VS Code运行前端代码
二哈喇子！
07-06 4405
使用VS Code运行HTML文件
VsCode 常用快捷键
qq_46373192的博客
06-03 3013
VsCode 常用快捷键
vscode 快捷键
08-08
回答: Visual Studio Code (VSCode) 是一款流行的代码编辑器，它提供了丰富的快捷键来提高开发效率。以下是一些常用的 VSCode 快捷键： 1. 打开命令面板：Ctrl + Shift + P 2. 保存文件：Ctrl + S 3. 撤销：Ctrl + ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值