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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
jquery实现显示已选用户
Jul 21 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
layui文件上传实现代码
May 20 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 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
Parse正式发布开源PHP SDK
2014/08/11 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
Python中functools模块函数解析
2017/03/12 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
详解Python self 参数
2019/08/30 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
奠基仪式主持词
2014/03/20 职场文书
黄金酒广告词
2014/03/21 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
中职招生先进个人材料
2014/08/31 职场文书
好人好事演讲稿
2014/09/01 职场文书
工作时间证明
2015/06/15 职场文书
交流会主持词
2015/07/02 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
Mysql 如何查询时间段交集
2021/06/08 MySQL
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python