9种使用Chrome Firefox 自带调试工具调试javascript技巧
作者:wdc 发布时间:2023-07-19 01:03:48
我们调试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);
3. 使用不同屏幕尺寸
在桌面上安装不同移动设备模拟器非常棒,但现实确是不可行的。如何调整窗口大小呢?Chrome提供了所需的一切。跳到控制台并点击‘切换设备模式'按钮。观察窗口变化即可!
4. 使用 console.time() 和 console.timeEnd() 测试循环
要得知某些代码的执行时间,特别是调试缓慢循环时,非常有用。 甚至可以通过给方法传入不同参数,来设置多个定时器。来看看它是怎么运行的:
console.time('Timer1');
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}
console.timeEnd('Timer1');
运行产生了一下结果:
5. 将代码格式化后再调试JavaScript
有时代码会在生产环境出问题,但是你的source maps没有部署在生产环境上。不要怕。Chrome可以将您的JavaScript文件格式化。格式化后的代码虽然不像真实代码那样有用,但至少可以看到发生了什么。点击 Chrome控制台中的源代码查看器中的{}按钮即可。
6. 观察特定函数的调用及参数
在Chrome控制台中,可以观察特定的函数。每次调用该函数,就会打印出传入的参数。
var func1 = function(x, y, z) {
//....
};
输出:
这是查看传入函数参数的好方法。但是,如果控制台提示我们形参的数目就更好了。在上面的例子中,func1期望3个参数,但是只有传入了2个参数。如果在代码中没有处理这个参数,就很可能出错。
7. 在控制台中快速访问元素
控制台中比querySelector更快的方法是使用美元符号,$('css-selector')将返回CSS选择器的第一个匹配项。$$('css-selector')将返回所有匹配项。如果多次使用一个元素,可以把它保存为一个变量。
8. Postman 很棒(但Firefox更快)
许多开发人员使用Postman查看ajax请求。Postman真的很优秀。但打开一个新的窗口,写入请求对象,然后再来测试它们,显得很麻烦。
有时使用浏览器更容易。
当你使用浏览器查看时,如果请求一个密码验证页面,不需要担心身份验证的cookie。下面看,在Firefox中如何编辑并重新发送请求。
打开控制台并切换到network选项卡。右击所需的请求,然后选择编辑并重新发送。现在可以改变任何想要的改的。更改标题并编辑参数,然后点击重新发送。
下面我用不同的属性发起的两次请求:
9. 中断节点更改
DOM是一个有趣的东西。有时候它会改变,你并不知道为什么。 但是,当您调试JavaScript时,Chrome可以在DOM元素发生更改时暂停。你甚至可以监视它的属性。在Chrome控制台中,右击该元素,然后在设置中选择中断:
Chrome和Firefox自带的网页调试工具功能非常强大,许多非常实用的小功能有待大家去发掘。
猜你喜欢
- 早就想用一个系列的文章来写AJAX,让自己头到尾理一遍,更好的掌握基础知识(昨天的面试受打击了,基础知识很重要).要是写的好,也许也可以帮助
- 在用户体验这个行业,经常会听到,可用性,可访问性这样专业的名词,但是,事实上在很多产品实现过程里都忽略了这一点!WHY?举个很简单的例子,用
- 这几天无聊的很看着china.nba.com焦点图效果捣鼓了一下有待完善!兼容性:IE6 , IE7 &nb
- 很简单,只需建立一个worksheet和Excel相关的信息就可以了具体代码见下:<%set xlApp =&nb
- '*************************************************'函数名:getMaxO
- 以下的实例为去除指定表中数据类型是VARCHAR,CHAR,NVARCHAR的字段值中的不可见字符。 注释:此处只去掉前后的不可见字符,不包
- 在日常的前端开发工作中,我们会经常的与HTML、javascript、css等语言打交道,和一门真正的语言一样,计算机语言也有它的字母表、语
- 运行下面的代码你就可以清楚的认识到这两个参数的用法,innerText只能动态的改变指定元素内的文本内容,而innerHTML则不仅仅可以改
- 我差不多是与做web design的同时接触的flash design,因为那会普遍认为flash神通广大、无所不能。这些年我看Adobe的
- 喜欢Gucci的优雅吗?或者痴迷美国普普艺术?谷歌中国最近改版的谷歌个性化首页iGoogle集中了近1500个主题,包括近120多位全球顶级
- 最近心血来潮加上有点闲情,动手写了第一个JavaScript版的俄罗斯方块Easy Tetris.先上Easy Tetris俄罗斯方块游戏截
- js关于 byval 与 byref 二者区别: byval 传递数值,实参和形参分处不同的内存单元,互不干扰! byref 传递地址,实参
- hmac主要应用在身份验证中,它的使用方法是这样的:1. 客户端发出登录请求(假设是浏览器的GET请求)2. 服务器返回一个随机值,并在会话
- 没有使用动态语句直接报错 错误的 代码如下:alter proc testpapers as begin declare @tems nva
- 以前的Dreamweaver中是没有图片处理功能的,即使你要处理也只能使用CSS中的相关滤镜进行一些效
- IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固
- javascript版 俄罗斯方块(Russian box)小游戏,喜欢的朋友可以玩玩。对源代码感兴趣的朋友也可以研究一下。玩法介绍:可以输
- 人工生命—群集智能—蚁群算法js版前言(摘自网上,代码是自己想出来的)对于普通大众来说,“人工生命”、“群集智能”、“仿生机器人”等等可能是
- Mysql数据库备份和还原常用的命令是进行Mysql数据库备份和还原的关键,没有命令,什么都无从做起,更谈不上什么备份还原,只有给系统这个命
- 大名鼎鼎的FCKeditor终于在最近发布新版本了,与增加版本号不同,这次完全把它改名了,更名为CKeditor。这应该是和它的开发公司CK