Chrome开发者工具实战:调试三剑客

news2025/4/17 5:30:14

在前端开发的世界里,Chrome开发者工具就是我们的瑞士军刀,它集成了各种强大的功能,帮助我们快速定位和解决代码中的问题。今天,就让我们一起来看看如何使用Chrome开发者工具中的“调试三剑客”:断点调试、调用栈跟踪和控制台输出变量。

一、断点调试:代码的“检查站”

断点调试就像是在高速公路上设置的检查站,当代码执行到某个特定位置时,它会停下来,让我们可以查看当前的变量值、调用栈等信息,看看代码是否按预期运行。

1. 设置断点

在Chrome开发者工具中,打开“Sources”面板,找到你要调试的JavaScript文件。点击代码行号的左侧,设置一个断点。当代码执行到这一行时,会自动暂停。

2. 暂停与恢复

代码暂停后,你可以查看当前的变量值、调用栈等信息。点击“Resume script execution”按钮(或按F8),代码将继续执行。

3. 单步调试
  • Step Over:执行当前行,不进入函数内部。

  • Step Into:进入当前行调用的函数内部。

  • Step Out:执行完当前函数并退出。

4. 条件断点

仅在您提供的条件为 true 时触发的条件断点。例如,只有在某个变量达到特定值时才暂停代码执行。

let count = 0;
while (count < 10) {
    count++;
    // 在这里设置条件断点,当 count === 5 时暂停
}
5. 异常断点

在捕获的异常或未捕获的异常上设置断点。这可以帮助你快速定位到代码中抛出异常的地方。

案例:异常断点

function divide(a, b) {
    if (b === 0) {
        throw new Error("除数不能为零");
    }
    return a / b;
}

function calculate() {
    let result = divide(10, 0); // 这里会抛出异常
    return result;
}

calculate();

调试步骤:

  1. 打开Chrome开发者工具,切换到“Sources”面板。

  2. 在“Debugger”部分,找到“Breakpoints”选项。

  3. 勾选“Pause on exceptions”选项。

  4. 执行代码,当代码抛出异常时,开发者工具会自动暂停在抛出异常的行。

6. XHR断点

当请求的网址与您提供的子字符串匹配时触发的XHR断点。这在调试网络请求时非常有用。

案例:XHR断点

function fetchData() {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.example.com/data");
    xhr.onload = function() {
        console.log("Data loaded:", xhr.responseText);
    };
    xhr.send();
}

fetchData();

调试步骤:

  1. 打开Chrome开发者工具,切换到“Sources”面板。

  2. 在“Debugger”部分,找到“XHR/Breakpoints”选项。

  3. 输入要匹配的URL子字符串,例如“example.com”。

  4. 执行代码,当发送匹配的XHR请求时,开发者工具会自动暂停。

二、调用栈跟踪:代码的“侦探”

调用栈跟踪就像是侦探破案时的线索追踪,它记录了函数调用的顺序,帮助我们找到代码中的“罪魁祸首”。

案例:调用栈跟踪

function add(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}

function calculate() {
    let sum = add(5, 10);
    let product = multiply(sum, 2);
    return product;
}

calculate();

调试步骤:

  1. 打开Chrome开发者工具,切换到“Sources”面板。

  2. multiply函数内部设置一个断点。

  3. 执行代码,当代码暂停时,打开“Call Stack”面板。

  4. 查看调用栈,可以看到函数调用的顺序:calculate  -> multiply

  5. 点击调用栈中的某一行,可以跳转到对应的函数定义处。

三、控制台输出变量:实时查看变量值

控制台输出变量就像是给代码加了一个“监视器”,可以实时查看变量的值,帮助我们了解代码的运行状态。

1. 输出变量

在代码中使用console.log()console.info()console.warn()console.error()等方法输出变量。

let name = "John";
let age = 30;
console.log("Name:", name);
console.log("Age:", age);
2. 查看输出

打开Chrome开发者工具的“Console”面板,查看输出的变量值。

3. 条件输出

可以使用console.log()的条件输出功能,只在满足特定条件时输出变量。

let age = 30;
if (age > 25) {
    console.log("Age is greater than 25:", age);
}

四、实战示例

下面是一个综合示例,展示如何使用Chrome开发者工具进行调试:

function calculateSum(a, b) {
    let sum = a + b;
    console.log("Sum:", sum); // 输出变量
    return sum;
}

function main() {
    let a = 5;
    let b = 10;
    let result = calculateSum(a, b);
    return result;
}

// 设置断点
let finalResult = main();

调试步骤:

  1. 打开Chrome开发者工具,切换到“Sources”面板。

  2. 找到包含上述代码的文件,点击main函数内部的某一行设置断点。

  3. 执行代码,当代码暂停时,查看调用栈和变量值。

  4. 使用单步调试功能,逐步执行代码,观察变量的变化。

  5. 查看“Console”面板中的输出,确认变量值是否符合预期。

五、总结

Chrome开发者工具中的断点调试、调用栈跟踪和控制台输出变量是web逆向的得力助手。通过这工具,我们可以快速逆向得到的算法和逻辑是否正确。

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

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

相关文章

C++/Qt 模拟sensornetwork的工作

C/Qt 可视化模拟sensornetwork的工作 C/Qt 模拟sensornetwork的工作 C/Qt 可视化模拟sensornetwork的工作内容简介&#xff08;一&#xff09; 需求和规格说明&#xff08;1&#xff09;问题描述&#xff08;2&#xff09;设计目的&#xff08;3&#xff09;基本要求&#xff0…

ffmpeg音频分析

对一个16k 单声道音频&#xff0c;生成频谱图 ./ffmpeg -i input.wav -lavfi "showspectrumpics800x400:modecombined:scalelin:gain1.5" spectrum.png

【多线程】CAS机制

目录 一. CAS的概念 二. CAS的原理 三.标准库中的CAS 四. CAS的应用 &#xff08;1&#xff09;原子类的使用 &#xff08;2&#xff09; 自旋锁的实现 五. CAS的ABA问题 一. CAS的概念 CAS&#xff08;Compare And Swap&#xff09;机制是一种无锁的并发控制技术&#…

音视频(四)android编译

前言 前面已经讲了在windows上应用了&#xff0c;这章主要讲述android上编译 1&#xff1a;环境 git 如果失败 直接跑到相应网站 手动下载 ubuntu22.* android ndk r21e download:https://developer.android.google.cn/ndk/downloads/index.html?hluk 为什么用这个&#xff0…

Chapter07_图像压缩编码

文章目录 图像压缩编码图像压缩编码基础图像压缩的基本概念信息相关信息冗余信源编码及其分类 图像编码模型信源编码器模型信源解码器模型 数字图像的信息熵信源符号码字平均长度信息熵信息量 变长编码费诺码霍夫曼编码 位平面编码格雷码 图像压缩编码 数字图像的压缩是指在满…

团体设计程序天梯赛L2-025 # 分而治之

文章目录 题目解读输入格式输出格式 思路Ac Code参考 题目解读 在战争中&#xff0c;我们希望首先攻下敌方的部分城市&#xff0c;使其剩余的城市变成孤立无援&#xff0c;然后再分头各个击破。为此参谋部提供了若干打击方案。本题就请你编写程序&#xff0c;判断每个方案的可…

Linux网络套接字

Socket 编程 UDP 本章将函数介绍和代码编写实战一起使用。 IPv4 的 socket 网络编程,sockaddr_in 中的成员 struct in_addr.sin_addr 表示 32 位 的 IP 地址 但是我们通常用点分十进制的字符串表示 IP 地址,以下函数可以在字符串表示和in_addr 表示之间转换; 字符串转 in_addr…

看爬山虎学本领 软爬机器人来创新 各种场景能适应

*本文只做阅读笔记分享* 一、灵感来源&#xff1a;向植物取经 大家好&#xff01;今天来聊一款超酷的软爬机器人&#xff0c;它的灵感来自会攀爬的植物——爬山虎。 大家都知道&#xff0c;爬墙高手爬山虎能在各种复杂墙面轻松生长攀爬&#xff0c;可现有的攀爬机器人在复杂…

极客天成NVFile:无缓存直击存储性能天花板,重新定义AI时代并行存储新范式

在AI算力需求呈指数级爆发的今天&#xff0c;存储系统正面临一场前所未有的范式革命。传统存储架构中复杂的缓存机制、冗余的数据路径、僵化的扩展能力&#xff0c;已成为制约千卡GPU集群算力释放的重要因素。极客天成NVFile并行文件存储系统以全栈并行化架构设计和无缓存直通数…

Java实现N皇后问题的双路径探索:递归回溯与迭代回溯算法详解

N皇后问题要求在NN的棋盘上放置N个皇后&#xff0c;使得她们无法互相攻击。本文提供递归和循环迭代两种解法&#xff0c;并通过图示解释核心逻辑。 一、算法核心思想 使用回溯法逐行放置皇后&#xff0c;通过冲突检测保证每行、每列、对角线上只有一个皇后。发现无效路径时回退…

谷歌开源单个 GPU 可运行的Gemma 3 模型,27B 超越 671B 参数的 DeepSeek

自从 DeepSeek 把训练成本打下来之后&#xff0c;各个模型厂家现在不再堆参数进行模型的能力对比。而是转向了训练成本优化方面&#xff0c;且还要保证模型能力不减反增的效果。包括使用较少的模型参数&#xff0c;降低 GPU 使用数量&#xff0c;降低模型内存占用等等技术手段。…

C++_类和对象(下)

【本节目标】 再谈构造函数Static成员友元内部类匿名对象拷贝对象时的一些编译器优化再次理解封装 1. 再谈构造函数 1.1 构造函数体赋值 在创建对象时&#xff0c;编译器通过调用构造函数&#xff0c;给对象中各个成员变量一个合适的初始值。 class Date { public:Date(in…

Docker设置代理

目录 前言创建代理文件重载守护进程并重启Docker检查代理验证 前言 拉取flowable/flowable-ui失败&#xff0c;用DaoCloud源也没拉下来&#xff0c;不知道是不是没同步。索性想用代理拉镜像。在此记录一下。 创建代理文件 创建docker代理配置 sudo mkdir -p /etc/systemd/s…

一键自动备份:数据安全的双重保障

随着数字化时代的到来&#xff0c;数据已成为企业和个人不可或缺的核心资产。在享受数据带来的便捷与高效的同时&#xff0c;数据丢失的风险也随之增加。因此&#xff0c;备份文件的重要性不言而喻。本文将深入探讨备份文件的重要性&#xff0c;并介绍两种实用的自动备份方法&a…

HeidiSQL:多数据库管理工具

HeidiSQL 是一款广受欢迎的免费开源数据库管理工具&#xff0c;专为数据库管理员及开发者设计。无论您是刚接触数据库领域的新手&#xff0c;还是需要同时处理多种数据库系统的专业开发者&#xff0c;该工具都能凭借其直观的界面和强大的功能&#xff0c;助您轻松完成数据管理任…

医药档案区块链系统

1. 医生用户模块​​ ​​目标用户​​&#xff1a;医护人员 ​​核心功能​​&#xff1a; ​​检索档案​​&#xff1a;通过关键词或筛选条件快速定位患者健康档案。​​请求授权​​&#xff1a;向个人用户发起档案访问权限申请&#xff0c;需经对方确认。​​查看档案​…

蓝桥云客--浓缩咖啡液

4.浓缩咖啡液【算法赛】 - 蓝桥云课 问题描述 蓝桥杯备赛选手小蓝最近刷题刷到犯困&#xff0c;决定靠咖啡续命。他手上有 N 种浓缩咖啡液&#xff0c;浓度分别是 A1​%, A2​%, …, AN​%&#xff0c;每种存货都是无限的。为了提神又不炸脑&#xff0c;小蓝需要按比例混合这…

SQLark(百灵连接):一款面向信创应用开发者的数据库开发和管理工具

SQLark&#xff08;百灵连接&#xff09;是一款面向信创应用开发者的数据库开发和管理工具&#xff0c;用于快速查询、创建和管理不同类型的数据库系统。 目前可以支持达梦数据库、Oracle 以及 MySQL。 SQL 智能编辑器 基于语法语义解析实现代码补全能力&#xff0c;为你提供…

计算机视觉——为什么 mAP 是目标检测的黄金标准

概述 在目标检测领域&#xff0c;有一个指标被广泛认为是衡量模型性能的“黄金标准”&#xff0c;它就是 mAP&#xff08;Mean Average Precision&#xff0c;平均精确率均值&#xff09;。如果你曾经接触过目标检测模型&#xff08;如 YOLO、Faster R-CNN 或 SSD&#xff09;…

Frame Of Reference压缩算法

文章目录 1_概述2_算法基本步骤3_过程优化4_优势以及局限5_模拟实现6_总结 1_概述 Frame of Reference&#xff08;FoR&#xff09;压缩算法 是一种用于压缩数值数据的算法&#xff0c;特别是在处理大规模数据集时&#xff0c;利用数据的局部性和重复性来减少存储和传输的开销…