以谷歌浏览器为例 讲述 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,一经查实,立即删除!

相关文章

Verilog和Verilog-A有什么区别

Verilog和Verilog-A都是硬件描述语言&#xff0c;用于设计和仿真电子系统。 Verilog 是一种硬件描述语言&#xff0c;广泛用于数字电路的设计、验证和仿真。它是一种结构化的语言&#xff0c;用于描述数字电路的行为和结构。Verilog可用于编写数字逻辑、寄存器传输级&#xff…

Nature Machine Intelligence 法国国家科学研究中心评论“使用大语言模型进行研究的危机”

ChatGPT 于 2022 年底发布&#xff0c;将大型语言模型 &#xff08;LLM&#xff09; 推到了聚光灯下。通过使用户能够直接用自然语言查询模型&#xff0c;ChatGPT 实现了对这些模型的访问——这是一个受欢迎的发展。从那时起&#xff0c;ChatGPT 和 Bard、Claude 和 Bing AI 等…

linux安装单机版redis详细步骤,及python连接redis案例

文章目录 linux相关工具yum方式安装redis使用编译安装redis配置redis为systemctl启动其它: 安装redis6.0python连接redis案例 linux相关工具 ./redis-benchmark #用于进行redis性能测试的工具 ./redis-check-dump #用于修复出问题的dump.rdb文件 ./redis-cli …

MongoDB聚合:$geoNear

$geoNear根据指定的点按照距离以由近到远的顺序输出文档。 从4.2版本开始&#xff0c;MongoDB移除了limit和num选项以及100个文档的限制&#xff0c;如果要限制结果文档的数量可以使用$limit阶段。 语法 { $geoNear: { <geoNear options> } }$geoNear操作接受一个包含…

【报错解决】-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的…

188. 买卖股票的最佳时机 IV

188. 买卖股票的最佳时机 IV 题目链接&#xff1a;188. 买卖股票的最佳时机 IV 代码如下&#xff1a; //动态规划 //参考&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iv/ class Solution { public:int maxProfit(int k, vector<int>&am…

如何升级至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…

powershell 雅地关闭UDP监听器

在PowerShell中优雅地关闭UDP监听器意味着你需要一种机制来安全地停止正在运行的UdpClient实例。由于UdpClient类本身没有提供直接的停止或关闭方法&#xff0c;你需要通过其他方式来实现这一点。通常&#xff0c;这涉及到在监听循环中添加一个检查点&#xff0c;以便在接收到停…

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…

Vue核心基础2:事件处理 和 事件修饰符

1 事件处理 1.1 点击事件 <body><div id"root"><h1>姓名&#xff1a; {{ name }}</h1><h1>地址&#xff1a; {{ address }}</h1><!-- <button v-on:click"showInfo">提示信息</button> --><!-…

Spring中常见的设计模式

使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性、更具有灵活、优雅&#xff0c;而Spring中共有九种常见的设计模式 工厂模式 工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一。这种类型的设计模式属于…

Linux命令-blkid命令(查看块设备的文件系统类型、LABEL、UUID等信息)

说明 在Linux下可以使用 blkid命令 对查询设备上所采用文件系统类型进行查询。blkid主要用来对系统的块设备&#xff08;包括交换分区&#xff09;所使用的文件系统类型、LABEL、UUID等信息进行查询。要使用这个命令必须安装e2fsprogs软件包。 语法 blkid -L | -U blkid [-c…

C __attribute__编译属性整理

背景 最近在看VPP源码&#xff0c;很多变量、函数都设置了编译属性&#xff0c;编译属性的作用却不是很明确&#xff0c;为了增加记忆以及方便日后查阅&#xff0c;在此整理并分享给大家。 概念 __attribute__是GCC的一大特色&#xff0c;attribute机制可以用于设置函数属性&a…

C语言数据结构:数组 vs 链表的性能评估与适用场景

本文将介绍C语言中的数据结构数组和链表&#xff0c;并对它们的性能进行评估&#xff0c;并提供适用场景的建议。 首先&#xff0c;让我们深入了解数组和链表的本质和特点。 数组是一种线性数据结构&#xff0c;它由一组相同类型的元素组成&#xff0c;这些元素在内存中连续存…