前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >聊聊调试的那些事,超实用!!!

聊聊调试的那些事,超实用!!!

作者头像
小丑同学
发布2020-09-21 15:44:19
5250
发布2020-09-21 15:44:19
举报
文章被收录于专栏:小丑的小屋

今天给大家分享的是开发中调试的那些事,在开发中我们最害怕也是最常见的就是出现bug,然后去修改bug,那么怎么去快速定位bug的位置和原因呢?这个时候调试显得尤为重要,也就是我们平时常说的"打断点"。当然这里说的浏览器是chrome,毕竟"浏览器之多独爱chrome"。

01

先来一波F12

windows快捷键shift+ctrl+J

Mac快捷键Command+Option+J

如上图所示,我们可以看到console的tab切换页,console里面可以看到浏览器报错,警告,日志输出,执行脚本等一些操作。

在上图里我们可以看到console的一些方法,下面我们列举几个我们平时经常用到的做一下阐述:

console.log

代码语言:javascript
复制
console.log("小丑")

这个方法用于在console窗口输出信息,可以接受多个参数,将它们的结果一同输出,当然也可以使用占位符。

平时我们打开上面页面我们可以看到控制台出现这个效果,是怎么实现的呢?

代码语言:javascript
复制
 window.console && window.console.log 
 && (console.log("你在电脑前看这段文字,\n写文字的人在百度等你。\nN年前你来到了这个世界,\nN年后你想改变世界。\n\n期待你脚踏祥云,\n与百度一起改变世界。\n"),
 console.log("%c百度2020校园招聘简历提交:http://dwz.cn/XpoFdepe", "color:red"))

占位符主要有:

%s

支持字符

%d或者%i

支持整数

%f

支持浮点

%o

支持对象

%c

支持css字符串

console.info

代码语言:javascript
复制
console.info("提示小丑")

这个方法用于输出提示性信息,同时在输出信息的前面会加一个蓝色图标。

这个蓝色图标,最近谷歌好像更新之后和谐了,IE浏览器这个蓝色图标还正常存在

console.error

代码语言:javascript
复制
console.error("错误")

这个方法是用来输出错误信息的,在最前面会有一个红叉的标志,在最后会显示出错的位置

console.warn

代码语言:javascript
复制
console.warn("警告")

这个方法是用来输出警告信息的,在最前面会有一个黄色标志,表示警告

console.debug

代码语言:javascript
复制
console.debug('debug')

这个方法可以在console窗口输出调试信息

console.clear

代码语言:javascript
复制
console.clear()

这个方式用来清除console窗口信息

console.trace

代码语言:javascript
复制
console.trace()

这个方法是用来跟踪当前执行代码(函数)的运行轨迹,可以直观的看到函数或代码执行的顺序,都不用"打断点"了。

console.assert

代码语言:javascript
复制
console.assert()

这个方法接受两个参数,第一个参数是表达式,第二个参数是字符串,只有当第一个参数是false的时候,才会输出第二个参数,否则不会有结果

console.count

代码语言:javascript
复制
console.count()

这个方法是用于计数,可以输出它被调用了多少次,在开发过程中,我们如果要看这个方法执行了多少次的话,可以很方便的看到

console.dir

代码语言:javascript
复制
console.dir()

这个方法用来对一个对象进行检查,打印出便于阅读和检查的格式

console.time

代码语言:javascript
复制
console.time()

这个方法配合console.timeEnd()可以打印出所消耗的时间

02

Element这个窗口主要进行的是我们dom元素和css布局的调整和修改。

我们可以在右侧Styles里调整dom元素的各种样式,可以在Element中更换图片和dom节点以及节点的状态

我们也可以在Computed里来看所选盒子模型的状态以及去修改dom节点上的样式属性

03

Sources这个窗口就是我们经常"打断点"的地方了,首先我们先看一下这个窗口的信息,我们主要关注的点,一般有这个几个:

我平时经常用的打断点有两种方法: 1、是在我们的代码中debugger;

2、是在浏览器sources中打js断点

总结:

在这两种调试的方法上,原来其实都是一样的,第一种使用一般是在有源码的情况下,我们可以本地直接这样打断点,第二种使用一般是在没有源码的情况下使用,因为这个我们无法在代码里写debugger,我在只能在加载的资源列表里找到对象的代码去手动打断点调试,二者有个共同点就是在代码执行到我们断点处时,我们可以在console的窗口输入我们上面执行的变量以及全局变量,当然下面没有执行的代码或者正在执行的变量是undefined。

注意一个小细节:我们平时在生产或者测试环境看到的源码一般都是压缩版的,宛如天书一般,我们可以使用chrome的小功能,自动把代码整理成可阅读的形式。点击下图的{}即可,没有用过的小伙伴可以试试,别怪小编没有提醒你哦!

04

Network这个窗口主要是用来查看资源加载和网络请求:

controls和Filters这两个的特性见下图:

Overview显示了资源检索时间的时间线,如果看到多条竖线堆叠在一起,就说明这些资源被同时检索

Requsets Table里面主要是页面和后台的请求以及我们加载css.html,以及cdn等。

Summary可以直接看到页面请求的总数,传输的数据总量,加载的时间

需要注意的是:

1、在Request Table中的Size里包括两个size什么意思呢?看下图:

第一个大小是资源传输时的大小,第二个时资源实际的大小,在服务器中一般使用gzip压缩,大大提高了传输的效率,但是gzip压缩只能压缩响应体的内容,只适合返回数据量大的时候使用,如果数据量小的话,有可能导致数据传输的术后大小比实际的大小还要大。

2、Waterfall中蓝色块越大表示加载很缓慢,绿色块越大表示第一个字节响应的时间越长,优化方式一般是减少文件的字节数,比如降低图片的分辨率,去掉无用代码等

参考文献:

1.https://mp.weixin.qq.com/s/X4dQ4NqDF3UmNCZ4nqDX_A

2.https://www.cnblogs.com/wohenxion/p/4478457.html

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-07-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 小丑的小屋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档