www.html-js.com 菜鳥前端成長之路 2014-10-17
大頭媛也叫奉雨
Elements
chrome dev tools 中 Elements panel 是審查 dom 元素和 css 的, 可以實(shí)時(shí)修改 dom/css.
- windows: ctrl + shift + i
- mac: cmd + opt + i
DOM
修改 html & 屬性
節(jié)點(diǎn)右鍵, 如下圖, 可以:
- 添加屬性 (enter)
- 修改 html(F2)
- 刪除元素 (delete)
- toggle 元素的 visibility 屬性
- 拖拽節(jié)點(diǎn), 調(diào)整順序
-
拖拽節(jié)點(diǎn)到編輯器
- ctrl + z 撤銷修改
查看元素上綁定了哪些事件
- 默認(rèn)會(huì)列出 All Nodes, 這些包括代理綁定在該節(jié)點(diǎn)的父 / 祖父節(jié)點(diǎn)上的事件, 因?yàn)樵诿芭莼虿东@階段會(huì)經(jīng)過該節(jié)點(diǎn)
- Selected Node Only 只會(huì)列出當(dāng)前節(jié)點(diǎn)上綁定的事件
-
每個(gè)事件會(huì)有對(duì)應(yīng)的幾個(gè)屬性 handler, isAtribute, lineNumber, listenerBody,sourceName, type, useCapture
handle - handler是處理函數(shù), 右鍵可以看到這個(gè)函數(shù)定義的位置, 一般 js 庫綁定事件會(huì)包一層, 所以這里很難找到對(duì)應(yīng)handler
- isAtribute 表明事件是否通過 html 屬性 (類似onClick) 形式綁定的
- useCapture 是 addEventListener 的第三個(gè)參數(shù), 說明事件是以 冒泡 還是 捕獲 順序執(zhí)行
Styles
修改樣式
-
添加規(guī)則
- 添加、修改屬性同樣可以通過 ctrl + z 取消
斷點(diǎn)
代碼斷點(diǎn)
- 設(shè)置斷點(diǎn)在 Sources 面板 js 文件行號(hào)處設(shè)置斷點(diǎn), 這里除了常規(guī)斷點(diǎn)外, 還有個(gè)條件斷點(diǎn) (右鍵conditional breakpoint), 在設(shè)置的條件為 true 時(shí)才會(huì)斷點(diǎn), 在循環(huán)中需要斷點(diǎn)時(shí)比較有用。
-
斷點(diǎn)后可以查看 堆棧, 變量 信息:
-
在調(diào)用堆棧這里可以切換到堆棧中的任何地方重新執(zhí)行 (右鍵restart frame), 如果想查看斷點(diǎn)前的信息時(shí)比較有用。
- 斷點(diǎn)后的變量保存到全局
- 選中變量, 右鍵 Evalute in console
-
在 console 中選中輸出的內(nèi)容, 右鍵 store as global variable
事件斷點(diǎn)
元素上事件斷點(diǎn)
devtools 可以查看某一個(gè)元素上綁定了哪些事件:
Elements > Event Listeners
dom mutation 斷點(diǎn) (推薦)
dom mutation event 是 DOM3 添加的新的事件, 一般是 dom 結(jié)構(gòu)改變時(shí)觸發(fā). devtools 可以在 DOMSubtreeModified、DOMAttrModified 和 DOMNodeRemoved 時(shí)斷點(diǎn). 對(duì)上面 元素上事件斷點(diǎn) (mouseover) 后不容易找到業(yè)務(wù)代碼, 使用 mutation 斷點(diǎn), 斷點(diǎn)后配合 call stack 就可以找到業(yè)務(wù)代碼了, 如下圖這種情況使用全局搜索 (ctrl + shift + f) 代碼中 css classname 也能找到業(yè)務(wù)代碼, 然后直接斷點(diǎn)也可以.
全局事件斷點(diǎn)
devtools 還可以對(duì)事件發(fā)生時(shí)斷點(diǎn), 比如 click 發(fā)生時(shí)斷點(diǎn), 這個(gè)跟 元素上事件斷點(diǎn) 不同, 不會(huì)限定在元素上, 只要是事件發(fā)生, 并且有 handler 就斷點(diǎn); 還可以對(duì) resize, ajax, setTimeout/setInterval 斷點(diǎn).
幾個(gè)常用的斷點(diǎn)快捷鍵:
- F8: 繼續(xù)執(zhí)行
- F10: step over, 單步執(zhí)行, 不進(jìn)入函數(shù)
- F11: step into, 單步執(zhí)行, 進(jìn)入函數(shù)
- shift + F11: step out, 跳出函數(shù)
- ctrl + o: 打開文件
- ctrl + shit + o: 跳到函數(shù)定義位置
- ctrl + shift + f: 所有腳本中搜索
Console
元素選擇$(selector)
即使當(dāng)前頁面沒有加載 jQuery，你也依然可以使用 $ 和 $$ 函數(shù)來選取元素，實(shí)際上，這兩個(gè)函數(shù)只是對(duì) document.querySelector() 和 document.querySelectorAll() 的簡單封裝，$ 用于選取單個(gè)元素，$$ 則用于選取多個(gè)：
$_
使用 $_ 來引用最近的一個(gè)表達(dá)式
$0 - $4
除了$_，你還可以使用$0,$1,$2,$3,$4這 5 個(gè)變量來引用最近選取過的 5 個(gè) DOM 元素。$0 為 Elements HTML 面板中選中的元素。 $1 為上一次在 HTML 面板中選中的元素。$2、$3、$4 同樣的。不過只能到$4
copy
復(fù)制到剪切板，copy 之后，直接ctrl+v
信息輸出
在 js 代碼中打點(diǎn)console.log()，類似debugger
