巧用Chrome开发面板加快开发速度

本文共阅读

本文目录

  • 简介
  • Element Panel
  • Network Panel
  • Timeline Panel
  • Resource Panel
  • Source Panel
  • Console Panel

简介

本文由前期的笔记整理而成,chrome的开发面板功能十分强大,然而在实际应用中我们却是用的不常见,因为习惯问题,很多时候我们更多的是情愿去切到代码页修改然后切回来看效果,所以写下此文,以勉励自己,改掉这个不太好的习惯。

1.Element panel

upload successful
element面板主要就是这几个功能组成,左上角有两个按钮,一个是鼠标选取开关,点击后,就可以用鼠标在网页上点击来选中特定的元素,以便在下面的源码和旁边的css样式框查看和修改对应的样式。旁边一个便是模拟其他媒体的开关,便于直接在pc端查看该网页在移动端的显示情况:

upload successful
再下来,就是源码部分,可以直接查看当前页的源码,也可直接编辑修改,以查看效果,在该区域,选中某标签,右边的样式面板便会显示对应的css样式,可以直接修改css样式,同时在css区域的右上角还提供了三个开关

upload successful
第一个开关可以直接模拟一些鼠标事件,如hover,active等等,以查看相应状态下元素的样式。

upload successful
第二个这是可以调试css关键帧动画的具体效果

upload successful
提供了时间轴,使css动画调试变得更加简单。
Computed面板为右侧子面板,显示的则是具体经过浏览器计算后该元素实际显示出来的尺寸和样式以及盒模型

upload successful
然后便是Listenner面板,显示了当前元素上挂载的监听事件们

upload successful

2.Network panel

网络面板显示了当前页面加载了哪些文件资源以及加载事件顺序等

upload successful
左上角红点为开关,点开后每次进入网页便会录制下当前加了的哪些文件,加载时间等等,通过filter也能过滤特定的文件,点击文件,还能预览发送和收到的http包

upload successful

3.TimeLine panel

该面板和network面板一样,需要录制才有内容,方法也是一样,只是改面板是为了分析当前页的性能而存在的,

upload successful

upload successful

录制完成后边可以看到当前页面从开始下载到渲染完成这个过程中每个步骤花费的时间,如渲染,js文件执行等等,顶部选项里还可以选择是否录制js profile,memory,paint等等内容,作为分析之用。

4.Resource panel

upload successful
该面板显示了当前域名下的所有用到的资源,包括html,css,js文件,图片音乐等等资源,以及该域名下的cookie,localstorage等等。

5.Source panel

在js的调试中,无疑这个面板是用处最大的。在这里可以直接调试js文件,下断电,监听变量的值变化。

upload successful
在该面板下,先ctlr/cmd + p打开一个该网站的js文件

upload successful
对于这种压缩过后的文件,chrome提供了展开的功能,点击下方的大括号便可将文件改成易于阅读的格式。

upload successful

upload successful
这下就可以比较清晰的阅读对应的源码了,然后,在任意一行的行号处单击,便可设下一个断点,右方breakpoint面板下面便可看到多了一个断点,此时刷新网页,网页js便会执行到此处停下

upload successful

upload successful
此时,在右侧watch面板处点击那个加号,便可添加一个变量监听,查看该变量在此时值得情况

upload successful
同时顶部还有一排按钮

upload successful
他们分别是“继续执行到下一个断点”,“单步执行,跳过函数”,“单步执行,遇到函数则进入该函数”,“单步执行,直接跳出当前所在函数栈”,“暂时关闭断点(不是删除)”,再往后那个和暂停一样的符号是个开关,打开后表示遇到exception时也像断点也要停在那里,再之后那个复选框表示调试的内容是否包括异步内容。
对着行号的断点处右键,可以选着删除断点和编辑断点,编辑断点其实就是设置条件断点

upload successful
这里可以设置一个表达式,当表达式的值为true的时候断点会在此处停下,否则不会。
在右边还有一个叫做event listener breakpoint面板,点开后有很多复选框,名字则是事件名,勾选后,当页面激活该事件时就会暂停,同时跳转到调用该事件函数的地方。

upload successful
该面板上方为xhr Listenner breakpoint面板,点开后会有一个输入框,输入一个文本,表示当收到url中包含该文本的xhr时就暂停,并跳转到对应行。

upload successful

6.Console panel

该面板大多数时候是隐藏的,只要用快捷键ctrl/cmd +j 就可以调出了

upload successful
当网页有报错的时候就会显示在这里,并且显示出错原因和出错行数。点击后可以直接跳转到对应行去。
同时这里可以执行js语句,直接回车便会显示结果,内置了jquery的$功能(不知道是内建jquery还是自己实现的),可以在这里直接查看网页中当前状态下各变量的值得情况,直接输入变量名回车就行,然后改面板内置了很多命令:

console.log()


拥有一个或多个参数,结果会把所有参数拼起来输出在console面板中,同时也支持格式化字符串,出现格式化字符串的占位符时会依次从之后的参数中取值来替换,如果还有多的参数,则多的参数也转化为字符串拼接进结果中。

Console.error



console.warn


其实和console.log是差不多的,只是显示的样式不同而已

console.table


如果参数是二维数组或者格式规整的对象,就可以将其以列表的方式显示出来

upload successful

console.assert()


两个参数,仅当第一个参数的值为false时,会把第二个参数的值输出到console里面

console.time



console.timeEnd


键入console.time(‘name’),开启一个计时器,然后执行你的代码,最后键入console.endTime(‘name’),页面会输出这其中所花费的运行时间。

以上,便是对chrome各常用功能的介绍

本文链接: http://www.yixuankeer.win/2017/06/05/巧用Chrome开发面板加快开发速度/
ps:文章评论需翻墙可见