前序:DevTools使开发者更加深入的了解浏览器内部以及编写的应用。通过它我们可以高效的定位页面布局、页面报错。今天我们就来一起实践如何使用好devtools这把利剑。
在开始之前我们先来了解一下chrome中的快捷键:
功能 | 快捷键 |
cmd + opt + i | 打开devtools;c是审查元素;j是控制台; |
cmd + o | 文件检索; |
cmd + shift + o | 定位到文件内css规则或者js方法 |
cmd + opt + f | 全局文本搜索 |
下面我从dom、css、js分别阐述一下如何调试
1.dom
1.1:打开调试面板,选中dom节点右键,选择break on可见如下:一般我们会拿attributes Modifications来调试样式动画效果
dom断点调试 | 方法 |
subtree modifications | 子节点增删改时触发; |
attributes Modifications | 自身属性发生变化触发 |
Node Removal | 当前移除时触发 |
1.2:source面板 Event Listener Breakpoints
可以选中要调试的事件,复选框选中,在页面区域触发事件即进入断点
1.3:hover 鼠标略过效果很炫,但是略过获取不到样式。可以如下操作查看:
1.4:选择元素,在控制台输出$0。可以通过这种方式快速选择元素,或进行$($0)进行‘任意’操作
2.css
2.1:加号,点击+号即可添加你当前dom所选的样式进行调试
2.2:上述的调试一般只存在内存中,页面一刷新就没了,那么我们如何能将我们调试的结果保留?
映射保存到磁盘(本地文件夹映射到网址)
source-> add folder to workspace(文件夹位置并授权) ->map to file system resource
具体见动图:
2.3:animation css动画调试animate
注意动图中的停顿处。仅对外部css生效; 行内无效,via source修改
2.4:吸取颜色,看到动图的那个小颜料桶了么?😁
3.控制台 使用它作为shell在页面上与JavaScript交互
3.1:xpath查询语言,$x(xpath,context)执行查询。context是执行上下文的dom元素;类似jq
XPath 使用路径表达式来选取 XML 文档中的节点或节点集
$x('//img');
具体可以查看xpath,类正则
3.2:$0,$1,$2,$_
获取之前选择过的近6个元素
3.3:console家族
dir 输出对象的所有属性值,然后你就能在console面板中输入console.dir(console);
看看console家族有多少大。
顺带提一下console.assert(false,'out')
。有时候我们会if(x){console.log(*)}
,console.assert
就是if(false){console.log(*)}
让我们先来看一张图:这个的代码我先贴一波感兴趣的童鞋可以自己去实践一把,我就不一一描述:
console.groupCollapsed('console.level的日志');
console.log('this level is console.log');
//一层嵌套
console.group('debug的日志');
console.debug('输出调试信息');
console.groupEnd();
console.info('this level is console.info');
console.warn('this level is console.warn');
console.error('this level is console.error');
console.groupEnd();
console.dir(console);
console.group('console.assert的日志');
console.assert(2>1,'2比1大');
console.assert(1>2,'1>2,出错了');
console.groupEnd();
console.table([{a:1, b:2, c:3}, {a:"foo", b:false,c:undefined}]);
console.table({ 'dog':{'age':20,'sex':'girl','like':'eat'},'cat':{'age':11,'sex':'boy','like':'sleep'},'mouse':{'age':1,'sex':'boy','like':'drink'} });
//有样式的
%s - 字符串格式
%i 或 %d - 整型格式
%f - 浮点格式
%o - DOM节点
%O - JavaScript 对象
%c - 对输出的字符串使用css样式,样式由第二个参数指定
console.log('%s很开心,因为%o是她进卖好车的第%d天,这是她的照片%c','晴天',new Date(1462118400000),1,"padding:50px 50px; background:url('https://avatars1.githubusercontent.com/u/8566935?v=4&s=460') no-repeat; background-size:100% 100%; line-height:140px")
console.group('计时');
console.time("数组耗时计费");
var a = [];
for(var i =0; i<10000000; i++){
a[i]=i;
}
console.timeEnd("数组耗时计费");
console.groupEnd();
很多童鞋可能对mhc的图标ascii码打印比较好奇?
其实很简单,下列两个网址:根据你的实际需求选择一种模式,生成处ascii,然后将生成的ascii中的所有换行符替换成\n,并且将部分转义字符转义即可。建议在sublime中操作,按住alt键,command+d选择可批量处理:
来个🌰🌰🌰🌰🌰:
4.js调试
4.1:断点(设置有条件的断点)
哪些可以打上断点?? 一般方法名 对象字面量基本类型的属性 不能打上其它基本都ok
图标 | 描述 |
![]() |
继续执行直到下一个断点 |
![]() |
不管下一行发生什么都会执行,并跳转到下一行 |
![]() |
如果下一行包含一个函数调用,Step Into 将跳转并在其第一行暂停该函数。 |
![]() |
暂时停用所有断点。用于继续完整执行,不会真正移除断点 |
![]() |
在发生异常时,自动暂停执行代码 |
4.2:js文件中如何打断点???
断点可以设置条件?js文件中直接修改查看结果?具体请看下图操作:
4.3:经常我们打断点的时候会进入到第三方库、例如jquery,但是我们只希望在自己的js文件中打断点,那么怎么处理?
拉黑操作。blackbox script把你不要打断点的js文件放入黑箱
4.4:线上bug调试;混淆?压缩?
方法1:系统偏好设置 -> 网络 -> 高级 -> 代理 ,代理到本地
方法2:source maps,开启浏览器Enable JavaScript source maps,目前只支持chrome
4.5:代码小书签 snippets, History(版本管理)
5.NetWrok
DOMContentLoaded 和 load
DOMContentLoaded解析页面初始标记:
1. overview窗格中的蓝色竖线表示事件
2. summary中的确切时间
load页面完全加载完成标记:
1. overview窗格中的红色竖线
2. requestTable中的红色竖线
3. summary中的时间
TTFB:Time To First Byte(request sent至收到服务器发出的首字节的时间)
Initial connection:初始化连接
结果:
大片绿:客户端与服务端之间的网络条件差或者服务器应用响应慢
大片蓝:文件太大发送的字节数太多
下载HTTP响应的时间(包含头部和响应体)
通过条件Get请求,对比If-Modified-Since和Last-Modified时间,确定是否使用缓存中的组件,服务器会返回“304 Not Modified”状态码,减小响应的大小;
🌹🌹🌹🌹🌹 that's all! thank you!