解析JS如何运用断点进行调试
在我们项目开发时，往往会出现未知的bug，有时候这些bug我们很难发现，所以我们就需要借助断点调试，让程序运行到某处停下来逐个排查程序是否有错误之处，我们断点调试都是在chrome浏览器下进行。首先把项目用谷歌浏览器打开。
按F12打开谷歌调试界面，然后选择Sources，这里会显示项目的JS代码，选择我们需要调试的js文件
首先我们用手动添加断点的方式：
添加断点：
介绍下下面一些按钮的含义：
首先红色区域内从左到右依次为：
- Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。
- Step over next function call：执行到下一步的函数调用（跳到下一行）。
- Step into next function call：进入当前函数。
- Step out of current function：跳出当前执行函数。
- Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。
- Pause on exceptions：异常情况自动断点设置。
绿色区域：
- scope ：显示当前断点的作用域
- watch ：点击+号可添加你所需要监控的变量或者表达式
- Call Stack 显示当前断点的环境调用栈
- Breakpoints 当前js断点列表，添加的每个断点都会出现在此处，点击列表中断点就会定位到内容区的断点上
- DOM Breakpoints 当前DOM断点列表列表
- XHR Breakpoints 当前xhr断点列表，可点击右侧
+添加断点 - Event Listener Breakpoints 事件监听器断点设置处
- Event Listeners 当前事件监听断点列表
开始调试：
调试界面：
在调试界面，我们把鼠标放在代码的每个变量上，他会显示这个变量的具体信息，这样你 就可以逐步排查BUG所在
我还有一种添加断点的方式就是在代码中需要让他停止的地方添加debugger。代码执行到此处是会停下来
解析JS如何运用断点进行调试相关推荐
- js断点和调试学习总结3
使用Chrome调试JavaScript的断点设置和调试技巧 你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方 法是用 console. ...
- python command line debug_【已解决】Mac中PyCharm中去加断点实时调试scrapy的项目
折腾: 后,在之前已经用过PyCharm去加上断点实时调试别的python程序的前提下. 下载希望可以用PyCharm也可以加断点,实时调试scrapy的项目. 不过能想到的是,scrapy这种项目, ...
- 怎么在vue的@click里面直接写js_【转】为 Node.js 贡献你的力量 ———— 调试代码
原文作者:百万扩散性甜面包 himself65 原文链接: 为 Node.js 贡献你的力量 ---- 调试代码www.himself65.com Node.js 作为一个世界级的项目,能为它贡献源 ...
- Atitit. 脚本语言的断点单步调试的设计与实现 attialx 总结 php 参照java
Atitit. 脚本语言的断点单步调试的设计与实现 attialx 总结 php 参照java 1. 断点的实现:手动断点 die和exit是等价的 1 2. 变量表的实现 1 3. print_r( ...
- VS 断点无法调试学习总结
Visual Studio 2010 断点无法调试 一.断点无法调试 1.观察是否编译Release版本. 2.再看"工具->调试->常规"下,将"要求源文件 ...
- 本地运行vue.js项目，如何更改调试的默认端口？
运行本地vue.js项目,如何更改调试的默认端口? 之前学会了安装和使用node.js.npm.cnpm.webpack等相关的一些知识和技巧, 但是在搭建vue.js框架,进行开发的时候,会发现在进 ...
- PHP解析js的escape()函数编码数据
// php解析js的escape()函数编码数据function js_unescape($str){$ret = '';$len = strlen($str);for ($i = 0; $i &l ...
- 【行情采集】解析JS 1秒获取5000支股票瞬时行情（送代码，含筛选方法）
提示:采集行情仅用于个人量化分析,不做为交易依据 解析JS 1秒获取5000支股票瞬时行情(送代码,含筛选方法) 前言 一.JS采集? 二.代码如下 总结 前言 量化分析,行情先行. 一.JS采集? ...
- python设置断点_python调试 设置断点
原博文 2013-12-09 11:29 − 1在所需要调试的地方加入如下代码: import pdb pdb.set_trace() 2调试代码常用命令: 实例请见参考文献: 1http://www ...
最新文章
- 关于Map迭代循环，key和value的顺序问题
- DefaulSqlSession 和SqlSessionTemplate 的区别是什么？
- jquery检索name_jquery怎么获取name属性值？
- android代码清除锁屏密码,清除Android手机锁屏密码的三个小妙招
- java 等分切割图片_java 将list按指定大小等分，最后多余的单独一份
- 我的swagger上面怎么没有models_浅析特斯拉Model S的采样板
- 【CVPR2019】 教程 Tutorials List
- OpenSelfSup: Open-MMLab自监督表征学习代码库
- 贪心法—— LeetCode45 跳跃游戏II(跳跃游戏进阶版)
- 西瓜书读书笔记4-Sigmoid函数
- java工作流（原生）
- for linux shell 菜鸟_Linux 命令大全 | 菜鸟教程
- Vue todos代办事项功能
- 在项目中如何做图片优化
- Word公式转LaTex神器
- linux下打印图片不显示出来的,为什么打印机打印不了图片_解决打印机打印不了图片的方法－系统城...
- App推送推了10万打开100？3招提高消息推送（Push）到达率
- 如何理解实践标准是确定性和不确定性的统一
- 学习软件工程的知名网站
- 第27篇 联盟链 + metamask + remix 玩转智能合约