本文目錄一覽：
chrome審查元素功能能 查找元素相應的JS嗎
可以查找對應的js
找到網頁上js部分
右擊
選擇【審查元素】
跳出的窗口中即可顯示該js在網頁代碼中的位置
知道html元素，如何定位js代碼
首先對於一些簡單的html頁面，裡面的js文件載入的也少的情況下，我們可以可以使用火狐的firebug或者google的控制台都可以輕鬆的查看.
火狐瀏覽器的查看方法安裝Firebug然後按F12選中你要看的dom元素在右側的事件中可以詳細的看到綁定了那些事件.
Google瀏覽器也可以用同樣的方法查看對應dom元素綁定的事件.
F12–Elements–Event Listenners
但是對於一些複雜的Html頁面,相當於載入的js文件和相應的插件也比較多,這個時候用瀏覽器自帶的事件查看器就顯得力不從心了!
所以遇到上面這種情況,我們想快速定位一個元素綁定那些事件的時候,就得藉助google的Visual Event插件幫助我們快速定位了,所以我們首先我們的去google 擴展庫去下載對應的插件並安裝.
安裝成功後瀏覽器的右上角會出現一個小眼睛.
接著說說一下如何使用Visual Event插件的小眼睛，等頁面載入完之後，點擊小眼睛然後大概過不了5秒鐘，就可以看到頁面上元素綁定事件了.
最後移動滑鼠到你想查看的元素上面就可以看到對於的js文件已經和對應的事件名真的很方便使用.
【來源網路】
如何查找網頁元素對應的JS代碼（如圖）
如果會調試，可以用打開瀏覽器的調試功能。
以chrome為例，按F12打開調試窗口，切換到Sources選項卡，最右邊的Event Listener Breakpoints里勾選Mouse下的mouseover即可，當滑鼠移動到圖片上時觸發mouseover事件，chrome可響應事件設置斷點，跟蹤js代碼查看就可以。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/239733.html
微信掃一掃 
支付寶掃一掃 