前端入门技巧之浏览器调试
前端调试是用来测试前端开发代码BUG比较常用的方式,通过调试我们可以把一些BUG提前扼杀在摇篮里。今天小千就来教大家利用Chrome谷歌浏览器进行前端的调试,web前端初学者一定要好好看一下啦。
为什么要调试?程序就是函数堆砌起来的,程序的运行就是函数的执行过程。而通过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. 事件调试
首先我们要来明确一个概念,就是同步与异步,当代码执行时,自上而下运行的为同步代码,而异步代码其中一类就是需要事件来触发。所以在代码调试中,事件体内的函数,需要在打断点后,通过该事件的行为,才能进入函数体。
本文来自千锋教育,转载请注明出处。
前端入门技巧之浏览器调试相关推荐
- css 浏览器调试中不可见_前端入门必会的初级调试技巧
本文仅仅针对前端初学者,目的是[用20%不到的时间] 学会[前端最常用的部分调试技巧],如果需要最详细的调试技巧,包括调试性能优化的相关知识,文末会补充最全的文档(chrome devtool的官方文 ...
- 使用浏览器调试前端的必备技巧
站在巨人的肩膀上更快的成长,小编最近在研究前端调试时,发现一篇总结使用浏览器调试前端的必备技巧的文章,小编忍不住一键三连并且想分享给大家.本文为转载文章,原文地址: 使用浏览器调试前端的必备技巧 一. ...
- 火狐浏览器调试js技巧_充分利用Firefox的最佳技巧和调整
火狐浏览器调试js技巧 Firefox is one of the more popular web browsers that runs on Windows, Linux, and Mac OS ...
- 前端chrome浏览器调试总结??
前端chrome浏览器调试总结 1.Console 代码中Console.log(),在此处看打印结果. 2.Network 请求与回复,在此处查看. 3.Sources 代码中放debugger后, ...
- Chrome - JavaScript调试技巧总结(浏览器调试JS)
Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...
- web前端入门指南:来看看这位大佬的学习之路吧!
开始他的表演 第一章:为什么要学习前端开发?web前端开发是什么? 从事前端开发工作差不多3年了,自己也从一个什么都不懂的小白积累了一定的理论和实践经验.编写<Web前端入门指南>系列文章 ...
- (附源码)springboot电商系统前端界面设计与浏览器兼容性研究 毕业设计 231058
基于springboot电商系统前端界面设计 摘 要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于电商系统前端界面设计与浏览器兼容性研究当然也不能排除 ...
- 利用Chrome Edge浏览器调试AndroidWebView
前言 对于混合开发的app来说,查看webView的一些报错信息是很重要的一个技巧.虽然android的WebView对于报错信息的提示并不是非常友好,好在有第三方工具可以使用. Chrome浏览器 ...
- spring boot电商系统前端界面设计与浏览器兼容性研究 毕业设计-附源码231058
摘 要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于电商系统前端界面设计与浏览器兼容性研究当然也不能排除在外,随着网络技术的不断成熟,带动了电商系统前 ...
最新文章
- 减少HQL 的MAP数
- 农林废弃物如何变废为宝?
- MIT科学家Dimitri P. Bertsekas最新2019出版《强化学习与最优控制》(附书稿PDF讲义)...
- AutoIt3(AU3)开发的智能驱动安装工具,用于系统封装,支持参数静默启动
- 修改oracle数据库的名字
- 执行SAP Hybris install.bat遇到JavaVersionChecker版本检测失败的问题
- QIcon 给按钮和动作添加图片
- 如何减小与“大牛”的差距
- ORB论文研读与代码实现
- 序列复杂度怎么看_每日算法系列【LeetCode 376】摆动序列
- Hadoop之倒排索引
- 动态代理-cglib
- python 克里金空间插值_C#教程之空间插值——克里金插值
- 模糊聚类及matlab实现,模糊聚类分析及matlab程序实现
- iPhone防止系统自动下载更新
- 纯数学教程 Page 325 例LXVIII (4) 比值判别法和达朗贝尔判别法失效的一种情形...
- nodejs调用SendCloud邮件API2.0
- Android 自定义键盘 随机键盘
- 2008年上半年中国移动通信增值市场特征
- python k折交叉验证,python中sklearnk折交叉验证
热门文章
- 算法那么重要,你还不会?ACM金牌选手教你学习数据结构与算法
- 全球最大的AI创意梦工厂!2019中国高校计算机大赛-人工智能创意赛开始报名啦!...
- 和49支战队瓜分600万奖金,这场史上奖金最多的AI大赛到底比什么?
- Python数据分析实战项目-共享单车骑行数据分析
- poj3126 Prime Path BFS
- 西安电子科技大学第16届程序设计竞赛 C题
- mysql unescape解码_PHP解密Unicode及Escape加密字符串
- python画日漫_不能错过的Python漫画
- pb数据窗口显示图片_HTAP数据库系列 | 企业级数据仓库如何应对个性化营销?
- html5中在图片上打字的语法,HTML5 canvas 基本语法