vscode使用及调试方式和技巧

常用快捷键

ctrl + ~

显示隐藏终端面板

Ctrl+\ 

快速拆分文件编辑

Alt+ ↑↓

移动当前代码行的位置

Ctrl+D

选中当前匹配项

Ctrl+B

切换侧边栏

alt+ 单机左键

长按鼠标滚轮+鼠标左键下拉

添加多处光标

Ctrl+p

快捷键设置

vscode调试

2022年了,该学会用VSCode debug了 - 掘金 (juejin.cn)

 之前在html文件里写了点东西,想调试下,启动调试后发现调试的不是我当前打开页面的这个html文件(我想调试index2.html但是一点启动调试总是调试的index.html),然后搜了下资料原来是需要配置的(默认调试工作目录下的index.html),所以记录下问题

 可以自己选择配置

 下面是我的简单配置(当然还有很多用法我没去配置,别问为啥问就是一般条件下用不着,vscode支持配置task.json配置和launch.json配置进行调试html文件,我只用了配置launch.json)

{// 使用 IntelliSense 了解相关属性。// 悬停以查看现有属性的描述。// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"name": "chrome debugger1","type": "chrome","request": "launch",//  默认打开的文件--${workspaceRoot}当前打开文件夹的根目录"file": "${workspaceRoot}/index.html",//  ${workspaceFolder}表示当前工作区的根文件夹及其所有子文件夹"webRoot": "${workspaceFolder}"//  运行的本地chrome浏览器exe的路径// "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",//  调试时运行的url// "url": "http://localhost:5500",//  调试时运行的端口// "port": 5433},{"name": "Chrome debugger2","request": "launch","type": "chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}",//  默认打开的文件--${workspaceRoot}当前打开文件夹的根目录"file": "${workspaceRoot}/index2.html"}]
}

可使用调试快捷键或者点右上角小图标

行动解释
继续/暂停
F5
继续:恢复正常的程序/脚本执行(直到下一个断点)。
暂停:检查在当前行执行的代码并逐行调试。
跨步
F10
将下一个方法作为单个命令执行,而无需检查或遵循其组件步骤。
步入
F11
输入下一个方法以逐行执行其执行。
退出
Shift+F11
在方法或子例程中时,通过完成当前方法的剩余行(就像它是单个命令一样)返回到先前的执行上下文。
重新启动
Ctrl+Shift+F5
终止当前程序执行,然后使用当前运行配置重新开始调试。
停止
Shift+F5

日志断点调试

日志断点是普通断点一种变体,  区别:不会中断调试 ,可把信息记录到控制台

使用条件:对于无法暂停或停止服务是有用。

可使用${}打印变量   比如在此处添加日志断点,b的值为${b}

F5运行查看调试结果,  使用 ctrl+ ~ 可唤出终端

条件断点调试

表达式结果为true时才会进行断点

右键添加条件调试断点:

F5进行调试,终端调试控制台查看

 

dev tools调试

一般情况下,我是使用面板调试的,记录下各种调试技巧网页

15个你不得不知道的Chorme dev tools的小技巧 - 前端开发者学堂 (fedev.cn) - 前端开发社区

如何更专业的使用Chrome开发者工具 - 前端开发者学堂 (fedev.cn) - 前端开发社区

Chrome开发者工具调试小技巧_chrome开发者控制台中几个常用的小技巧 csdn-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/47822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无人驾驶概览(1)

主要部分包括:高精度地图HD MAPS,定位Localization, 感知perception,预测 perdicition 规划 plan 控制 control 高精度地图HD MAPS中,几乎支持软件栈所有其他模块,包括定位感知预测和规划 定位Localizati…

Redis常用的5大数据类型

Reids字符串&#xff08;String&#xff09; 设置相同的key&#xff0c;之前内容会覆盖掉 Redis列表&#xff08;List&#xff09; 常用命令 从左往右放值 数据结构 Redis集合&#xff08;set&#xff09; sadd<key><value1><value2>...... 数据结构 Set数据…

[java]-包装类

学习目标 了解包装类是什么。了解装箱和拆箱机制自动装箱和自动拆箱 0.为什么要学习包装类&#xff1f; 在学习包装类之前&#xff0c;我们要了解包装类用来干什么&#xff1f; 前面提过的Java 8大数据类型&#xff08;整型&#xff1a;byte &#xff0c;short , int , long…

深入探索Flutter中的状态管理:使用Provider库

当涉及Flutter状态管理时,provider是一个强大且灵活的解决方案,它提供了一种简单且高效的方式来管理应用程序状态。本文将详细介绍Flutter中provider插件的使用方法、示例代码、各种使用场景以及注意事项。 1. 引入依赖 首先,需要在项目的pubspec.yaml文件中添加provider依…

Servlet运行过程

Servlet运行过程 Servlet程序是由WEB服务器调用&#xff0c;web服务器收到客户端的Servlet访问请求后&#xff1a; ①Web服务器首先检查是否已经装载并创建了该Servlet的实例对象。如果是&#xff0c;则直接执行第④步&#xff0c;否则执行第②步。 ②装载并创建该Servlet的…

AI测试入门(1):认识AI大语言模型(LLM)

AI测试入门&#xff08;1&#xff09;&#xff1a;认识AI大语言模型&#xff08;LLM&#xff09; 前言一、大语言模型的概述1. 什么是大语言模型&#xff1f;2. 大语言模型的历史发展 二、大语言模型的工作原理1. Transformer架构自注意力机制 2. 预训练与微调预训练微调 三、大…

超声波清洗机哪款好用?保姆级教学,教你手把手挑选适合自己的超声波清洗机

提及超声波清洗机&#xff0c;大家都不陌生&#xff0c;尤其是佩戴眼镜的小伙伴&#xff0c;眼镜的镜片长时间不清洁容易模糊不清&#xff0c;而超声波清洗机的出现&#xff0c;可以轻松清洗还不会损坏镜片&#xff0c;备受眼镜党喜爱。但由于现在市面上的超声波清洗机的款式太…

pyqt/pyside QTableWidget失去焦点后,选中的行仍高亮的显示

正常情况下pyqt/pyside的QTableWidget&#xff0c;点击input或者按钮失去焦点后 行的颜色消失了 如何在失去焦点时保持行的选中颜色&#xff0c;增加下面的代码&#xff1a; # 获取当前表格部件的调色板 p tableWidget.palette()# 获取活跃状态下的高亮颜色和高亮文本颜色&a…

排序系列 之 插入排序

&#xff01;&#xff01;&#xff01;排序仅针对于数组哦本次排序是按照升序来的哦 介绍 插入排序英文名为InsertSort 基本思路 1、认为数组当中的第一个数值已经排好序了2、定义一个游标从第二个数值开始不断地向后进行遍历3、游标指向的数据插入已经排好序的数组中 代码…

安卓自带camera hal3 实例README.md翻译

最近&#xff0c;遇到一个这样的问题&#xff0c;临时了解下这个驱动实现架构和特点&#xff0c;翻译如下 V4L2相机HALv3 camera.v4l2库使用视频Linux 2&#xff08;V4L2&#xff09;接口实现了camera HAL v3。这使得它在理论上可以与各种设备配合使用&#xff0c;尽管V4L2的…

Windows server漏洞解决

Windows server漏洞解决 一、SSL/TLS问题1、问题2、建议3、方法1)、winR运行&#xff1a;regedit&#xff0c;进入注册表。2&#xff09;、找到注册表3&#xff09;、在Ciphers新建五个项4&#xff09;、在每个新建文件加入值 二、Apache Tomcat问题1、问题2、下载 好家伙&…

国内从事双臂机器人的团队

一、背景 随着人形机器人的发展&#xff0c;双臂协同操作得到了越来越多研究人员的关注。我自己也是做双臂机器人方向的&#xff0c;虽然通过看论文或刷知乎了解到国内有许多团队在做双臂机器人方向&#xff0c;但还没有系统的整理过&#xff0c;因此趁这次机会&#xff0c;好…

Stripe web 支付语言设置

在两个地方都可以设置 VALUELOCALEELEMENTSCHECKOUTautoStripe detects the locale of the browser✔✔arArabic✔bgBulgarian (Bulgaria)✔✔csCzech (Czech Republic)✔✔daDanish (Denmark)✔✔deGerman (Germany)✔✔elGreek (Greece)✔✔enEnglish✔✔en-GBEnglish (Unit…

python的mixin设计模式

1.介绍 在 Python 中&#xff0c;mixin 是一种设计模式&#xff0c;它是一个包含了特定功能单元的类&#xff0c;这些功能可以被其他类组合利用&#xff0c;这些功能可以被其他类组合利用&#xff0c;以实现代码的复用和功能扩展。 mixin 类通常不被单独实例化&#xff0c;也不…

agv叉车slam定位精度测试标准化流程

相对定位精度 条件&#xff1a;1.5m/s最高速度&#xff1b;基于普通直行任务 数据采集&#xff08;3个不同位置的直行任务&#xff0c;每个任务直行约10m&#xff0c;每个10次&#xff09; 测量每次走过的实际距离&#xff0c;与每次根据定位结果算得的相对距离&#xff0c;两…

Python_封装和继承

封装 Python的封装是一种将数据&#xff08;属性&#xff09;和行为&#xff08;方法&#xff09;捆绑在一起的操作&#xff0c;以实现数据隐藏和抽象。 封装的目的是保护对象内部的数据不被外部直接访问和修改&#xff0c;同时提供接口与外界交互。 私有属性&#xff1a;在…

ES6 数组的扩展(十六)

1. Array.from() 特性&#xff1a;从类数组对象或可迭代对象中创建一个新的数组实例。 用法&#xff1a;将类数组对象或可迭代对象转换为数组。 const likeArray { 0: a, 1: b, length: 2 }; const arr Array.from(likeArray); console.log(arr); // 输出&#xff1a;[a, b…

C#数字医学影像系统(RIS/PACS)源码,Oracle数据库,C/S架构,运行稳定

数字医学影像系统&#xff08;RIS/PACS&#xff09;源码&#xff0c;三甲以下的医院都能满足。PACS 系统全套成品源码。 开发技术&#xff1a;C/S架构&#xff0c;C#开发语言&#xff0c;数据库服务器采用Oracle数据库。 医学影像存储与传输系统&#xff0c;融合了医学信息化…

算法-经典递归解决排列组合

文章目录 前言1. 获取字符串的所有字串2. 数组的子集(无重复)3. 数组的子集(有重复)4. 字符大小写全排列5. 全排列(无重复)6. 全排列(有重复) 前言 如何正确的处理递归 所有的递归都分为带路径的递归和不带路径的递归, 我们之前学二叉树的时候基本上都是带路径的递归, 所有的递…

HBuilder x 使用Git管理项目,配合easy-git插件管理项目代码配置git和推送/拉取使用教程

文章目录 目录 文章目录 使用流程 小结 概要安装流程技术细节小结 概要 克隆/拉取项目代码到本地电脑教程 HBuilder x 使用Git管理项目&#xff0c;配合easy-git插件 克隆项目代码到本地教程-CSDN博客 电脑环境已安装好Hbuilder x工具 如果没有安装可以参考以下先安装好Hbui…