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

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

news 2025/9/10 11:06:04

今天来说个比较实用的东西
用浏览器开发者工具 对 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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/8/25 23:31:20

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/9/7 8:52:40

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/9/9 10:12:51

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/9/9 10:12:01

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/8/11 21:47:18

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/9/9 14:51:30

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/8/21 2:18:11

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/9/1 10:25:23