chrome調試工具高級不完整使用指南（實戰一）

3、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來移除可疑的一些事件，排除事件的干擾。

 

 chrome調試工具高級不完整使用指南（基礎篇）

 chrome調試工具高級不完整使用指南（優化篇）

 chrome調試工具高級不完整使用指南（實戰一）

 chrome調試工具高級不完整使用指南（實戰二）