chrome開發(fā)者工具
Element
- html也是可以 打斷點(diǎn) 的央星。選中dom飘诗，右鍵選擇Break on 出現(xiàn)三個(gè)選項(xiàng)： Subtree Modifcation (dom樹發(fā)生變化) Attributes Modification（屬性改變） Node Removal ( dom移除 ) 這三個(gè)選項(xiàng)觸發(fā)都會(huì)暫停代碼執(zhí)行教藻。
- css部分的面板中右上角有三個(gè)按鈕墓捻，分別是新建一個(gè)樣式致板，觸發(fā)dom的active focus hover交煞，以及最后一個(gè)控制動(dòng)畫的執(zhí)行速度。
- css面板菜單欄中的Computed 是盒模型和計(jì)算后的樣式表斟或。EventListener中是當(dāng)前dom上的事件列表素征。
- DOM Breakpoints是dom上的斷點(diǎn)列表。Properties是所有的dom屬性萝挤，包括事件屬性HTML屬性等等御毅。
- 右鍵菜單中有個(gè)Scroll into view可以查看不在視口內(nèi)的元素。
Network
- No throttling 可以模擬網(wǎng)絡(luò)環(huán)境怜珍，比如2G和離線等等
- 可以選擇資源的種類來查看端蛆，比如看XHR等等。
- 選中資源右鍵菜單也有驚喜酥泛，比如一個(gè)接口可以選擇重發(fā)今豆。
- 最左側(cè)上面的黑圈或者紅圈表示接受請求的時(shí)間段嫌拣。
Sources
- 所有域下的所有資源文件都可以在這查看，jsDebug也可以在這來做呆躲。
- 打斷點(diǎn)的時(shí)候可以注意一下斷點(diǎn)控制臺(tái)的 Async异逐。選中它可以在事件堆棧中找到異步請求的執(zhí)行棧。
Timeline
- 先記一下顏色插掂。 藍(lán)色jsHeap 紅色dom Nodes 綠色 Listener 黃色灰瞻。
- 看圖說話。得出結(jié)論： js腳本不能放到head標(biāo)簽里面去辅甥，會(huì)阻塞DOM的加載和渲染酝润。
- 垃圾桶可以出發(fā)GC
- 渲染的全部過程可以在圖中清楚看見，可以看出一秒多少幀肆氓。
Resources
- 緩存之類的東西袍祖。可以編輯谢揪。比如LocalStrage Cookies等等蕉陋。
Console
- $1 表示選中的dom
- $2 上一個(gè)dom
- $ 有就使用沒有使用document.querySelector
- conosle.info /warn /log
fiddler
- HOSTS 即改即用
- 對于Https請求，需要在 Fiddler里勾選
- Inspection 調(diào)試請求拨扶。
- 可以給請求打斷點(diǎn)凳鬓，選中請求，選擇Rules中的Aotumatic Breakpointr然后選擇請求之前還是請求之后打上斷點(diǎn)患民。
- AutoRsponseder可以轉(zhuǎn)發(fā)請求缩举。選中添加，下面填寫轉(zhuǎn)發(fā)地址即可匹颤。記著勾選上面的三個(gè)選項(xiàng)仅孩。
