如何去调试前端JS代码?以Chrome谷歌浏览器为例
前端调试是所有前端开发者绕不过去的一个环节,很多初学者却不知道该如何去做,今天小千就来以Chrome谷歌浏览器为例,教大家如何去调试前端JS代码。
为什么要调试?
程序就是函数堆砌起来的,程序的运行就是函数的执行过程。而通过JS调试,我们可以更为直观的追踪到在程序运行中,函数的执行顺序,以及各个参数的变化。这样我们就可以快速的定位到问题所在。
1.什么是JS调试?
在程序运行中,我们总会遇到各种bug,而通过代码的追踪代码的运行顺序从而定位到问题的过程就叫做JS调试。
首先我们需要知道如何进入调试的界面,此处我们以谷歌为例,通过F12和右键检查,找到Sources就可以进入调试界面。具体界面显示如下:
红框所标示的就是我们调试常用的按键。下面我们会在实际应用场景中详细讲述每一个按键的作用。
2.单步调试
首先是普通调试,又叫单步调试。F12找到Sources后,在左侧文件夹中找到你想运行的文件,然后点击pause script execution按钮再刷新页面(F5),就可以进入单步调试
点击Step over next function call就是程序逐步调试,每点击一次,就会按照代码执行顺序,向下执行一句代码。
3.函数调试
如果亲手尝试过单步调试的小伙伴就会发现,单步调试其实并不能满足我们找bug的需求,因为单步调试是不能进入函数体内,我们也就不能跟踪函数体内变量的变化。
所以我们接下来就来学习下第三个按钮,step into next function call按钮
使用Step into按钮,我们就可以进入函数体内,在单步调试过程中,当经过函数调用时,点击Step into就可以进入该函数体内。
进入函数体内之后,继续点击Step over按钮,就可以进行函数体内的单步调试。如图所示,函数体内的变量变化就一目了然了。
但是在我们已经追踪到想要的变量变化时,函数体内的内容又很多,单步调试到函数结束就很浪费时间。这里就可以使用我们今天学习的第四个按钮,step out of current function call跳出当前函数体,跳出到之前进入函数体的代码位置。
4.断点调试
在实际项目代码量是很大的,使用单步调试就过于的浪费时间。而且有时我们是想要定位某一处的代码是否有错,所以就没有必要调试所有的代码。所以我们就可以使用断点调试,那么什么是断点调试呢?
首先,在想要定位问题的代码处,打断点,也就是代码停止执行的位置。如图所示点击红框处打该行的断点。(由于谷歌版本的不同,断点图标略有不同)
然后刷新页面(F5),就可以进入断点调试页面。点击Resume script execution按钮就可以调到下一个断点。(注意:当调到断点处时,此行代码为蓝色背景,表示此行代码即将执行但并未执行)
5.事件调试
首先我们要来明确一个概念,就是同步与异步,当代码执行时,自上而下运行的为同步代码,而异步代码其中一类就是需要事件来触发。所以在代码调试中,事件体内的函数,需要在打断点后,通过该事件的行为,才能进入函数体。
如以下代码:打断点后在刷新,其实没有效果
必须动过事件才能触发调试
看完以上的分享,你学会了吗?还想了解哪方面的知识,欢迎在评论中留言分享。
本文来自千锋教育,转载请注明出处。
如何去调试前端JS代码?以Chrome谷歌浏览器为例相关推荐
- 如何保护前端JS代码?前端js代码加密
Web前端JS代码需要保护吗? 这得具体情况具体分析. 1.如果只是写一段web页面图片轮播,或是跑马灯效果等等之类简单的功能.那不需要保护. 2.如果是精心设计一个绚丽的特效,如果想要保护这段自己付 ...
- Web 攻防之业务安全:验证码重复使用 || 前端JS代码实现的验证码 测试.
Web 攻防之业务安全:不安全验证码 测试. 验证码安全 也可以叫<全自动区分计算机和人类的图灵测试>,是一种区分用户是计算机还是人的共全自动程序.可以防止:恶意破解密码.刷票.论坛灌水. ...
- 前端js代码实现截图功能
前端js代码实现截图功能 据我所知,屏幕截图大致可以分为两种类型. 一种是真-屏幕截图,也就是我们平常QQ,微信,钉钉等社交工具里面所用到的截图.也就是说它能把我们看到的东西截取下来,所见即所得. 另 ...
- js代码调用chrome打印
js代码调用chrome打印 项目中需要使用js来调用打印功能 html部分: <button id="btn-success" onclick="printpag ...
- 常用前端JS代码与JS方法
[返回Z平台-帮助文档-首页] Z平台的核心JS方法都存储在 /webapp/js/z.js 文件中,如果想更全面的学习Z平台的开发,建议大家熟读该文件.平台前端的核心JS方法都在这. 共用JS方法 ...
- 渗透学习-学习记录-利用浏览器的开发者工具实时修改网页前端JS代码(实现绕过)
文章目录 前言 一.JS前端的修改 前言 最近学习了一些有关于JS脚本搭建网站方面的安全知识.通常来说JS是前端的页面代码,因此我们可以直接修改前端的JS代码来实现绕过,故我试着做了一下利用浏览器的开 ...
- extjs 前端js代码调用后台函数方法
前端javascript代码部分: Ext.Ajax.request( { url: '/Process/SuspendWorkFlow', //配置的后台函数路由 params: { wfIns ...
- DWR框架--让前端JS代码调用JAVA后端的方法
目录 1.DWR框架简介 2.使用步骤 2.1.pom.xml导入包 2.2.配置web.xml文件 2.2.1.先了解dwr的jar包(不同版本不一样,需注意) 2.2.2.在web.xml中增加d ...
- 前端js代码循环在页面中输出星星(很早之前代码以此记录-画星星)
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
最新文章
- 基于梯度方向、极化变换和聚类算法的图像主特征直线检测
- excel最常用的八个函数_Excel中最常用的快捷键
- 数据标准化(归一化)
- gzencode php demo,8个必备的PHP功能实例代码
- 卡尔曼滤波器算法(Kalman Filter)—— 数学推导,图文并茂
- if ‘class_name‘ not in config[0] or config[0][‘class_name‘] == ‘Merge‘:
- 敏捷开发组织【北京及其他地区QQ群】【长三角QQ群】【珠三角QQ群】
- 复制vmware overLay网络无法ping通 ping www.baidu.com可以
- 前端学习(752):全局变量和局部变量
- 习题4-8 高空坠球(20 分)
- mac上iphone4刷机与越狱(二)
- Linux上如何安装微信! 或登录网页版微信提示:为了你的帐号安全,此微信号不能登录网页微信。你可以使用Windows微信或Mac微信在电脑端登录。
- 简述窄带调频和宽带调频的_宽带调频和窄带调频的简单区别方法
- Discuz发帖如何设置默认回帖仅作者可见回帖
- 恢复系统设置或计算机点击没反应,win7系统电脑无法使用系统还原,按钮点不开的解决方法...
- Tracking-Learning-Detection原理分析
- 虚幻四C++ 添加角色动画
- for循环的auto用法
- 3年汽车软件测试工程师的经验总结
- 虚拟桌面分屏_无需分屏软件!让一台主机为两台显示器分屏工作的方法
热门文章
- 自适应注意力机制在Image Caption中的应用
- 在ECS实例的centos系统中安装Hadoop
- Iris——整合go-playground/validator参数校验Demo
- CG CTF PWN When did you born?
- Memory and Crow
- es 指定排序字段_ES里多字段分组后排序
- springboot整合websocket实现群聊
- 【笔记】c++中opencv的使用
- Ubuntu Linux 8.04系统JAVA配置方法
- C++阶段01笔记02【数据类型(整型、sizeof关键字、实型(浮点型)、字符型、转义字符、字符串型、布尔类型 bool、数据的输入)】