9种使用Chrome Firefox 自带调试工具调试javascript技巧


Posted in Javascript onDecember 22, 2017

我们调试Javascript一般会用到Chrome或Firefox自带的调试工具,本文列出了几条用于调试Javascript的技巧,掌握它们,让我们花更少的时间来解决错误和bug,从而提高开发效率。

1. debugger

除了console.log, debugger是我们最喜欢、快速的调试工具。执行代码后,Chrome会在执行时自动停止。你甚至可以把它封装成条件,只在需要时才运行。

if (thisThing) { 
 debugger; 
}

2. 用表格显示对象

有时, 有一组复杂的对象要查看。可以通过console.log查看并滚动浏览,亦或者使用console.table展开,更容易看到正在处理的内容!

var animals = [ 
 { animal: 'Horse', name: 'Henry', age: 43 }, 
 { animal: 'Dog', name: 'Fred', age: 13 }, 
 { animal: 'Cat', name: 'Frodo', age: 18 } 
]; 
 
console.table(animals);

9种使用Chrome Firefox 自带调试工具调试javascript技巧

3. 使用不同屏幕尺寸

在桌面上安装不同移动设备模拟器非常棒,但现实确是不可行的。如何调整窗口大小呢?Chrome提供了所需的一切。跳到控制台并点击‘切换设备模式'按钮。观察窗口变化即可!

 9种使用Chrome Firefox 自带调试工具调试javascript技巧

4. 使用 console.time() 和 console.timeEnd() 测试循环

要得知某些代码的执行时间,特别是调试缓慢循环时,非常有用。 甚至可以通过给方法传入不同参数,来设置多个定时器。来看看它是怎么运行的:

console.time('Timer1'); 
 
var items = []; 
 
for(var i = 0; i < 100000; i++){ 
 items.push({index: i}); 
} 
 
console.timeEnd('Timer1');

运行产生了一下结果:

 9种使用Chrome Firefox 自带调试工具调试javascript技巧

5. 将代码格式化后再调试JavaScript

有时代码会在生产环境出问题,但是你的source maps没有部署在生产环境上。不要怕。Chrome可以将您的JavaScript文件格式化。格式化后的代码虽然不像真实代码那样有用,但至少可以看到发生了什么。点击 Chrome控制台中的源代码查看器中的{}按钮即可。

 9种使用Chrome Firefox 自带调试工具调试javascript技巧

6. 观察特定函数的调用及参数
在Chrome控制台中,可以观察特定的函数。每次调用该函数,就会打印出传入的参数。

var func1 = function(x, y, z) { 
//.... 
};

输出:

 9种使用Chrome Firefox 自带调试工具调试javascript技巧

这是查看传入函数参数的好方法。但是,如果控制台提示我们形参的数目就更好了。在上面的例子中,func1期望3个参数,但是只有传入了2个参数。如果在代码中没有处理这个参数,就很可能出错。

7. 在控制台中快速访问元素

控制台中比querySelector更快的方法是使用美元符号,$('css-selector')将返回CSS选择器的第一个匹配项。$$('css-selector')将返回所有匹配项。如果多次使用一个元素,可以把它保存为一个变量。

 9种使用Chrome Firefox 自带调试工具调试javascript技巧

8. Postman 很棒(但Firefox更快)

许多开发人员使用Postman查看ajax请求。Postman真的很优秀。但打开一个新的窗口,写入请求对象,然后再来测试它们,显得很麻烦。

有时使用浏览器更容易。

当你使用浏览器查看时,如果请求一个密码验证页面,不需要担心身份验证的cookie。下面看,在Firefox中如何编辑并重新发送请求。

打开控制台并切换到network选项卡。右击所需的请求,然后选择编辑并重新发送。现在可以改变任何想要的改的。更改标题并编辑参数,然后点击重新发送。

下面我用不同的属性发起的两次请求:

 9种使用Chrome Firefox 自带调试工具调试javascript技巧

9. 中断节点更改

DOM是一个有趣的东西。有时候它会改变,你并不知道为什么。 但是,当您调试JavaScript时,Chrome可以在DOM元素发生更改时暂停。你甚至可以监视它的属性。在Chrome控制台中,右击该元素,然后在设置中选择中断:

9种使用Chrome Firefox 自带调试工具调试javascript技巧

Chrome和Firefox自带的网页调试工具功能非常强大,许多非常实用的小功能有待大家去发掘。

Javascript 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
javascript无刷新评论实现方法
May 13 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 #Javascript
原生JS写Ajax的请求函数功能
Dec 22 #Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 #Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 #Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 #Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 #Javascript
Webpack框架核心概念(知识点整理)
Dec 22 #Javascript
You might like
使用swoole扩展php websocket示例
2014/02/13 PHP
php实例分享之二维数组排序
2014/05/15 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
js的event详解。
2006/09/06 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
Vue头像处理方案小结
2018/07/26 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
python实现的生成word文档功能示例
2019/08/23 Python
Django REST framwork的权限验证实例
2020/04/02 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
行政助理求职自荐信
2013/10/26 职场文书
应届生护士求职信
2013/11/01 职场文书
光盘行动倡议书
2014/02/02 职场文书
个人授权委托书范本
2014/04/03 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL