Chrome開發者工具
聲明：本教程從安全角度出發講解，只爲增加讀者的安全知識，提升讀者數據安全意識，以及對於病毒和釣魚網站的防護能力。絕無其他任何目的與用途。
一、打開開發者工具
有時候網站爲了反調試，會禁止你打開開發者工具，或者有的小說網站還會禁止你複製，這些都是通過JS做到了，因爲JS就是用來和人交互的嘛。不過開發者工具可是我們逆向的基礎，不打開可不行，打開開發者工具有以下幾種方式，讀者可以自行選擇。
1.F12打開開發者工具（有時候會被禁用）
2.某個元素上點擊右鍵檢查（有時候會被禁用）
3.快捷鍵（有時候會被禁用）
4.瀏覽器->更多工具->開發者工具
5.空白頁面打開開發者工具之後再切換回去（萬能）
二、面板介紹
1.元素面板
元素面板就是elements面板，裏邊會顯示HTML，不過這是被CSS和JS綜合的結果，並不是一開始的網頁源代碼。我們選中某個元素，按下H可以隱藏元素，當然複製粘貼撤銷快捷鍵也都可以用，增刪改查元素也都可以。如果是要做爬蟲的話，解析頁面定位元素往往需要xpath後者CSS選擇器，我們可以直接在元素上右鍵點擊Copy，選擇我們需要的Xpath或者Selector的語法來定位元素。當然也可以按下CTRL+F來自己編寫定位語法，這裏不再贅述。右鍵點擊元素Break on可以下元素斷點，不過不常用。裏邊有三種監聽方式，分別是子樹改變時、屬性變化時和元素被移除時。
右邊的欄目裏，Styles是元素的渲染CSS等，我們不需要這些。我們需要了解的只是Event Listeners，這裏邊可以查看元素綁定的事件。
附註：全屏長截圖Run command---capture full size screenshot。
2.控制檯面板
在控制檯面板Console中，我們可以和頁面元素進行交互，相當於一個調試器。裏邊可以直接使用JS語法，我們在選擇元素的時候，輸入$0表示選中的當前元素；$1是上一次選擇的節點，一直到$4；$$選擇所有的相關元素$$("css/xpath")，返回一個數組；$_是對控制檯上次執行結果的引用輸出。我們在需要某個數值的時候，可以直接輸入它的變量名就能得到它的結果，前提是在它的作用域內。
3.源代碼面板
這裏是存放網頁源代碼文件的地方，左邊snippets允許你存放自己的JS代碼到DevTools裏邊，方便複用，比如說一些加密代碼庫。sources面板snippets中new snippte添加代碼後，必須右鍵run運行纔可以使用。按下快捷鍵CTRL+P可以打開menu，在command menu中使用！+代碼塊名，方便查找預設代碼塊。
4.網絡面板
filter可以過濾請求包。我們右鍵點擊狀態欄可以自定義請求表。再就是重發XHR，不過必須是XHR請求才行。
5.應用面板
有Storage可以查看一些關鍵信息，Cookies可以編輯。主要就是查看發送了哪些東西。
6.settings面板
勾選Log XMLHttpRequests，開啓AJAX Hook。可以展開對堆棧信息詳細查看，直接點擊JS跳轉。
三、Chrome快速定位
1.一般情況下下斷點，首先抓包，之後搜索關鍵詞定位JS代碼。比如搜索username的時候，我們可以加上一些標識符以減少搜索數量。
username
username=
username =
username:
2.使用XHR斷點，找到XHR的URL，添加斷點，配合堆棧回溯。或者使用callstack函數堆棧和initiator堆棧定位JS。
3.事件斷點，比如可以click斷點，大多數會zheyang斷在源代碼裏，之後下一步進入，慢慢調試。
4.console調試。monitor監聽方法、monitorEvents監聽事件、watch監聽變量。選中元素，在console中輸入monitorEvents（$0），監聽這個元素事件。如果事件太多的話，monitorEvents（$0，“click”）只監聽一個事件。monitor($0.onclick)可以用來監聽函數onclick方法或者monitor(Array.prototype.push)監控數組push方法，unmonitor取消監控。右邊的面板有個watch，會監聽變量的變化，我們可以按下+自定義添加變量，觀察變量的變化。
5.contional breakon條件斷點，會返回布爾值來判斷是否停止。
6.console插樁，.contional breakon條件斷點並不一定必須要輸入表達式，我們輸入console.log來打印關鍵信息也可以。比如console.log("用戶名",username)。