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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
jQuery MD5加密实现代码
Mar 15 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
js定时器实例分享
Dec 20 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php树型类实例
2014/12/05 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
学习Node.js模块机制
2016/10/17 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python简单分割文件的方法
2015/07/30 Python
Django框架视图介绍与使用详解
2019/07/18 Python
python写程序统计词频的方法
2019/07/29 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Python笔记之工厂模式
2019/11/20 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书