Chrome內(nèi)核憑借各種好用碾壓各個瀏覽器，就連微軟都逃不過，現(xiàn)在已經(jīng)是一家獨(dú)大了。然而你以為chrome僅僅是因?yàn)楦鞣N速度快、體驗(yàn)好、插件豐富且無敵等等俘獲大量粉絲的嗎？太年輕了，下面就介紹一下Chrome自帶的developer tool神器（開發(fā)者工具），從此讓你的chrome開掛！??
本文主要分為以下幾個方面介紹，不管你是不是開發(fā)者，都會有所收獲：
Elements面板：主要介紹如何實(shí)時修改網(wǎng)頁中的內(nèi)容和樣式，保存網(wǎng)頁中任何禁止保存的圖片、文字。還可以模擬手機(jī)版網(wǎng)頁。
Console面板：主要可以查看控制臺信息輸出，取一些變量的值，寫js控制網(wǎng)頁等等。
Sources面板：查看網(wǎng)頁的資源文件列表，比如js源碼。主要還是對js調(diào)試。
Network面板：查看當(dāng)前網(wǎng)頁中所有的網(wǎng)絡(luò)請求，相當(dāng)于抓包。既然都能抓包了，所以對于所有的網(wǎng)頁內(nèi)容基本都能保存了，包括音樂、視頻等等內(nèi)容。
Application面板：取網(wǎng)站的所有存儲數(shù)據(jù)，比如：Cookies、Web SQL、Session、Local Storage等。
打開Chrome的開發(fā)者工具（Developer Tool）
我們在瀏覽網(wǎng)頁的時候，只需要按一下F12，或者右鍵網(wǎng)頁，在右鍵菜單中選擇“檢查”即可打開Chrome的開發(fā)者工具。備注：我經(jīng)常使用，所以裝了皮膚插件，看起來會好看點(diǎn)，哈哈哈~喜歡的可以自行下載安裝：DevTools Theme
Chrome開發(fā)者工具 - Elements面板
打開Chrome開發(fā)者工具的時候，默認(rèn)打開的就是Elements面板了，此面板會顯示當(dāng)前網(wǎng)頁的靜態(tài)HTML代碼，以及每個元素的樣式。我們可以在此面板中隨意修改任何元素、保存任何顯示的內(nèi)容。
Elements面板 - 元素選擇工具
元素選擇工具（Elements面板的左上角的箭頭一樣的按鈕），顧名思義就是用它可以選擇當(dāng)前頁面上的任何內(nèi)容。有了它，我們就可以點(diǎn)哪里，選哪里了，選擇了之后就可以隨意刪除、修改、保存了。
保存網(wǎng)頁中禁止保存的圖片
比如保存網(wǎng)頁中的圖片，只需要用選擇工具點(diǎn)擊一下圖片，就可以看到圖片的鏈接了，右鍵鏈接選擇“Open in new tab”就可以下載此圖片了。
復(fù)制網(wǎng)頁中禁止復(fù)制的的文字
如果遇到有的網(wǎng)頁文字不讓復(fù)制，比如360文庫，還在搞什么復(fù)制要登錄。。。有用嗎？我們只需要用元素選擇工具選擇我們需要復(fù)制的段落，然后雙擊之后右鍵就可以復(fù)制了。
修改網(wǎng)頁中的元素
哎呀，可憐我知乎寫了近60個回答，卻無人點(diǎn)贊，無人關(guān)注??。所以手動把關(guān)注數(shù)量修改一下吧，直接元素選中工具選一下關(guān)注數(shù)字，然后雙擊進(jìn)行修改就可以了，想改多少就改多少。
修改網(wǎng)頁元素的樣式
之前看有人分享稿定做設(shè)計(jì)快，然后上去看了一下發(fā)現(xiàn)不要錢的有水印，收費(fèi)價格又不便宜，索性只能盤他了。比如這個PPT上面有個很明顯的全屏水印，我們只需要用元素選擇工具選中水印，然后將水印元素的樣式修改為隱藏（樣式中加一個“display:none;”）就OK了。
刪除元素
刪除就很簡單了，只需要選中后，按delete就可以刪除了。印象中好像只有要截圖，發(fā)現(xiàn)有廣告的時候，刪一下廣告，用的比較少，就不介紹了。
Elements面板 - 模擬手機(jī)
現(xiàn)在很多網(wǎng)頁針對手機(jī)和電腦做差異化處理已經(jīng)很常見了，不僅僅是顯示內(nèi)容上的差異化，就連反爬蟲手段上也有差異，學(xué)過爬蟲的人都知道的，這里就不細(xì)說了。然后我們平時的生產(chǎn)力工具主要還是電腦，所以需要在電腦上模擬手機(jī)網(wǎng)頁。僅僅只需要在“Elements面板”點(diǎn)擊一下手機(jī)圖標(biāo)的按鈕，然后刷新一下頁面，即可模擬手機(jī)網(wǎng)頁效果了。比如：QQ音樂同一個頁面的電腦端和手機(jī)端差異性就很大。
Chrome開發(fā)者工具 - Console面板
此面板對于開發(fā)者來說，主要還是用來查看控制臺信息輸出的，除了開發(fā)者自己定義的一些輸出會打印除了，頁面中的一些錯誤也會毫無保留的打印在這里。不過也可以用來取一些變量的值，寫js控制網(wǎng)頁等等（寫js和在編輯器中寫無差異）。比如百度到現(xiàn)在還在想著改變世界，還真是初心寫的很清楚，但是卻走偏了，哈哈哈。然后你可以在Console面板中輸出一段表示不想去百度搬磚的代碼，調(diào)侃一下，哈哈哈~
Chrome開發(fā)者工具 - Sources面板
source也就是網(wǎng)頁資源了，資源面板會將瀏覽器加載當(dāng)前頁面時，所用到的資源文件，按照URL來和目錄進(jìn)行分類展示。這部分相當(dāng)于網(wǎng)頁的源代碼了，可以隨意保存、修改等。不過最終的還是在Source面板可以對網(wǎng)頁的js進(jìn)行調(diào)試，可以幫助網(wǎng)頁開發(fā)者解決問題，當(dāng)然也可以幫助爬蟲的人分析網(wǎng)頁的各種js操作啦，哈哈哈~
Sources面板 - js手動斷點(diǎn)調(diào)試
需要對頁面的哪個js文件進(jìn)行調(diào)試，只需要在source面板中找到這個js，然后在具體需要調(diào)試的方法對應(yīng)的行數(shù)處單機(jī)一下鼠標(biāo)，就可以進(jìn)行下斷點(diǎn)了。有些網(wǎng)頁的js可能進(jìn)行了壓縮，格式是亂的，只有一行，這時候只需要點(diǎn)擊一下左下角的大括號一樣的圖標(biāo)，就可以對此js進(jìn)行格式化了。
以有道翻譯為例，我找到了fanyi.min.js，并在發(fā)送的位置下了斷點(diǎn)，然后再次點(diǎn)擊“翻譯”就進(jìn)入到我下的斷點(diǎn)位置了，此時就可以進(jìn)行調(diào)試了。大進(jìn)入調(diào)試后有幾個常用操作：
右上方有一排控制js執(zhí)行的按鈕，依次是：停止斷點(diǎn)調(diào)試；繼續(xù)，但不進(jìn)入函數(shù)（F10）；進(jìn)入到函數(shù)中（F11）；從函數(shù)中跳出；禁用所有斷點(diǎn)，不做任何調(diào)試；程序遇到異常時是否中斷的開關(guān)。
Watch中可以添加需要監(jiān)控的變量，添加后會一直監(jiān)控顯示此變量的值和變化。
Call Stack這個是js的調(diào)用棧，可以理解為js執(zhí)行的順序，比如：上一步調(diào)用了什么方法，下一步會調(diào)哪些方法。
Scope選項(xiàng)中會列出了斷點(diǎn)處私有和公有的變量信息。
在js代碼中，鼠標(biāo)浮上具體的變量時，會顯示當(dāng)前此變量對應(yīng)的值。
然后單步走進(jìn)行調(diào)試，走的時候觀察可疑調(diào)用棧，很容易就找到有道翻譯的翻譯接口的加密參數(shù)的生成方法了。
Sources面板 - 事件監(jiān)聽、監(jiān)聽請求等等進(jìn)行js調(diào)試
上面舉的例子是找到j(luò)s和對應(yīng)的方法直接下斷點(diǎn)進(jìn)行調(diào)試，而有時候我們甚至都不知道是哪個js執(zhí)行的操作，找起來還挺麻煩。但萬萬沒想到Chrome提供了各種事件的監(jiān)聽，監(jiān)聽到對應(yīng)的事件后會自動斷下來進(jìn)入調(diào)試。比如：
在XHR/fetch Breakpoints中可添加監(jiān)聽請求鏈接，只要請求此接口時就會斷下來
在Event Listener Breakpoints添加需要監(jiān)聽的事件，比如鼠標(biāo)點(diǎn)擊
Chrome開發(fā)者工具 - Network面板
Network面板就一個作用就是會記錄當(dāng)前頁面的所有請求和響應(yīng)，比如：在有道翻譯頁面，點(diǎn)擊“翻譯”后就會請求“http://fanyi.youdao.com/translate_o?smartresult=dict&smartresult=rule”，點(diǎn)擊此請求后就能看到對應(yīng)的請求方法、請求狀態(tài)、響應(yīng)頭信息、請求頭信息、請求的表單參數(shù)、以及響應(yīng)數(shù)據(jù)。
然后此面板也有些常用的功能，比如請求分類篩選（全部、JS、圖片、媒體文件等），禁用緩存（刷新頁面時不會使用緩存數(shù)據(jù)，會重新加載最新的數(shù)據(jù)），設(shè)置網(wǎng)絡(luò)環(huán)境（可以模擬4G、3G、2G、不在線等等）。
利用Network面板進(jìn)行抓包，保存網(wǎng)頁音樂、視頻等媒體文件
網(wǎng)頁上所有的資源都是需要請求服務(wù)器才能顯示到網(wǎng)頁上的，所以只要是網(wǎng)頁上顯示的內(nèi)容，無論是音樂、視頻、圖片還是文檔等等，理論上都是可以保存到本地的。比如保存QQ音樂的歌曲，我們只需要在Network面板中刷新頁面，然后篩選媒體文件的請求，很容易就找到當(dāng)前歌曲的請求了。然后就只需要右鍵此請求，選中“Open in new tab”，然后在新頁面中點(diǎn)擊下載，就可以下次此音樂了。
上面介紹的其實(shí)挺簡單的，但是實(shí)際中，網(wǎng)站的開發(fā)者對于一些重要的數(shù)據(jù)，也會做好相應(yīng)的防護(hù)工作的，不可能這么輕易的就讓你獲取了。比如騰訊視頻的1080P視頻，這樣就可以保存的話，就沒那么多人充會員了??。原因是視頻會進(jìn)行分段，分成N個小段，這樣就會有N個請求，然后視頻數(shù)據(jù)還會進(jìn)行加密處理。好了，有興趣的就去斗智斗勇吧，哈哈哈
Chrome開發(fā)者工具 - Application面板
Application面板主要是用來展示當(dāng)前網(wǎng)站中存儲的一些數(shù)據(jù)，比如：Cookies、Web SQL、Session、Local Storage等。我們可以隨意的對這些數(shù)據(jù)進(jìn)行刪除或者修改，當(dāng)然實(shí)際中使用比較多的可能就是拿cookie去進(jìn)行模擬登錄等等了吧。反正數(shù)據(jù)都展示在這了，具體怎么用就仁者見仁智者見智了，不要干壞事就好了，哈哈哈~
