瀏覽器中的源碼分析功能，瀏覽器源碼分析

瀏覽器中的源碼分析功能，瀏覽器源碼分析

前言：我們一直在用瀏覽器，你是否真正玩過他？NO！

在IE瀏覽器中，開啟一個網頁，右擊功能表列中有一個查看原始碼功能，不過這個原始碼太長了，不易分析。

之後的瀏覽器增加了一項功能，叫做審查元素功能。

在Google瀏覽器中，開啟一個網頁，右擊功能表列中有一項是檢查；在搜狗瀏覽器中，開啟一個網頁，右擊功能表列有一項是審查元素；其他瀏覽器筆者未嘗試過。

 

一、審查元素簡介

以最常用的百度搜尋介面為例，開啟審查元素，如所示：

右側出現審查元素介面，也就是網頁的Html代碼元素

其中包括以下模組

Elements(元素/標籤)：

查看頁面中所有的HTML元素，左面是用樹形結構展示的HTML標籤，滑鼠移到上面會在頁面中顯示這個標籤的位置、實際長寬等。右面是每個元素的CSS屬性，繼承關係等等，還有DOM屬性、繼承關係、綁定的事件。

Resource(資源)：

顯示頁面中用到的所有資源，頁面、圖片、樣式表、指令碼等。還有本地儲存、Cookie.

Network(網路)：

顯示所有的網路事件，你需要先開啟開發人員工具，切換到這個選項卡，之後再重新整理頁面才會有顯示。

這裡會顯示每個檔案的資訊、由何處觸發這個網路活動、HTTP前序等等.

Sources(原始碼)：

用於對js進行調試，左面有所有js代碼的列表，中間是代碼地區(下面有個格式化代碼的功能)，右邊是斷點、觸發器、調用棧等等.

Timeline(時間軸)：

同樣需要先開啟這個選項卡，點擊下面的`開始捕捉`才會有顯示。

這個選項卡會顯示頁面中的一切時間，包括運行指令碼、網路活動、頁面渲染等等。

而且會很詳細的顯示每個活動佔用的CPU和記憶體.

可以利用這些資訊對網頁進行最佳化.

Profiles(報告)：

可以截取一段時間的CPU使用方式報告、CSS類使用方式報告(用來剔除未用到的CSS)、堆記憶體快照(用於最佳化js指令碼和DOM結構).

Audits(審計)：

讓Chrome給你的網頁提出一點建議，一般是關於哪些代碼不必要、沒用到.

Console(控制台)：

這是一個js控制台，你可以直接運行js代碼，對頁面進行操作.

二、利用審查元素修改網頁

元素標籤上展示了網頁上元素的html源碼，隨著你的滑鼠在代碼上移動，左側會顯示你所指向的元素控制項。

 

最基本的是head一個網頁的總設定，如下所示title設定標題。

<title>百度一下，你就知道 </title>

body是整個網頁的布局。

左圖所示，為右上方功能表列的代碼，其中我們可以設定的菜單：糯米、新聞、地圖等。並且分別對應著一個串連，我們可以對其修改。

 

例如所示：

 

 

注意：此種修改只能在本地修改，當然修改不了網站本身。

 

三、利用審查元素下載網頁視頻

網頁播放視頻需要載入緩衝，那麼緩衝就是一個元素，此元素被存到Resource（資源）中。我們首先播放一個視頻，以優酷為例，開啟優酷，隨便播放一個視頻，然後開啟審查元素，選擇network查看當前啟動並執行網路事件，下面有列表，點擊size排序，找檔案大小比較大的應該就是視頻檔案（因為檔案的編碼都是代號，所以靠檔案名稱不方便看出，只能藉助大小識別）找出後點擊對應的Initiator（即啟動器，即資源的來源地址）可以跳轉到對應的資源檔地區，然後雙擊下載即可。

因為優酷等網站視頻都是斷點載入的，也就是一段一段的，當你看一分一秒時，他只緩衝第一段，當你看到二十分時才緩衝第二段。所以需要緩衝多段才能全部下載。

 

2所示，有很多斷點，可以緩衝完第一段後點到第二段，然後他就就緩衝第二段了，再點到第三段，就緩衝第三段了。

 

 

四、網頁編程學習

網頁的幕後都被我們看到了，我們也可以利用它做一些小外掛程式，比如帳號自動登入的外掛程式，我們知道網頁中的元素，也就知道本身這些元素的ID號就可以通過程式去填充它，一些迅雷會員破解等內容的實現也是基於此的，利用軟體網頁控制項的ID號來去操作它。

下面是一篇介紹自動登入外掛程式製作的思路。

http://www.cnblogs.com/dyllove98/archive/2013/08/01/3230968.html

 

 文章格式整理不太好可以參照Word版本http://wenku.baidu.com/view/907bf4dc763231126fdb118f

 

寄語：代碼的力量是偉大的，要有一顆善於發現的眼睛，世界才會被你掌握，極客的思想。