浅谈浏览器调试

news2024/11/24 10:25:44

浅谈浏览器调试

    • 1. 假设你在控制台打印了一个变量 , 想在浏览器追踪从哪里来要到那里去:
    • 2. 开启source maps
    • 3. watch 可以监听当前变量, 也可以在scope中看当前作用域的变量:
    • 4. call Stack 可以查看当前调用链, 找到对应代码进行debugger
    • 5. 你还可以在webpack 中找到你想找的代码源文件, 或者ctrl+P 输入文件名也可以快速找到
    • 6. 如果你想要快速找到某一个接口在代码的哪一个文件中调用?

1. 假设你在控制台打印了一个变量 , 想在浏览器追踪从哪里来要到那里去:

在这里插入图片描述

2. 开启source maps

在这里插入图片描述

3. watch 可以监听当前变量, 也可以在scope中看当前作用域的变量:

在这里插入图片描述
在这里插入图片描述

4. call Stack 可以查看当前调用链, 找到对应代码进行debugger

在这里插入图片描述

5. 你还可以在webpack 中找到你想找的代码源文件, 或者ctrl+P 输入文件名也可以快速找到

在这里插入图片描述

6. 如果你想要快速找到某一个接口在代码的哪一个文件中调用?

在这里插入图片描述

在这里插入图片描述

至此, 全篇结束。

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

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

相关文章

TCP / IP 五层网络模型

目录 一、协议的概念 1.1 网络通信为什么需要使用协议 二、网络模型 2.1 OSI 七层模型 三、TCP / IP 五层网络模型 四、协议分层的背景下,数据如何通过网络传输? 4.1 再谈协议 4.2 封装 / 分用 vs 序列化 / 反序列化 4.3 什么是端口号 4.4 什么…

创新实践|导致创新团队敏捷实践失败的12种原因

揭示敏捷实践中常犯的12大错误,了解如何避免这些敏捷失败 陷阱,找出问题根源并采取有效改进措施,提高项目成功率。立即连线 Runwise.co 社区敏捷专家获得专业建议,或 Runwise.co 在线学习敏捷方法实战课程,提升您和团队…

layui入门使用文档(包含几个重要的组件)

一、引言 :注意部分配置是用到了和jsp交互使用在HTML时需要修改 1.1 介绍 https://www.layuiweb.com/ 在官网首页,可以很方便的下载LayUI LayUI 是一款经典模块化前端 UI 框架,我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。 …

Vue3之setup参数介绍

setup(props, context) {... }一、参数 使用setup函数时,它将接受两个参数: propscontext 让我们更深入地研究如何使用每个参数 二、Props setup函数中的第一个参数是props。正如在一个标准组件中所期望的那样,setup函数中的props是响应…

Elasticsearch:Explicit mapping - 显式映射

显式映射相比较动态映射(Dynamic mapping)是需要我们在索引创建时就定义字段及其类型。这个和我们传统的 RDMS 数据库一样,在我们写入数据到数据库之前,我们需要工整地定义好每个字段及其类型和长度。Elasticsearch 既可以使用显式…

【C++】二叉搜索树(概念、实现、应用)

前言: 此前我们在C语言实现数据结构的时候学习过二叉树,但是那个时候我们没有深入学习二叉搜索树。本章重提二叉树并详解二叉搜索树有下面两个原因: 1、为我们下一章学习set和map做准备;2、详解我们进阶一点的二叉树的面试OJ题&a…

【C++学习】日积月累——二叉搜索树详解

一、二叉搜索树 1.1 二叉搜索树概念 二叉搜索树又称二叉排序树,它或者是一棵树,或者是具有以下性质的二叉树: 若它的左子树不为空,则左子树上所有节点的值都小于根节点的值;若它的右子树不为空,则右子树上…

程序员常用的代码比较工具,你更喜欢哪款?

目录 💡 Linux 命令行的对比工具 一. diff 二. vimdiff命令 💡 GUI 比对工具 三. WinMerge 四. Diffuse 五. Code Compare 六. Beyond Compare 七. UltraCompare 八. Altova DiffDog 九. Kompare 十. Meld 十一. XXdiff 十二. KDiff3 十…

拓扑排序模板及例题

概念 一个有向无环图必然存在一个拓扑序列与之对应。 流程: 先将所有入度为0的节点入队将队列中的节点出队,出队序列就是对应拓扑序。对于弹出的节点x,遍历x所有出度y,对y进行入读减一操作检查入度减一之后的节点y,…

慈航公益·高莞乡情行

2023年4月9日,慈航公益高莞乡情行---高村陈屋第二届“敬老睦宗情暖乡土”活动日暨“英华教育奖学基金”成立大会在高村陈屋如期举行。 高村陈屋位于河源市连平县境内,为了赶上10点开始的活动,清晨六点半,志愿者们便从慈航出发&am…

12电感的应用

目录 一、电源电路使用 1、设计实例 二、高频电路中使用 1、选择Q值高的电感器 2、选择自谐振频率高的电感器 3、选择电感偏差小的电感器 三、控制振荡频率 四、确保高频信号的隔离 五、共模轭流线圈 一、电源电路使用 如式(5)所示,…

数码照片管理系统Damselfly

什么是 Damselfly ? Damselfly 是一个基于服务器的数码照片管理系统。Damselfly 旨在管理基于文件夹的大型照片集合,特别关注快速搜索和关键字标记工作流程。Damselfly 包含强大的机器学习功能,可帮助您识别照片及其主体,包括人脸…

使用Socks5代理保障Windows网络安全

摘要:Socks5代理是一种在Windows系统中保障网络安全的有效方法。本文将详细介绍什么是Socks5代理,以及如何在Windows系统中使用Socks5代理来加强网络安全。同时,我们还将探讨如何编写代码来使用Socks5代理来保障应用程序的网络安全。 正文&am…

报表VS分析:为什么报表做不完?老板到底想要什么?

各位数据的朋友,大家好,我是老周道数据,和你一起,用常人思维数据分析,通过数据讲故事。 上一讲和大家讲了分析模型中的战斗机——财务分析模型。通过奥威BI软件的行计算模型来开发财务分析报表异常地简单,…

安装Django

1. 在物理环境安装Django Python官方的PyPi仓库为我们提供了一个统一的代码托管仓库,所有的第三方库,甚至你自己写的开源模块,都可以发布到这里,让全世界的人分享下载 pip是最有名的Python包管理工具 。提供了对Python包的查找、…

Linux 动态库的制作与使用

目录 动态库的制作和使用 动态库的制作和使用 原始结构如下: 先进入calc文件,并生成与位置无关的.o文件 接着生成动态文件库,使用ll指令可以看到,库名为绿色,linux中绿色的文件一般都是可执行文件 将其生成的lib…

如何快速搭建一个SpringBoot项目

前面我们了解了SpringBoot背景和特点,本节我们主要介绍如何快速构建一个SpringBoot项目,以此来提升日常开发效率。 SpringBoot是搭建应用的手脚架,由Spring公司的核心团队在2013年开始研发、2014年4月发布第一个版本的全新开源的轻量级框架。…

如何平衡倾斜摄影的三维模型轻量化数据文件大小和质量效果?

如何平衡倾斜摄影的三维模型轻量化数据文件大小和质量效果? 倾斜摄影超大场景的三维模型数据文件大小的具体范围取决于多种因素,如原始数据的复杂度、轻量化处理的方式和压缩算法等。一般而言,经过轻量化处理后,数据文件大小可以减…

centos7安装nginx及uwsgi部署django项目

1、安装配置uwsgi pip install uwsgi 2、在项目根目录下创建image_ocr_uwsgi.ini配置文件 [uwsgi] # 对外提供http服务的端口 http :9000 # 用于和nginx进行数据交互的端口 socket 127.0.0.1:8001 # django程序的主目录 chdir /home/image_process/image_ocr/image_ocr #…

【计算机架构】响应时间和吞吐量 | 相对性能 | 计算 CPU 时间 | 指令技术与 CPI | T=CC/CR, CC=IC*CPI

目录 0x00 响应时间和吞吐量(Response Time and Throughput) 0x01 相对性能(Relative Performance) 0x02 执行时间测量(Measuring Execution Time) 0x03 CPU 时钟(Clocking) 0x…