JavaScript 元素代碼解析

對於某些不瞭解的頁面，如果可以查看元素對應的js代碼是如何工作的，可以求助於Chrome。原理大致是調試器協助我們將頁面的元素解析，我們選中頁面元素，通過“審查元素”，很快就能定位到該元素的頁面代碼，還幫我們對這些頁面元素對應的樣式、js指令碼等進行跟蹤解析，讓我們瞭解頁面結構化、功能化的實現，這樣給我們分析頁面源碼帶來了很多方便。

解析元素方法
我們選擇頁面元素<span>...</span>後，右側的菜單條Event Listeners是該元素對應的事件，調試器幫我們找到了對應的引用方法，甚至是css樣式對應的事件也能幫我們解析出來（以前都是一行行程式碼搜尋或者跟蹤的，現在一步到位的定位出來，的確節省了許多時間）。我們看到紅色框標記有個過濾器，我們點擊拉下，可選中“Selected Node Only”，這樣就過濾出我們選中的頁面元素對應的事件。代碼進一步透明化了，帶來了許多方便，節省了許多時間。


調試
和其他指令碼語言類似，調試的話有兩種方法，一是設斷點調試，二是通過列印日誌的方法，js內建對象console，如下調用：

若變數data為對象時，使用如下方法列印日誌資訊
console.log(data);

然後，就可以在調試器中查看調試資訊。