瀏覽器調試：事件定位與源碼查找

　　做爲前端人員，瀏覽器調試是必不可少的工做之一，甚至與頁面製做同樣重要，試想生產環境以及平常bug中出現的問題，沒法重現問題進行調試或者不知道如何下手調試，將對工做產生很消極的影響；經常使用的調試瀏覽器是chrome和Firefox，自帶的和一些安裝的插件均可以進行平常頁面調試；

 

　　相關的瀏覽器調試技巧，前端人員基本上都多多少少知道一些，因此這裏我也就不從簡到複雜一個個列舉了，有興趣的小夥伴能夠百度之相關的一些瀏覽器調試的常識(也許我之後會寫也說不定)，我今天說的如標題，主要是事件定位與源碼查找；什麼意思那？好比有個場景1：在前端工做中，集團官網出了個腳本問題，老闆/主管讓你去解決，打開網站，恩 代碼寫的很牛逼，但不是我寫的啊(咱們是大天然的維修工，哪裏有問題去哪裏)，以前的大神不在了等等諸多緣由，這種場景太多了，不少是維護其餘人員寫的代碼，那麼就要進行問題(腳本)定位和分析，而後糾錯優化改正之；場景2：瀏覽一些網站時，發現一些不錯的效果，想研究下碼碼之，這也涉及到腳本定位的問題(腳本都找不到研究個毛)；這個時候有同窗會問，這個要找代碼很麻煩嗎？右鍵查看源代碼，看看引用或者頁面上的代碼不就好了嗎？可是若是這個網站比較大，或者結構亂不夠優化那？什麼意思，看圖：

......

這是個簡單的例子，有的網站引用的腳步很是多，並且名字起的你不知道是幹嗎的，或者是引用一個mini&ugly後的代碼，一個一個看源碼？

　　好吧前面說了這麼多，還沒到正題，如何進行事件定位與源碼查找，js事件能夠理解爲觸發了某個條件後發生的頁面響應，js事件分爲通常事件、頁面事件、表單事件等，簡單理解就是頁面click、hover、load、submit、scroll等等這些表明的事件，我這裏就以最好理解的頁面click來講，其餘事件同樣能夠延伸；如今頁面有個事件，點擊某處發生了一個特定的事件，這個事件如何綁定？大體有一下幾種方式：

　　1.元素直接綁定方法：<p onclick="addSome()"></p>

　　2.經過id或樣式綁定方法：$("#eleId").click(function(){}) or document.getElementById("eleId").click or $(".eleClass").click(function(){})

　　3.查找元素綁定：$("#eleId span em p").click(function(){}) or $(".class span em p").click(function(){})

　　4.經過監聽綁定方法：$(document).on("click","#eleId",function(){}) or document.getElementById("eleId").addEventListener(function(){})

　　第一二中應該是比較經常使用的綁定方式，第一種能夠直接定位如何綁定的方法了，而後就是定位源碼分析代碼了，而下面的幾種方式，須要藉助這個元素的「標記」來定位，好比id、class或者是上級的id、class(這種比較少了，腳本效率不高)，那麼這個標記就成了查找綁定事件的關鍵，咱們須要一個地方能全局搜索全部引用的腳步，下面是chrome的搜索，我使用的是版本 52.0.2743.116 m；如圖咱們就實操個人博客中的一個搜索按鈕的功能，這個例子比較簡單：

　　先經過代碼查看，發現這個按鈕是寫在input中的onclick的，取到方法名，下面進行查找；

如圖所示找到sources，經過裏面的search全局查找腳本，發現一處，點擊顯示源區域，而後就找到代碼了，注意這裏代碼區是formatted過的，若是你是查找的是自家的代碼，果斷去看源碼去，若是是網上的，呵呵，只能這樣了；這種方式能夠查找以上幾種介紹過的類型作延伸，基本能夠知足腳本查找問題定位了，能夠多找些列子試下就熟了；

在Firefox中的查找以下：

 

 　　

　　除了這種方式，chrome還提供一些插件能夠定位事件，好比Visual Event，就是這個玩意了

如圖進入頁面後，點擊右上角插件，對，就是那個黑眼睛，插件開始工做，會在頁面上有綁定事件的地方顯示出綁定的來源，比較方便，不過不能定位代碼源，仍是須要手動查找，若是還有其餘更好用的插件，也請小夥伴們留言提示；

　　差很少寫到這裏了，分析一些小技巧，但願能幫到你。

 

　　原文地址：瀏覽器調試：事件定位與源碼查找，薛陳磊|Share the world