以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法

今天来说个比较实用的东西
用浏览器开发者工具 对 javaScript代码进行调试

我们先创建一个index.html
在这里插入图片描述
编写代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function a() {let a_var = "a";b(a_var);}function b(a_var) {debuggerconsole.log(global_var);let b_var = 'b' + a_var;c();}function c() {let c_var ='c';}let module_var = 'module';var global_var = 'global';a();</script>
</body>
</html>

这是 我们最基本的一个实例代码 我们在 a中调用b b中调用c 在中间打印了一些变量
然后在b中打了一个断点 debugger
最后 在最下面 调用a让整个代码跑起来

这里 以谷歌浏览器为例 因为开发中 体验最好的无非就是谷歌
在这里插入图片描述
打开界面 它并不会有什么效果
在这里插入图片描述
因为这些调试代码 要你打开开发者工具才会有效果
我们按键盘的 F12键 或者 在浏览器右键选择 检查
在这里插入图片描述
然后 刷新界面 执行到 我们debugger的位置 就会停下来
在这里插入图片描述
然后 如下图 箭头指向处 就是调用站 它会告诉你一些信息 例如 我们这里就告诉我们 目前是在b函数 是 a函数调用了它
在这里插入图片描述
然后 我们在调用站 点击这个a 上面代码的位置 就会帮我们标出 具体是a的哪个位置调用了我们的b
在这里插入图片描述
调用站上 再点往下一个 它就帮你把调用a的位置都标出来了
在这里插入图片描述
其次是 我们在调用站 切换函数时 边上还会提示作用域 作用域里面的变量对应值 就是这个函数内能拿到的属性
在这里插入图片描述
以及这些属性都会告诉你它们的上级是谁 a_var和b_var 父级都是 window
然后 b_var 告诉你 他还没赋值 因为 我们b断点这个位置 b_var = 的代码还没执行

下图 我们切换到 a 就能看到 a的作用域
在这里插入图片描述
我们作用域 这里给我们分成了三种
本地作用域 就是方法中拿到的 参数 或者 在方法中声明的
脚本 就是 我们在文件外围通过let声明的 例如 module_var
全局 就是 我们在文件外围通过 var声明的 例如 global_var
在这里插入图片描述
然后 我们点击如下图指向处 就可以结束掉当前断点 它就会一直正常执行 直到进入下一个debugger
在这里插入图片描述
我们点击一下 因为我们代码中就这一个断点 所以 断点调试就直接整个结束了
在这里插入图片描述
然后 我们还是刷新 重新进入断点 然后 我们可以手动给代码打上断点 例如 下图 我们点击 21行代码前面一点点的位置 整个变成蓝色 说明 我们已经标记上了一个断点
在这里插入图片描述
这次 我们再点击这个继续执行 如下图
在这里插入图片描述
然后 它就会进入我们手动标记的这个断点啦
在这里插入图片描述
而且我们手动点上去这个断点 会一直存在 触发你把浏览器关了 不会说 你把页面刷新了就没了

然后 是我们下图指向的第二个工具 跳过下一个函数的调用
在这里插入图片描述
我们每点一下它都会往下再走一步
在这里插入图片描述
但 我们下到调用 c 的这个位置 如果 我们对c里面的逻辑 不感兴趣 点这个 跳过下一个函数
在这里插入图片描述
逻辑就不尽然这个c函数了 直接跳过它了
在这里插入图片描述
然后 是下图指向的 进入下一个函数
在这里插入图片描述
常规情况下 依旧是 点一下 就往下走一步
在这里插入图片描述
但当我们 遇到函数调用 例如 下图 遇到C函数 我们点击这个进入下一个函数
在这里插入图片描述
我们就会进到这个c函数中
在这里插入图片描述
然后 如下图指向 跳出当前函数 例如 当前所处的这个b函数 我们对它的内容不感兴趣
在这里插入图片描述
我们点一下 跳出当前函数 它马上就会跳出当前这个函数
在这里插入图片描述
然后是下图指向的 单步测试 这个按钮是我们之后最常用的 就是 单纯的下一步 代码怎么走 它就怎么走 遇到方法就进 方法执行完了 它就出 一步一步往下走
在这里插入图片描述
然后 我们可以将鼠标放到某一行代码 前面 如下图 放在了 17行前面右键 就会出现一个菜单
在这里插入图片描述
然后 我们选择 第一个选项 继续执行到此处
就会瞬间执行到这个位置 不再停留中间的过程了
在这里插入图片描述
但是 这个东西的问题是 只能在同一个作用域中去用

比如 我们b想跳c
在这里插入图片描述
直接 整个断点就结束了 因为 它都无法确定 能不能运行到c这个位置
在这里插入图片描述
然后 我们下图指向这个 可以让断点直接失效
在这里插入图片描述
这里我们点一下改为选中状态
在这里插入图片描述
重新刷新界面 所有断点就都无效了
在这里插入图片描述

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

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

相关文章

【报错解决】-bash: export: `-8‘: not a valid identifier 不是有效的标识符

现象 一登陆就提示-bash: export: -8’: not a valid identifier 不是有效的标识符 问题出现的原因 设置字符集时多写了空格 [rootdb1 ~]# cat >>/etc/profile<<EOF export LANGen_US.UTF -8(-8前不应有空格) EOF 解决方法 cd /etc vi profile 把export带有-8的…

如何升级至ChatGPT Plus:快速指南,ChatGPT的秘密武器GPT4.0是什么?

提到 ChatGPT。想必大家都有所耳闻。自从 2022 年上线以来&#xff0c;就受到国内外狂热的追捧和青睐&#xff0c;上线2个月&#xff0c;月活突破1个亿&#xff01;&#xff01;&#xff01; 而且还在持续上涨中。因为有很多人都在使用 ChatGPT 。无论是各大头条、抖音等 App、…

利用YOLOv8 pose estimation 进行 人的 头部等马赛克

文章大纲 马赛克几种OpenCV 实现马赛克的方法高斯模糊pose estimation 定位并模糊:三角形的外接圆与膨胀系数实现实现代码实现效果参考文献与学习路径之前写过一个文章记录,怎么对人进行目标检测后打码,但是人脸识别有个问题是,很多人的背影,或者侧面无法识别出来人脸,那…

工具 canvas 画时钟表

自己写的工具&#xff0c;代码和Auto.js有差异 importClass(android.view.MotionEvent) importClass(android.graphics.Paint) importClass(java.util.TimeZone); importClass(java.text.SimpleDateFormat); ui.layout( <vertical><text id"坐标1"/>&l…

vue-生命周期+工程化开发(三)

生命周期 Vue 生命周期 和 生命周期的四个阶段 思考&#xff1a; 什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09;什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a;一个Vue实例从 创建…

【办公类-23-02】20240212徐迟《江南小镇(南浔古镇)》“水晶晶”和景物”数量提取66个

作品展示 背景需求&#xff1a; 2024年春节前夕&#xff0c;我与家人前往浙江湖州、南浔旅行。探寻母亲、外婆外公、曾外婆的祖籍南浔的风土人情。在古镇上看到了”著名诗人“徐迟”的介绍。 母亲说&#xff1a;我的姑母就是在南浔读了小学和中学&#xff0c;她小学时的老师就…

PKI - 借助Nginx 实现Https_使用CA签发证书

文章目录 Pre概述操作步骤1. 生成 CA 密钥对2. 生成自签名的 CA 证书3. 生成服务器密钥对和证书签名请求 (CSR)4. 使用 CA 签署服务器证书 Nginx Https 自签证书1. 生成自签名证书和私钥2. 配置 Nginx 使用 CA签发的 HTTPS 证书3. 重启 Nginx 服务4. 直接访问5. 不验证证书直接…

Junit5基础教程

文章目录 一&#xff0c;导入依赖二&#xff0c;基本功能一、常用断言二、执行顺序和常用注解1、通过BeforeAll类的注解来保证顺序2、通过order注解来保证执行顺序 三、依赖测试四、参数化测试五、测试套件SelectPackages、IncludePackages、SelectClasses、IncludeTags等注解的…

Spark MLlib

目录 一、Spark MLlib简介 &#xff08;一&#xff09;什么是机器学习 &#xff08;二&#xff09;基于大数据的机器学习 &#xff08;三&#xff09;Spark机器学习库MLlib 二、机器学习流水线 &#xff08;一&#xff09;机器学习流水线概念 &#xff08;二&#xff09…

第5集《佛说四十二章经》

和尚尼慈悲、诸位法师、诸位居士&#xff0c;阿弥陀佛&#xff01; 请大家打开讲义第五面&#xff0c;第三章、割爱去贪。 蕅益大师他把《四十二章经》的内涵分成两个部分&#xff1a;第一部分是第一章、第二章的正道法门&#xff1b;其次&#xff0c;第三章之后共有四十章都…

Java图形化界面编程—— ImageIO 笔记

2.8.4 ImageIO的使用 在实际生活中&#xff0c;很多软件都支持打开本地磁盘已经存在的图片&#xff0c;然后进行编辑&#xff0c;编辑完毕后&#xff0c;再重新保存到本地磁盘。如果使用AWT要完成这样的功能&#xff0c;那么需要使用到ImageIO这个类&#xff0c;可以操作本地磁…

【MATLAB】GA_BP神经网络回归预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 GA_BP神经网络回归预测算法结合了遗传算法&#xff08;Genetic Algorithm, GA&#xff09;和BP神经网络&#xff08;Backpropagation Neural Network, BPNN&#xff09;&#xff0c;用于解…

分享88个文字特效,总有一款适合您

分享88个文字特效&#xff0c;总有一款适合您 88个文字特效下载链接&#xff1a;https://pan.baidu.com/s/1Y0JCf4vLyxIJR6lfT9VHvg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不…

Gemini VS GPT-4,当前两大顶级AI模型实测

随着谷歌在AI军备竞赛中急起直追&#xff0c;“有史以来最强大模型”Gemini Advanced终于上线&#xff0c;AI爱好者们总算等来了一款号称能够匹敌GPT-4的大语言模型。 月费19.99美元&#xff08;包含Google One订阅&#xff09;的Gemini Advanced实际表现如何&#xff1f;究竟…

C++进阶(十五)C++的类型转换

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、C语言中的类型转换二、为什么C需要四种类型转换三、C强制类型转换1、static_cast2、reint…

[office] excel如何计算毛重和皮重的时间间隔 excel计算毛重和皮重时间间隔方法 #笔记#学习方法

excel如何计算毛重和皮重的时间间隔 excel计算毛重和皮重时间间隔方法 在日常工作中经常会到用excel&#xff0c;有时需要计算毛重和皮重的时间间隔&#xff0c;具体的计算方式是什么&#xff0c;一起来了解一下吧 在日常工作中经常会到用excel&#xff0c;在整理编辑过磅数据…

Linux--基础开发工具篇(2)(vim)(配置白名单sudo)

目录 前言 1. vim 1.1vim的基本概念 1.2vim的基本操作 1.3vim命令模式命令集 1.4vim底行命令 1.5 异常问题 1.6 批量注释和批量去注释 1.7解决普通用户无法sudo的问题 1.8简单vim配置 前言 在前面我们学习了yum&#xff0c;也就是Linux系统的应用商店 Linux--基础开…

2024牛客寒假算法基础集训营2-c Tokitsukaze and Min-Max XOR

来源 题目 Tokitsukaze 有一个长度为 n 的序列 a1,a2,…,an和一个整数 k。 她想知道有多少种序列 b1,b2,…,bm满足&#xff1a; 其中 ⊕\oplus⊕ 为按位异或&#xff0c;具体参见 百度百科&#xff1a;异或 答案可能很大&#xff0c;请输出  mod1e97 后的结果。 输入描述…

问题排查利器 - 分布式 trace

在分布式系统开发中&#xff0c;系统间的调用往往会横跨多个应用之间的接口。负责的调用链路也导致了&#xff0c;当线上环境出现问题时&#xff0c;例如请求失败、延迟增加或错误发生&#xff0c;我们无法第一时间确定是哪个环节出了问题&#xff0c;这给故障排查和修复带来了…

AI:125-基于深度学习的航拍图像中地物变化检测

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码,详细讲解供…