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的闭包
Dec 31 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
九种原生js动画效果
Nov 11 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
js实现抽奖功能
Nov 24 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 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
上海无线电三厂简史修改版
2021/03/01 无线电
php模板之Phpbean的目录结构
2008/01/10 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
Express使用html模板的详细代码
2017/09/18 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
数控技术专科生自我评价
2014/01/08 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
学雷锋演讲稿
2014/03/04 职场文书
5s标语大全
2014/06/23 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL