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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
JavaScript 创建对象
Jul 17 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
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
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP反射学习入门示例
2019/06/14 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
Python找出9个连续的空闲端口
2016/02/01 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
thinkphp5 路由分发原理
2021/03/18 PHP
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
财政局长自荐信范文
2013/12/22 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
人事局接收函
2015/01/30 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers