【如何開啟“開發人員工具”】

• IE9：Tools->F12 Developer Tools，快捷鍵是F12
• Chrome：瀏覽器位址列右邊那個扳手的圖示的配置按鈕->工具->開發人員工具，快捷鍵是Ctrl+Shift+I

【IE9和Chrome的開發人員工具 使用心得】

下面簡單記錄一下，對於使用IE9和Chrome的開發人員工具過程中的一些心得。

【IE9的F12 Developer Tools開發人員工具 和Chrome的Ctrl+Shift+I的開發人員工具 所共有的功能】

1.支援對於抓取的每個頁面的詳細的request header/post data，response header，cookie等資訊

IE9和Chrome中的這些功能，是開發工具中的核心的功能，對於任何一款開發工具，都應該是必備的，所以兩者都支援，只是各自顯示出來方式不同而已。具體不同的顯示，算是各有各的特色。

而IE9中有普通列表顯示和詳細顯示（Goto detail view），前者比較方便看到網頁執行過程的先後順序，後者可以很詳細各項資訊。

Chrome中支援普通的大圖示形式和小圖示（點選左下角那個藍色列表小圖示，use small resource row）來顯示。

2.對於網頁跳轉後，是否清除之前抓取的內容，可以自己設定

• IE9

選項設定是Tools->Clear Entries on navigate，

預設是對於console和Network都打勾了，意思是，在開啟捕獲瀏覽器的內容之後，對於開啟一個網頁，自動就會捕獲所有內容，但是期間如果網頁自動跳轉到另外別的地址，那麼預設的設定會自動清除之前捕獲的內容，而只顯示最新當前網頁相關的內容。

而在網頁分析開發過程中，很可能會遇到登陸同一網頁，但是該網頁內部會跳轉多次，導致很難去分析其跳轉過程，而通過更改此設定，可以實現全部顯示整個網頁從前到後跳轉的所有的內容。

所以，對應的可以去取消對於Network的選擇：

那麼所抓取的內容，都全部都保留了，包括網頁跳轉之前的所有的內容。

如果像我之前一樣，不知道有此設定，那麼分析網頁跳轉，就悲催了。

而通過手動點選停止捕獲的方法，是很難或者說是無法有效的抓取到所要的網頁內容的。

對應的，在network捕獲出來的網頁request中，不同navigation網頁跳轉之間，還有一條水平分割線，方便檢視。

後來才發現有這個好用的功能。在此特地感謝IE9提供了這樣的好的工具。

• Chrome

Chrome中是通過直接點選左下方那個黑圓圈（Preserve Log Upon Navigation）：

來實現對於網頁跳轉後，是否清除原先已經捕獲的內容。

（2）清除所有已經捕獲的內容

IE9是直接點選Clear

Chrome是左下角那個圓圈裡面加個反斜槓的圖示（Clear）：

來清除所有已經抓取的內容的。

3.清除cache和cookie

對於分析網站的過程中，可能會遇到需要清除之前訪問網頁所得到的已有的快取和cookie，傳統方法是:

對於IE，是到對應的IE臨時資料夾中，去清除對應的一個個的cookie和對應的已下載的網頁的檔案：

而對於Chrome，只能通過：選項->高階選項->隱私設定->清除瀏覽資料->勾選 清空快取，刪除cookie以及其他網站資料和外掛資料，來實現清除cache和cookie的功能。

而此處開發工具中，各自帶了對應的功能：

• IE9：清除cache和cookie很方便

此工具此處提供了很方便的清除的功能：

Cache->

Clear Browser cache for this domain:清除對應的快取。

clear sesson cookies: 清除當前session（訪問當前網頁）多對應的cookie，比如登陸了一個skydrive，本地會有對應的session的cookie，此處清除掉之後，就相當於退出登陸了。

clear cookies for domain: 清除當前域名所對應的cookie，比如當前是https://login.live.com/XXX，然後此處就可以直接清除login.lve.com所對應的cookie

• Chrome：清除cache和cookie不太方便

只能通過右擊任一抓取到的頁面，選項 clear browser caches 和clear browser cookies：

來實現刪除cache和cookie的功能，而不能像IE9中提供方便的清除當前domain和session的cache和cookie的功能。

而想要清除指定的cache和cookie，包括指定的domain和當前session的。只能去Resource->Cookies->點選某個domain->右擊某個cookie->delete：

但是卻無法全選，無法一次全部刪除。

總之功能上，刪除cookie和cache，沒IE9方便。

【IE9的F12 Developer Tools開發人員工具】

• 優點/功能

1.支援IE7，IE8等相容模式

有個Browser Mode，支援IE7，IE8，IE9，IE9 Compatibility View，其可能的作用是，比如瀏覽鐵道部的線上購買火車票的那個12306網站，其不支援IE9，此處就可以通過設定為IE8或IE7模式，以實現可以正常登陸和操作該網站了，否則有些內容在IE9下會有問題，比如我之前遇到的購買車票時要選擇日期，就無法選擇，通過此方法，就能搞定類似問題了。

2.支援多種User-Agent

對於想要模擬其他不同瀏覽器或者特定的需要，可以去：

Tools->Change User agent string中：

去設定不同的值。

預設是IE9，其他還支援IE6，IE7，IE8，Google Chrome，Mozilla Firefox，Opera，Bing Bot，設定還可以Custom自定義自己所需要的值。

3.一些小工具：標尺Ruler，顏色選取器Color Picker等

Tools-> show ruler（Ctrl+L），顯示標尺，方便檢視網頁元素的位置。

Tools->Show color picker（ctrl+K）：可以捕獲螢幕的畫素點的顏色，對於html開發人員應該比較有用。

4.javascript格式化

對於此功能，要單獨在此提醒一下。

因為之前在寫python指令碼抓取網頁，分析網頁的時候，就遇到過關於將雜亂的js指令碼格式化成易讀的格式，後來找來找去，找到一些網站：【整理】javascript/HTML線上格式化工具(Online Formatter)

去實現js格式化的功能。

而今天無意間發現，原來IE9中，也有此功能。

Script->那個工具圖示（configuration Ctrl+Alt+O）->Format Javascript：

同時也有自動換行Word Warp。

5.關於javascript除錯功能

這個是後來才發現的，對於開發，分析js原始碼執行過程來說，極其好用的功能。

Script –> Start Debug(F5)

對於如何開始除錯，需要提示一下。

對於開啟某個網頁後，開發工具會自動識別其中的js指令碼，然後並列出來：

選擇好自己要除錯的js，對著需要打斷點的地方點選右鍵->Insert Breakpoint，然後點選Start Debuging，然後會自動重新載入，就可以開始除錯，執行到對應的斷點的地方，就會停下來，餘下的除錯，和Visual Studio 中都很類似了，其中F5是開始除錯，F10是按行執行，F11是逐條語句，進入函式式的執行，Shift+F11是跳出函式。

如果點選Start Debuging後，指令碼不執行，那麼嘗試在位址列中重新輸入當地網址，重新載入頁面，如果重新載入的頁面中，對應的js檔案沒變的話，即還是包含當前你所加了斷點的js檔案，那麼就可以開始當重新載入網頁，執行到你所加斷點的位置，然後就可以開始除錯了。

此處關於IE9中的除錯javascript，說說我所遇到的，需要注意的一些情況：

1.如果重新載入網頁，沒有包含你之前加了斷點的js檔案，那麼肯定也就無法執行到對應的斷點位置，你也就沒法debug了。此種情況，我就遇到，skydrive中，載入對應的js檔案，是訪問類似於這樣的地址：

其中2Jro0r84zTRoocI0W5VmeA是每次都不一樣的，導致我對當前js檔案添加了斷點，結果重新載入網頁，所獲得的頁面中，由於這個Bucket1.js的地址變了，就沒法執行到我這個地址了。

所以，也就沒法debug了。很是鬱悶。此種情況，對於別的一般的網站，應該很少出現的。

也只是會在涉及https，加密的檔案等情況中，才會遇到這樣的事情。

2.如果你js中加斷點的位置，是重新載入js重新執行，而沒有執行到的位置，那麼當前也就無法debug了。

此種情況，有可能出現在，你自己對js中函式的執行流程理解錯了，因此打的斷點，實際沒有執行到。

此種情況，也是需要注意的，尤其是很複雜的js，要多打幾個可能會執行到的斷點，以避免沒有執行到斷點的情況。

3.如果遇到除錯過程中，對於變數（全域性，區域性）想要修改其值，但是實際卻修改不了，即不給修改，改了也沒用，那麼又想要實現控制函式的執行，那麼可以換種方式。

即點選你想要其函式執行的對應的語句，比如if中的else部分之類的，那麼可以對著對應，想要跳轉過去的語句，右擊，選擇“設定下一條語句”：

然後就跳轉到對應的語句去了，就可以間接實現改變程式執行邏輯的功能了。

另外值得一提的是，除錯過程中，變數的顯示，很是方便，和Visual Studio  2010中的一樣，可以通過滑鼠移動到對應變數上面，就可以動態顯示對應的變數的值，極大地方便了除錯，而且除錯介面，不得不說，的確做得很好看，也算很好用。

6.檢視當前cookies的值

可以通過Cache->view cookie information，會開啟一個新的頁面，顯示出當前所有的cookie的值，也算方便開發者檢視cookie的值了。

7.查詢功能很好用

可以實現類似於全文查詢，在整個專案中查詢的功能，在查詢框中輸入一個字串，可以在抓取的網頁原始碼中，request header，response header等內容中去查詢，方便分析原始碼。

• 缺點

1.使用該開發人員工具之前，比如先開啟某個頁面才可以

需要當前開啟一個頁面，然後才可以F12調出該工具，否則無法調出該開發人員工具。這點對於不熟悉的人，還是要提醒一下的。

2.Pin之後的F12的視窗高度最高只能是頁面高度的一半

如果將開發工具Pin（Ctrl+P）：

到當前頁面中後，對於開發工具的高度，拖拽是可以改變高度的，但是最高只能是當前頁面的一半的高度，剩下上面一半高度，留作顯示網頁內容。

此點還是不太爽的，不能像Chrome中一樣，自己隨意拖拽改變高度。

感覺像是，開發IE9開發工具的的開發人員，多此一舉的為使用者考慮了，才導致現在的強制規定Pin到視窗的開發工具的高度，最高只能是視窗高度的一半。

【Chrome的Ctrl+Shift+I的開發人員工具】

• 優點/功能

1.一鍵拷貝

在Network介面下，對於抓取到的任何一個頁面，

右鍵點選，可以出現多個選項，其中有copy request headers選項，支援一鍵拷貝所有的request header資訊。

類似的功能還有一鍵拷貝response header等，還是很方便拷貝資訊，用於分析的。

否則，就要自己手動用滑鼠選擇，再拷貝，就有點麻煩了。

2.在檢視網頁相關內容時候，支援view source和view parsed模式之間切換

在分析網頁提交內容，返回的值等過程中，所看到的request header，request post data，response header等資訊的時候，有view source和view parsed兩種模式，點選即可及時切換，方便了資料分析。

其中對於資料，parsed就是原始碼中用UrlEncode編碼之後的資料，比如將斜槓/變成%2F。

對於header，parsed就是對於原始的header資料按照協議規範去解析。

• 缺點

1.不能很方便的查詢

經常需要查詢某個變數或者字串，結果在Chrome的開發人員工具中，無法搜尋到，只有打開了所抓取的，某個html網頁，然後搜尋才能搜到，而對於其他在request header或者是response header中的值，就無法搜尋，這點很是不爽，導致網頁分析無法繼續下去。

而對應的IE9就支援，類似於全文搜尋的功能，可以直接在所有的內容中查詢，很是方便，在此贊一下。

【總結】

1.分析網頁的執行，跳轉等過程中，可以的話，最好還是IE9和Chrome都同時使用，這樣易於發現真正的執行過程。

否則萬一遇到類似IE9有bug而Chrome是正常的，此時就不會被bug所打擾，而找到真正的網頁的執行過程。

比如，遇到一個IE9中的bug，對於訪問一個網頁所產生的重定向redirect，而抓取的過程中，跳轉後的地址的request header中，就顯示了多餘的內容，導致混淆了分析的過程。而對應的Chrome中，就可以正常抓取並顯示此跳轉的過程。