Chrome 按下 F12 之後出現的功能是做什麼用的？

12-10

好多贊，謝謝大家關注，暫時就寫這麼多吧，再寫就跑題了，如果是做WEB開發或者前端的，重點多了解下Source和Console調試JS，真的很好用。

看了些其它回答，有些是用來扒圖片的，有些是寫爬蟲的（這個不要看Elements，因為瀏覽器會對一些不符合規範的標籤做補全或者其它處理，最好是Ctrl+U）。

圖片的話就不要看Network了，一個頁面圖片太多了，我們可以點擊網頁上的圖片然後右鍵-》審查元素，然後Elements會定位到一個&標籤，那個src屬性就是你要的圖片地址了，有的網頁會把右鍵禁掉了，下面有介紹打開Chrome DevTools的方法，用「放大鏡」定點陣圖片元素。

就這樣吧，大家乾巴爹

=================================原文=================================

雖然不是做前端開發的，但是對Chrome DevTools還是用的比較熟的。

自從知道F12以後，每次瀏覽網頁的時候看到什麼特別炫的效果或者功能，總是忍不住按F12，然後開始研究一番，這真是一種病。下面我們用知乎網來做些演示。

這個東西是前端開發人員的利器啊，要認真寫的話，寫一天也寫不完，先隨便寫一點吧，有時間再更新。

Elements 查看當前文檔的DOM信息
Network 查看網路請求的
Source 查看當前資源文件的（CSS,JS,IMAGE）
Resources 查看本地資源信息的（cookie,local storage,session storage等）
Console 查看調試用的，也可以直接寫JS代碼

其它我不怎麼用，沒有研究過^-^

Elements
題主看到的是用來模擬移動設備的一個功能，這樣就不用手機瀏覽器打開來看了。下面這個圖片是用來模擬nexus 5的，

最左面那個放大鏡是用來定位DOM元素的，你可以試下，選擇你要查看的網頁內容，點擊一下，看Elements選項卡，那裡應該定位到你點擊的那個元素了。這個比較常用。

右邊是當前選中的DOM元素的一些CSS樣式信息，可以直接編輯，在網頁上看到效果，移到某個具體的CSS樣式上，會出現一個複選框，可以點擊啟用或禁用該樣式。下面這個是禁用知乎導航欄的背景色

Network
接下來看下network，這個主要是用來查看當前的網頁的一些網路請求（CSS,JS,image，ajax，Document等），
這裡有基本的請求信息：
URL，請求方法，響應狀態碼，響應數據類型，響應數據大小，響應時間和每個階段所花費的時間。

用的比較多的估計就是XHR了，點擊具體的請求，可以看到當前請求的信息和伺服器響應的信息，這個很好用

下面這個圖我們可以知道知乎的實時消息實現用WebSocket實現的

如果Chrome的Network能像Firefox Dev版一樣，可以直接編輯信息重發就更好了 ^-^。

Source
Source估計是這裡最好用的一個了。先看張圖

這是知乎的一個JS文件，壓縮過的，基本沒有什麼可讀性，點左下角那對大括弧（{ }），格式化一下這個JS文件，就會變成下面這樣，可讀性還是太差，但最起碼調試的時候好點了，知道程序現在執行到哪一行了。

好用吧^-^，然後再打一個斷點，那麼這整個網頁就掛起來了，右邊是當前作用域的一些變數信息，
調試有 F10,F11,F8,SHIFT+F11等快捷鍵，不要問怎麼用，用下就知道了。
具體是：
F10，跳過當前方法（如果執行到一個自定義方法，不進入方法內部）
F11，進入當前方法（如果當前方法是一個自定義方法，進入方法內部）
SHIFT+F11 跳出當前方法
F8，跳到下一個斷點
想當年不知道有Chrome，用肉眼和alert來在IE下調試JS，邊流淚邊調試......說多了都是淚。總之現在你可以非常方便的調試JS了。

Resource
resource主要是用來查看當前網頁可以訪問到的一些本地信息，比如：Cookie，LocalStorage，SessionStorage，DB等
下面這圖是知乎的Cookie信息

Console
最後Console，這個主要是顯示JS文件裡面列印的日誌信息(console對象)。你也可以直接在裡面寫JS，查看或修改當前作用域的變數信息，配合Source的調試用，非常爽。
如果是當前作用域內的對象（包含全局對象）的話，console還會自動幫你補全，有的時候我會忘記某個對象有什麼方法，經常會用這個來看，或者console.dir(對象)看。

數組對像（實例）的方法

先寫這麼多。WEB開發人員開發的神器，總之，有了這個，媽媽再也不用擔心......

====================更新一些Console對象的吧=============================
Console對象的主要方法如下：

用法如下圖：

日誌的等級：debug，info，warn，error。
列印變數信息什麼的，一般用log方法，相對於alert，這方法真是好。
alert會讓瀏覽器掛起，如果alert的多了，還要一個個確定，最痛苦的時候，如果是一個對象，直接用alert列印的時候，直接是個object，要看具體某個屬性的值還要寫個循環，調試結束還特么要一個個刪除，調試到哭的有沒有。

console.log，不會掛起瀏覽器，在後台默默列印，對象會顯示對象的具體信息，如果刪除的話，點擊log信息的右下角，直接定位到文件。

console.table列印數組對象（數組每一項是對象）信息非常好

console.time(tag)和console.timeEnd(tag)可以用來計start和end間花費的時間
console.dir(object) 列印對象的原型信息，很好用有沒有。

還有其它一些沒怎麼用過的，大家可以自己去了解下。

下面內容請高手略過，寫給普通用戶看的。
=================================update================================
上面講的一些主要針對開發者的，普通用戶
也有些好用的東西，比如：

有些網站沒有註冊的用戶，老是彈出一些窗口，提示註冊（我就看個信息還要註冊，最討厭這樣的網站了，我偏不註冊）
有些網站把鍵盤的默認禁用了，想複製網站的東西複製不了

情況1：
以前經常碰到，現在本來想找個做演示的，但沒有找到，下面就以百度登錄為例吧（百度不登錄的用戶不會彈出登錄窗口的）

我們先用「放大鏡」選擇空白區域，先定位到遮罩的DOM元素上，定位的可能不是很准，這裡定位到子元素上了，一般這種情況我們往上層找，找到有個DOM元素有id屬性的那個，一般就是，或者你看瀏覽器的顯示當然DOM的區域，選中遮罩的DOM元素，然後右鍵-》 delete node，或者直接按Delete鍵，就可以刪除這個DOM元素了，如果刪錯了怎麼辦，沒事，不要急，重新刷新一下頁面就行了。

下面這個是刪除登錄窗口的，操作方式同上。

情況2：
有些網站按F12是沒有用的，因為JavaScript腳本把瀏覽器的默認事件給阻止掉了，但是沒事，只要你能打開Chrome DevTools，腳本怎麼阻止都沒有用。

打開後你就可以用「放大鏡」選中你要複製的內容，點擊定位到當前元素，然後就可以複製Elements裡面的內容。如果你要複製的內容裡面有HTML標籤，你不想要標籤怎麼辦，沒事，看下面這個圖片

這段文字裡面有一個圖片標籤和一個超鏈接，我們先給這個DOM元素添加一個id屬性，以便我們後面可以快速找到這個DOM元素，添加屬性方法：右鍵-》Add attribute。

我們添加一個id為robinbin的屬性，然後按Esc鍵，打開Console，寫一段Javascript。

document.getElementById("robinbin").innerText

回車就有了

先這樣吧......大家乾巴爹

感謝大家的關注，內容有點多，大家看的辛苦了，Chrome DevTools還有很多非常有用的功能，大家可以自己探索下，希望回答能對大家有所幫助。

歡迎來到里世界，在這裡你能看見光鮮的頁面背後的樣子。

我彷彿看到了又一個小朋友即將入坑前端！

對前端coder來說，F12是debug神器，
對普通網民來說，F12可以用來下載找不到下載按鈕的資源，去網頁廣告，一夜暴富等等，

比如說，在我按下F12之前，我的支付寶里只有不到1000元，然而幾秒鐘之後......

「運維脫髮早，DBA老得快，
你若學前端，必成高富帥」//求輕噴

歡迎題主入坑前端！

跟你說這個屌爆了，一般人我不告訴。
網頁圖片經常不允許你右鍵另存，不管他用了什麼技術，只要別嵌入到flash里，就可以F12找到resource，然後樹形結構一層層點開找吧，原圖就在裡面。
這一招屌到什麼程度我告訴你，曾經某網站里的圖屏蔽下載的技術超好，以至於這個網站都如此出名，但網站里的圖從來沒見過大規模流出去被二次轉載的（當然截屏是可以但肯定不現實），但用這一招就可以。
在線視頻，不允許下載，F12找到network，下面仔細找，總能找到cdn地址，複製下來貼迅雷里就能下了。

拋磚。
首先各選項卡依次為：

中文就是：（渣翻譯，隨便吐槽）
節點網路源時間軸配置文件資源文件審核控制台
放大鏡：視圖模式下選取節點
手機：啟用實時屏幕適配視圖Elements：
左欄以DOM樹形式查看網頁源代碼（HTML），點擊可依次展開各個節點查看具體代碼，並且在選中節點時會在網頁上實時顯示選中的節點（以色塊標註），這是調試網頁時最常用的功能。右鍵可編輯所選節點的代碼。
右欄實時顯示所選節點相匹配的CSS屬性。修改CSS屬性可在網頁實時顯示樣式的改動，這也是最常用的功能之一。其它子選項卡分別顯示所選節點的Box模型圖和涉及該節點的js事件列表。
Network：
以瀑布流形式列出該網頁所引用的圖片，音頻，視頻等文件（所以當你不知道怎麼下載網頁上的MP3和視頻時點開這個選項吧）以及css，js等等。

Update
以上是我個人常用的功能，專業性的介紹可以參考這篇文章
Chrome開發者工具使用手冊(一)
Chrome開發者工具使用手冊(二)
作者xueer | 悅享生活悅享前端

主要是給前端開發者瀏覽網頁用的，本來我想看看空間的說說，卧槽過了一會兒後，我發現我正在看某個效果是怎麼實現的，這是病啊。
有時候用這東西也會找個資源鏈接，比如片兒是吧。

搬運自Code School
不是很長的課，大概一兩個小時就看完了，豁然開朗
Code School - Discover DevTools

這個不要錢的～

開發者工具，題主給出的頁面是手機頁面效果預覽，前端開發頁面的時候不用在手機上測試效果，直接在chrome下看就好了。
其他的用處，比如調試css，js，查看請求，查看資源，查看網路請求時間，jsconsole 測試代碼等等，總之很強大

是用來招聘員工的

可以改支付寶餘額炫富

補充一個，前陣子剛發現，很好用。
就是用js查找一個元素不用寫一堆querySelector，從Element選中，就會賦值給$0，在Console可以打出。

就我一個人覺得知乎這個頁面很萌么

下載網頁上的各種東西
只要被我看到，你將失去版權

知道a站最近很多源的視頻無法看，在f12裡面輸入一段神奇代碼就能看了。

對於我來說，是盜圖、盜音樂、盜視頻用的。

很多迅雷下載的資源點擊自動下載捆綁版的xunlei7，我才不會告訴你們右鍵地址審查元素copy link ad就可以直接用精簡版xunlei下載東西。

調試。在設計網頁時，不是一下子就把整個網頁寫出來，是一段一段地寫，寫完後用瀏覽器打開所寫文件，看效果如果，若顯示不出，就需要f12來看哪裡有錯誤，更正

FireBug在手，互聯網我橫著走，，，
=============================
看到樓上有答主說了12306不可以自動查詢了，親看，尼瑪果然屏蔽了！票還沒買呢！
但尼瑪，能屏蔽的給力點么？！對於程序狗，這又讓我想起了某某系統的不安，細思恐極^_^#！

@Robin ,更簡單粗暴233,我會跟你說12306有我大程序員兄弟在么！

歡迎題主入前端坑我是來抖機靈的，，，

https://developers.google.com/web/tools/chrome-devtools

官方文檔，雖然不太全，但是基本的功能都提到了。

前端開發用得最多的應該就是"Element","Sources","Console","NewWork"這幾塊了。

網站的HTML。就是網站源代碼。