chrome开发者工具

Element

• html也是可以 打断点 的。选中dom，右键选择Break on 出现三个选项： Subtree Modifcation (dom树发生变化) Attributes Modification（属性改变） Node Removal ( dom移除 ) 这三个选项触发都会暂停代码执行。

• css部分的面板中右上角有三个按钮，分别是新建一个样式，触发dom的active focus hover，以及最后一个控制动画的执行速度。
• css面板菜单栏中的Computed 是盒模型和计算后的样式表。EventListener中是当前dom上的事件列表。
• DOM Breakpoints是dom上的断点列表。Properties是所有的dom属性，包括事件属性HTML属性等等。
• 右键菜单中有个Scroll into view可以查看不在视口内的元素。

Network

• No throttling 可以模拟网络环境，比如2G和离线等等

• 可以选择资源的种类来查看，比如看XHR等等。
• 选中资源右键菜单也有惊喜，比如一个接口可以选择重发。
• 最左侧上面的黑圈或者红圈表示接受请求的时间段。

Sources

• 所有域下的所有资源文件都可以在这查看，jsDebug也可以在这来做。

• 打断点的时候可以注意一下断点控制台的 Async。选中它可以在事件堆栈中找到异步请求的执行栈。

Timeline

• 先记一下颜色。 蓝色jsHeap 红色dom Nodes 绿色 Listener 黄色。

• 看图说话。得出结论： js脚本不能放到head标签里面去，会阻塞DOM的加载和渲染。
• 垃圾桶可以出发GC
• 渲染的全部过程可以在图中清楚看见，可以看出一秒多少帧。

Resources

• 缓存之类的东西。可以编辑。比如LocalStrage Cookies等等。

Console

• $1 表示选中的dom

• $2 上一个dom
• $ 有就使用没有使用document.querySelector
• conosle.info /warn /log

fiddler

• HOSTS 即改即用

• 对于Https请求，需要在 Fiddler里勾选
• Inspection 调试请求。
• 可以给请求打断点，选中请求，选择Rules中的Aotumatic Breakpointr然后选择请求之前还是请求之后打上断点。
• AutoRsponseder可以转发请求。选中添加，下面填写转发地址即可。记着勾选上面的三个选项。