三、chrome調試工具實戰
3.1 獲取界面對應的HTML和修改樣式
我們以博客園為例子來分析。
通過上面的操作就可以定位到對應的HTML代碼
左側菜單顯示的就是當前指定元素層疊樣式的一個情況
上面的圖片中的內容是可以隨意添加的，但是如果是只操作於一個元素，那么我們直接在最頂層上面添加樣式就好。
：hov 按鈕可以模擬hofv的操作
：cls 可以給元素添加class
下面我們來演示模擬標題的一個hover事件
3.2 快速定位對應元素上面的事件
還是以上面的同一個標題為例：
我們把右側菜單切換到Event Listeners中去，從這界面中我們可以分析到在這個元素上面是沒有綁定其他事件的[勘誤，上面所說的沒有綁定事件特指的是沒有綁定click事件]
a標簽中的href不屬於觸發事件的行列之內。
這個操作的一個好處有兩點一個就是可以快速的上說別人的代碼。另外一個好處就是可以快速定位問題的出處。
舉一個比較復雜的例子。
上面這張圖是一個按鈕上面的事件綁定情況，如圖所示。初步看起來視乎好像上面綁定了很多事件，但是其實不然。
我們展開其中的一個click看下：
從紅色的框中，我們可以看到后綴打開可以分成大概三部分的來源：bootstrap.min.js，ace.min.js，VM892：271
其中ace是一個基於Bootstrap的框架中的JS，bootstrap也一個框架，所以我們正常是不可能在其中去編寫腳本的。所以腳本的對應位置在VM中。
怎樣快速的打開這一段代碼， 我們只需要點擊圖中的藍色標識就可以了。
這個功能還有另外的一個好處是可以排除觸發器之間的干擾。這個對於線上的問題排查尤為有效
假設我們如果就是一個按鈕同時觸發多個觸發器（事件），然后我們可以通過上圖中的remove來移除可疑的一些事件，排除事件的干擾。