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自带的网页调试工具功能非常强大,许多非常实用的小功能有待大家去发掘。
猜你喜欢
- 1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件:<parent> <child
- 一次性选中并修改多个相同的变量在编码的时候,有时候要批量替换一个变量的名字,但是又不想使用批量替换,因为在不同的作用域中是可以使用相同的变量
- 1. 引言pprint的英文全称Data pretty printer,顾名思义就是让显示结果更加直观漂亮。print()和pprint()
- mock简介mock原是python的第三方库python3以后mock模块已经整合到了unittest测试框架中,不用再单独安装Mock这
- LyScript 可实现自定义汇编指令的替换功能,用户可以自行编写一段汇编指令,将程序 * 定的通用函数进行功能改写与转向操作,此功能原理是简
- Win7或Windows server 2008中IIS7支持ASP+Access解决方法:1. 让IIS7支持ASPWin7或Window
- 本文实例讲述了Python中pandas模块DataFrame创建方法。分享给大家供大家参考,具体如下:DataFrame创建1. 通过列表
- 前言之前已经讲述了一些关于;python;获取基金的一些信息,最近又有了一些新发现,和大家分享一下,这个是非常重要的内容,非常重要的内容。这
- 学习到的内容:1.一个64位的int类型值,充分利用高32位和低32位,进行相关加减以及从一个64位中拆出高32位和低32位.扩展:如何自己
- Capstone是Kali Linux自带的一款轻量级反汇编引擎。它可以支持多种硬件构架,如ARM、ARM64、MIPS、X86。该框架使用
- 本文实例讲述了基于进程内通讯的python聊天室实现方法。分享给大家供大家参考。具体如下:#!/usr/bin/env python# Ad
- 在日常的网页源码中,我们基于元素的id去定位是最万无一失的,id在单个页面中是不会重复的。但是实际工作中,很多前端开发人员并未给每个元素都编
- 在SQL Server 2005数据库还原的过程中出现错误:备份集中的数据库备份与现有的'xxxx'数据库不同,网上找了几个
- Python在字符串格式化的两种方式%format%,关于整数的输出%o:oct 八进制%d:dec 十进制%x:hex 十六进制print
- 正则表达式在 PHP 中的应用在 PHP 应用中,正则表达式主要用于:•正则匹配:根据正则表达式匹配相应的内容•正则替换:根据正则表达式匹配
- 一、为什么使用TFRecord?正常情况下我们训练文件夹经常会生成 train, test 或者val文件夹,这些文件夹内部往往会存着成千上
- 大家好,本期给大家带来Python字典11个方法的全面解析,希望对你有所帮助。字典(Dictionary)是Python提供的一种常用的数据
- Python中对象方法的定义很怪异,第一个参数一般都命名为self(相当于其它语言的this),用于传递对象本身,而在调用的时候则不必显式传
- qqbot 是一个用 python 实现的、基于腾讯 SmartQQ 协议的 QQ 机器人框架,可运行在 Linux 、 Windows 和
- 交互设计就是研究人与物体之间如何互动的问题,比如按电梯时,按钮立即高亮,同时屏幕上显示电梯现在所在楼层数,这个过程就是交互设计,而电梯按钮用