浏览器断点调试说明

news2024/9/22 3:33:36

断点调试


断点调试面板

断点面板

功能按钮介绍

在这里插入图片描述

描述:继续执行脚本 或者叫(逐过程执行)
快捷键 (F8)或者是(Ctrl+\)
作用:打断点了的地方(比如有是三个断点地方)就会 第一个断点处执行了,点击这个图标或者快捷键 就会到底二个断点处,以此类推
在这里插入图片描述
上图代码为给一个元素绑定点击事件,因为事件只有浏览器中才执行,当代码执行到59行时,由于DOM是浏览器支持的所有这里会跳到其他JS文件中执行,这里的执行代码过多,我看可以点击 在这里插入图片描述这个按钮来跳过其他文件执行的JS代码,从而回到我们打断点处的代码上

其他场景用法,在一个方法调用多个js文件时,涉及到的js代码比较长,则会使用到这个按钮。这个按钮是表示跳到下一个打断点的地方 如果进入JQuery等JS框架的代码中。解决办法是点击它在这里插入图片描述来跳过其他文件代码执行过程

在这里插入图片描述
描述:继跳过下一个函数调用 (逐过程执行)
快捷键 (F10)或者是(Ctrl+')

在这里插入图片描述
这里的执行顺序为 65到68再到95行,在执行 执行 image.onload 函数中的代码进行逐行执行

在这里插入图片描述
描述:进入下个函数调用
快捷键 (F11)或者(Ctrl+;)
会进入断点处函数一行一行执行
在这里插入图片描述

上图在 onclick 中断点了 downloadPicture 函数调用,点击 在这里插入图片描述会从64行开始一行一行执行到 68 行停止,然后直接执行68行函数

在这里插入图片描述
描述:跳出当前函数
快捷键 (Shift+F11)或者(Ctrl+Shift+;)
每一个函数依次支持不会进入函数体
在这里插入图片描述
描述:单步调试(一行一行执行)
快捷键 (F9)

断点之间一行一行执行(包括DOM)
在这里插入图片描述
描述:停用断点
快捷键 (Ctrl+F8)
点击(变成蓝色)暂停所有断点,变成灰色恢复所有断点
在这里插入图片描述

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

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

相关文章

大数据能力提升项目|学生成果展系列之四

导读 为了发挥清华大学多学科优势,搭建跨学科交叉融合平台,创新跨学科交叉培养模式,培养具有大数据思维和应用创新的“π”型人才,由清华大学研究生院、清华大学大数据研究中心及相关院系共同设计组织的“清华大学大数据能力提升项…

13.vue-cli

单页面应用程序:所有的功能只在index.html中完成 vue-cli是vue版的webpack 目录 1 安装vue-cli 2 创建项目 3 使用预设 4 删除预设 5 开启项目 6 项目文件内容 6.1 node_moduls 中是项目依赖的库 6.2 public 6.2.1 favicon.ico 是浏览器页签内部…

尚融宝——整合OpenFeign与Sentinel实现兜底方法——验证手机号码是否注册功能

一、整合过程 在项目添加依赖&#xff1a;添加位置 <!--服务调用--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency> 在需要的服务中添加启动注…

spring中常见的注解

DI(依赖注入中常见的注解) Autowired&#xff1a;按类型自动装配Resource&#xff1a;按名称或类型自动装配&#xff0c;Qualifier&#xff1a;按名称自动装配&#xff0c;Value &#xff1a;注入int、float、String等基本数据类型&#xff0c;只能标注在成员变量、setter方法上…

【Gradle-1】入门Gradle,前置必读

1、为什么要学习Gradle Gradle作为Android开发默认的构建工具&#xff0c;你的每一次编译都会用到它。招聘要求从以前的熟悉加分&#xff0c;到现在的必备技能&#xff0c;可见Gradle的重要性。 做开发这么久了&#xff0c;你是否对Gradle又爱又恨&#xff1f;是否对Gradle的…

第三章(1):自然语言处理概述:应用、历史和未来

第三章&#xff08;1&#xff09;&#xff1a;自然语言处理概述&#xff1a;应用、历史和未来 目录第三章&#xff08;1&#xff09;&#xff1a;自然语言处理概述&#xff1a;应用、历史和未来1. 自然语言处理概述&#xff1a;应用、历史和未来1.1 主要应用1.2 历史1.3 NLP的新…

【科普】PCB为什么常用50Ω阻抗?6大原因

在PCB设计中&#xff0c;阻抗通常是指传输线的特性阻抗&#xff0c;这是电磁波在导线中传输时的特性阻抗&#xff0c;与导线的几何形状、介质材料和导线周围环境等因素有关。 对于一般的高速数字信号传输和RF电路&#xff0c;50Ω是一个常用的阻抗值。 为什么是50Ω&#xff1f…

《程序员面试金典(第6版)》面试题 10.09. 排序矩阵查找(观察法,二分法,分治算法入门题目,C++)

题目描述 给定MN矩阵&#xff0c;每一行、每一列都按升序排列&#xff0c;请编写代码找出某元素。 示例: 现有矩阵 matrix 如下&#xff1a;[[1, 4, 7, 11, 15],[2, 5, 8, 12, 19],[3, 6, 9, 16, 22],[10, 13, 14, 17, 24],[18, 21, 23, 26, 30] ]给定 target 5&…

wma格式怎么转换mp3,4种方法超快学

其实我们在任何电子设备上所获取的音频文件都具有自己的格式&#xff0c;每种格式又对应着自己的属性特点。比如wma就是一种音质优于MP3的音频格式&#xff0c;虽然很多小伙伴比较青睐于wma所具有的音质效果&#xff0c;但也不得不去考虑因wma自身兼容性而引起很多播放器不能支…

【高危】Apache Solr 代码执行漏洞(MPS-wic0-9hjb)

漏洞描述 Apache Solr 是一款开源的搜索引擎。 在Apache Solr 受影响版本中&#xff0c;由于Solr默认配置下存在服务端请求伪造漏洞&#xff0c;且SolrResourceLoader中实现了java SPI机制。当Solr以SolrCloud模式启动时&#xff0c;攻击者可以通过构造恶意的solrconfig.xml文…

几个最基本软件的环境变量配置

在Windows中配置环境变量位置&#xff1a; 控制面板->系统和安全->系统。可以点击&#xff1a;“此电脑”->“属性”直接进入。 点击“高级系统设置”->【环境变量】。在这里可以看见用户变量和系统变量&#xff0c;如果你这台机器不是你一个人使用设置为用户变量…

接口文档设计避坑指南

我们做后端开发的,经常需要定义接口文档。 最近在做接口文档评审的时候&#xff0c;发现一个小伙伴定义的出参是个枚举值&#xff0c;但是接口文档没有给出对应具体的枚举值。其实&#xff0c;如何写好接口文档&#xff0c;真的很重要。今天田螺哥&#xff0c;给你带来接口文档…

Vue学习笔记(4. 生命周期)

1. 生命周期写法&#xff08;vue2与vue3比对&#xff09; 创建前&#xff1a;vue3 setup, vue2 beforeCreate //组件创建前执行的函数 创建后&#xff1a;vue3 setup, vue2 created //组件创建后执行的函数 挂载前&#xff1a;vue3 onBeforeMount, vue2 beforeMount //挂…

FastViT: A Fast Hybrid Vision Transformer using Structural Reparameterization

FastViT: A Fast Hybrid Vision Transformer using Structural Reparameterization 论文地址&#xff1a;https://arxiv.org/pdf/2303.14189.pdf 概述 本文提出了一种通用的 CNN 和 Transformer 混合的视觉基础模型 移动设备和 ImageNet 数据集上的精度相同的前提下&#xf…

SpringBoot自动配置原理分析

前言&#xff1a; 虽然工作中一直使用的是自研的一款基于spring的框架&#xff0c;但是随着springboot在各公司的广泛使用&#xff0c;公司的一些新项目也开始逐渐使用springBoot了&#xff0c;那么springBoot的一些特性就要仔细学习一下了。 什么是自动配置&#xff1f; 还记…

【牛客刷题专栏】0x21:JZ20 表示数值的字符串(C语言编程题)

前言 个人推荐在牛客网刷题(点击可以跳转)&#xff0c;它登陆后会保存刷题记录进度&#xff0c;重新登录时写过的题目代码不会丢失。个人刷题练习系列专栏&#xff1a;个人CSDN牛客刷题专栏。 题目来自&#xff1a;牛客/题库 / 在线编程 / 剑指offer&#xff1a; 目录 前言问…

Voice Control for ChatGPT 轻松实现使用语音与ChatGPT进行对话。

缘由 日常生活中&#xff0c;我们与亲人朋友沟通交流一般都是喜欢语音的形式来完成的&#xff0c;毕竟相对于文字来说语音就不会显的那么的苍白无力&#xff0c;同时最大的好处就是能解放我们的双手吧&#xff0c;能更快实现两者间的对话&#xff0c;沟通便更高效了。Voice Co…

【瑞吉外卖】002 -- 后台登录功能开发

本文章为对 黑马程序员Java项目实战《瑞吉外卖》的学习记录 目录 一、需求分析 1、页面原型展示 2、登录页面展示 3、查看登录请求信息 4、数据模型 二、代码开发 1、创建实体类Employee&#xff0c;和employee表进行映射 2、创建包结构&#xff1a;&#xff08;Controller、Se…

基于TCP协议的Socket通信

上节中我们给大家接触了Socket的一些基本概念以及使用方法&#xff0c;相信大家对Socket已经有了初步的掌握。本节我们学习使用Socket来实现大文件的断点续传&#xff01;在这里我们以他人的案例进行讲解&#xff0c;这是别人写好的一个Socket上传大文件的例子&#xff0c;不要…

TensorFlow Lite,ML Kit 和 Flutter 移动深度学习:6~11

原文&#xff1a;Mobile Deep Learning with TensorFlow Lite, ML Kit and Flutter 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【ApacheCN 深度学习 译文集】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 不要担心自己的…