chrome浏览器调试

前序：DevTools使开发者更加深入的了解浏览器内部以及编写的应用。通过它我们可以高效的定位页面布局、页面报错。今天我们就来一起实践如何使用好devtools这把利剑。

在开始之前我们先来了解一下chrome中的快捷键

快捷键	功能
cmd + opt + i	打开devtools；c是审查元素；j是控制台；
cmd + o	文件检索；
cmd + shift + o	定位到文件内css规则或者js方法
cmd + opt + f	全局文本搜索

下面我从 DOM、CSS、JS 分别阐述一下如何调试

DOM

Element 面板

打开调试面板，选中dom节点右键，选择break on可见如下：

dom断点调试	方法
subtree modifications	子节点增删改时触发；
attributes Modifications	自身属性发生变化触发
Node Removal	当前移除时触发

一般我们会拿attributes Modifications来调试样式动画效果

Source 面板 (Event Listener Breakpoints)

可以选中要调试的事件，复选框选中，在页面区域触发事件即进入断点

event listener breakpoints

hover

hover 鼠标略过效果很炫，但是略过获取不到样式。可以如下操作查看：

hover

选择元素

选择元素，在控制台输出$0。可以通过这种方式快速选择元素，或进行$($0)进行‘任意’操作

控制台输出$0

CSS

修改 DOM 样式

点击 + 号即可添加你当前dom所选的样式进行调试

映射保存到磁盘(本地文件夹映射到网址)

上述的调试一般只存在内存中，页面一刷新就没了，那么我们如何能将我们调试的结果保留？

source-> add folder to workspace(文件夹位置并授权) ->map to file system resource

具体见动图：

动画调试

animate

注意: 动图中的停顿处, 仅对外部css生效, 行内无效, via source 修改

吸取颜色

看到动图的那个小颜料桶了么？😁

控制台

使用它作为shell在页面上与JavaScript交互

XPath查询语言

$x(xpath,context) 执行查询, context是执行上下文的dom元素, 类似jq

1 2	// XPath 使用路径表达式来选取 XML 文档中的节点或节点集 $x('//img');

具体可以查看xpath,类正则

$0, $1, $2, $_

获取之前选择过的近6个元素

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选择可批量处理：

ascii 文字生成ascii

pic 图片生成ascii

来个🌰🌰🌰🌰🌰:

JS 调试

断点（设置有条件的断点）

哪些可以打上断点？一般方法名、对象字面量基本类型的属性，不能打上其它基本都ok

图标	描述
	继续执行直到下一个断点
	不管下一行发生什么都会执行，并跳转到下一行
	如果下一行包含一个函数调用，Step Into 将跳转并在其第一行暂停该函数。
	暂时停用所有断点。用于继续完整执行，不会真正移除断点
	在发生异常时，自动暂停执行代码

js文件中如何打断点?

断点可以设置条件？js文件中直接修改查看结果？具体请看下图操作：

blackbox script

经常我们打断点的时候会进入到第三方库、例如jquery，但是我们只希望在自己的js文件中打断点，那么怎么处理？拉黑操作。blackbox script把你不要打断点的js文件放入黑箱

线上bug调试；混淆？压缩？

方法1:系统偏好设置 -> 网络 -> 高级 -> 代理，代理到本地
方法2:source maps，开启浏览器Enable JavaScript source maps，目前只支持chrome

代码小书签

snippets
History(版本管理)

NetWrok

DOMContentLoaded 和 load

DOMContentLoaded解析页面初始标记：

overview窗格中的蓝色竖线表示事件
summary中的确切时间

load页面完全加载完成标记：

overview窗格中的红色竖线
requestTable中的红色竖线
summary中的时间

TTFB:Time To First Byte(request sent至收到服务器发出的首字节的时间)

结果：

大片绿：客户端与服务端之间的网络条件差或者服务器应用响应慢
大片蓝：文件太大发送的字节数太多，下载HTTP响应的时间（包含头部和响应体）过长，通过 Get 请求，对比 If-Modified-Since 和 Last-Modified 时间，确定是否使用缓存中的组件，服务器会返回“304 Not Modified”状态码，减小响应的大小

🌹🌹🌹🌹🌹
that’s all! thank you!