当前位置： 首页 > news >正文

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

news 2025/10/25 17:55:05

今天来说个比较实用的东西
用浏览器开发者工具 对 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这个位置
在这里插入图片描述
然后 我们下图指向这个 可以让断点直接失效
在这里插入图片描述
这里我们点一下改为选中状态
在这里插入图片描述
重新刷新界面 所有断点就都无效了
在这里插入图片描述

相关文章：

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

今天来说个比较实用的东西 用浏览器开发者工具 对 javaScript代码进行调试 我们先创建一个index.html 编写代码如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&…...

编程日记 2024/2/12 19:55:20

Vue前端框架--Vue工程项目问题总结{脚手架 Vue-cli}

Vue脚手架部署问题总结 我所遇到的一共两大问题 只有先执行npm install之后 才能run serve 否则会报错 vue-cli-serve不是内部或者外部的命令&#xff0c;也不是可运行的程序或者批处理文件的错误 1. 运行npm install会报错 2. 运行npm run serve报错 nodejs官网为 https://no…...

编程日记 2024/2/12 19:50:14

Unity2D 学习笔记 0.Unity需要记住的常用知识

Unity2D 学习笔记 0.Unity需要记住的常用知识 前言调整Project SettingTilemap相关&#xff08;创建地图块&#xff09;C#脚本相关程序运行函数private void Awake()void Start()void Update() Collider2D碰撞检测private void OnTriggerStay2D(Collider2D player)private void…...

编程日记 2024/2/12 19:49:13

vue3-应用规模化-单文件组件

单文件组件概念 Vue 的单文件组件 (即 *.vue 文件&#xff0c;英文 Single-File Component&#xff0c;简称 SFC) 是一种特殊的文件格式&#xff0c;使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例&#xff1a; <script setup…...

编程日记 2024/2/12 19:48:12

Redis -- 渐进式遍历

家&#xff0c;是心的方向。不论走多远&#xff0c;总有一盏灯为你留着。桌上的碗筷多了几双&#xff0c;笑声也多了几分温暖。家人团聚&#xff0c;是最美的风景线。时间&#xff1a;2024年 2月 8日 12:51:20 目录 前言 语法 示例 前言 试想一个场景,那就是在key非常多的…...

编程日记 2024/2/12 19:42:04

使用 C++23 从零实现 RISC-V 模拟器（3）：指令解析

指令解析 这章内容进一解析更多的指令&#xff0c;此外将解析指令的过程拆分为一个单独的类&#xff0c;采用表格驱动的方式&#xff0c;将数据和逻辑分离&#xff0c;降低了 if else 嵌套层数过多。 这部分依旧改动不多&#xff0c;只增加了七个指令。此外代码中细碎的变动没…...

编程日记 2024/2/12 19:41:03

CSS Selector—选择方法，和html自动——异步社区的爬取（动态网页）——爬虫（get和post的区别）

这里先说一下GET请求和POST请求&#xff1a; post我们平时是要加data的也就是信息&#xff0c;你会发现我们平时百度之类的 搜索都是post请求 get我们带的是params&#xff0c;是发送我们指定的内容。 要注意是get和post请求&#xff01;&#xff01;&#xff01; 先说一下异…...

编程日记 2024/2/12 19:35:57

C语言 服务器编程-日志系统

日志系统的实现 引言最简单的日志类 demo按天日志分类和超行日志分类日志信息分级同步和异步两种写入方式 引言 日志系统是通过文件来记录项目的 调试信息&#xff0c;运行状态&#xff0c;访问记录&#xff0c;产生的警告和错误的一个系统&#xff0c;是项目中非常重要的一部…...

编程日记 2024/2/12 19:34:55

HarmonyOS 状态管理装饰器 Observed与ObjectLink 处理嵌套对象/对象数组 结构双向绑定

本文 我们还是来说 两个 harmonyos 状态管理的装饰器 Observed与ObjectLink 他们是用于 嵌套对象 或者 以对象类型为数组元素 的数据结构 做双向同步的 之前 我们说过的 state和link 都无法捕捉到 这两种数据内部结构的变化 这里 我们模拟一个类数据结构 class Person{name:…...

编程日记 2024/2/12 19:24:44

windows中的apache改成手动启动的操作步骤

使用cmd解决安装之后开机自启的问题 services.msc 0. 这个命令是打开本地服务找到apache的服务名称 2 .通过服务名称去查看服务的状态 sc query apacheapache3.附加上关掉和启动的命令&#xff08;换成是你的服务名称&#xff09; 关掉命令 sc stop apacheapache启动命令 …...

编程日记 2024/2/12 19:23:43

Intellij Idea的数据库工具 DataGrip

DataGrip DataGrip&#xff1a; IDEA自带&#xff0c;非常好用。智能提示很强大&#xff0c;快捷键跟IDEA自身一致。 如果下载不了 DataGrip&#xff0c;也可以直接用 IDEA 自带的。 常用的快捷键 alt8&#xff1a; 打开数据库Service ctrlshiftF10&#xff1a;打开常用的数…...

编程日记 2024/2/12 19:22:42

精品springboot疫苗发布和接种预约系统

《[含文档PPT源码等]精品基于springboot疫苗发布和接种预约系统[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&#xff1a;…...

编程日记 2024/2/12 19:20:38

Linux快速入门

一. Linux的结构目录 1.1 Linux的目录结构 Linux为免费开源的系统&#xff0c;拥有众多发行版&#xff0c;为规范诸多的使用者对Linux系统目录的使用&#xff0c;Linux基金会发布了FHS标准&#xff08;文件系统层次化标准&#xff09;。多数的Linux发行版都遵循这一规范。 注&…...

编程日记 2024/2/12 19:14:33

【图形图像的C++ 实现 01/20】 2D 和 3D 贝塞尔曲线

目录 一、说明二、贝塞尔曲线特征三、模拟四、全部代码如下​五、资源和下载 一、说明 以下文章介绍了用 C 计算和绘制的贝塞尔曲线&#xff08;2D 和 3D&#xff09;。    贝塞尔曲线具有出色的数学能力来计算路径&#xff08;从起点到目的地点的曲线&#xff09;。曲线的形…...

编程日记 2024/2/12 19:08:27

python+flask+django医院预约挂号病历分时段管理系统snsj0

技术栈 后端&#xff1a;python 前端&#xff1a;vue.jselementui 框架&#xff1a;django/flask Python版本&#xff1a;python3.7 数据库&#xff1a;mysql5.7 数据库工具&#xff1a;Navicat 开发软件&#xff1a;PyCharm . 第一&#xff0c;研究分析python技术&#xff0c…...

编程日记 2024/2/12 19:03:16

《CSS 简易速速上手小册》第9章：CSS 最佳实践（2024 最新版）

文章目录 9.1 维护大型项目的 CSS9.1.1 基础知识9.1.2 重点案例&#xff1a;构建一个可复用的 UI 组件库9.1.3 拓展案例 1&#xff1a;优化现有项目的 CSS 结构9.1.4 拓展案例 2&#xff1a;实现主题切换功能 9.2 BEM、OOCSS 和 SMACSS 方法论9.2.1 基础知识9.2.2 重点案例&…...

编程日记 2024/2/12 19:02:15

Qt QVariant类应用

QVariant类 QVariant类本质为C联合(Union)数据类型&#xff0c;它可以保存很多Qt类型的值&#xff0c;包括 QBrush&#xff0c;QColor&#xff0c;QString等等&#xff0c;也能存放Qt的容器类型的值。 QVariant::StringList 是 Qt 定义的一个 QVariant::type 枚举类型的变量&…...

编程日记 2024/2/12 19:01:14

不到1s生成mesh! 高效文生3D框架AToM

论文题目&#xff1a; AToM: Amortized Text-to-Mesh using 2D Diffusion 论文链接&#xff1a; https://arxiv.org/abs/2402.00867 项目主页&#xff1a; AToM: Amortized Text-to-Mesh using 2D Diffusion 随着AIGC的爆火&#xff0c;生成式人工智能在3D领域也实现了非常显著…...

编程日记 2024/2/12 18:58:11

Mac中管理多版本Jdk

1. 首先下载JDK&#xff0c;以jdk8和17为例 2. 打开.zprofile中添加如下内容 #java config export JAVA_8_HOME/Library/Java/JavaVirtualMachines/zulu-8.jdk/Contents/Home export JAVA_17_HOME/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home#default java …...

编程日记 2024/2/12 18:51:05

用C语言列出Linux或Unix上的网络适配器

上代码&#xff1a; 1. #include <sys/socket.h> 2. #include <stdio.h> 3. 4. #include <netdb.h> 5. #include <ifaddrs.h> 6. 7. int main() { 8. struct ifaddrs *addresses; 9. if(getifaddrs(&addresses) -1) { 10. printf("…...

编程日记 2024/2/12 18:50:03

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/10/25 11:57:30

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/9/11 13:56:27

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/10/23 8:31:03

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/10/23 12:49:52

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/8/28 22:40:10

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2025/10/24 15:53:06

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2025/10/17 18:35:28