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可以转发请求。选中添加，下面填写转发地址即可。记着勾选上面的三个选项。
