標籤：

Chrome 的審查元素功能有哪些奇技淫巧？

12-19

一直覺得chrome的審查元素功能很厲害，最近學了點html，css後感覺這個功能更有意思了，但是一直覺得不太會用，大家都是是如何使用審查元素這個功能的呢

Chrome開發者工具不完全指南（一、基礎功能篇）
Chrome開發者工具不完全指南（二、進階篇）
Chrome開發者工具不完全指南：（三、性能篇）
Chrome開發者工具不完全指南（四、性能進階篇）
Chrome開發者工具不完全指南（五、移動篇）
Chrome開發者工具不完全指南（六、插件篇）

好東西要分享 :)

==== 補充 ======
https://developers.google.com/web/tools/chrome-devtools/
Chrome 有哪些鮮為人知的用法？ - 軟體
用Chrome開發者工具做JavaScript性能分析
前端雜談 - 深入了解Chrome開發工具

對於開發者來說 Chrome 調試工具的奇技淫巧多了去了。
我就講一些普通老百姓都能用上的。

1. 下載網頁上的視頻
網頁上的在線視頻通常都是不提供直接下載的，所以可以試下這樣：

先選擇 Network 這一頁。
讓視頻稍微緩衝一會，然後觀察下方列表哪個文件最大
（可以點紅框里的 Size 來排序）而這個文件就是視頻了。
最左邊的一欄就是該視頻的地址。

2. 瀏覽網頁里的所有圖片

這次點 Resources 這頁，然後左側目錄樹點開 Images，裡面就是當前網頁中所有大小圖片了，可以用鍵盤上下翻看，如果想保存可以直接把圖片拽出來桌面。

3. 去掉網頁上的小廣告
偶爾總會遇到幾個網頁喜歡放一些浮動廣告，各種奇怪的遊戲廣告，經常就會擋住了你想按的按鈕或者想看的內容，有時候點 x 也關不掉，那麼你就可以臨時把它刪掉。
先點擊最左邊的這個放大鏡，

然後點選目標內容

然後按下鍵盤上的 Delete 鍵。

就刪掉這個東西了。

4. 網頁上這個字體很好看，是什麼字體？

同樣是先點擊放大鏡，然後選擇目標。
右側一欄找到 「font-family」

補充：經評論指正，右邊一欄選擇 "Computed" 這一頁更加準確。

-------------------------
想到什麼我再繼續補充吧。
這些事情都是有專門的 Extension 去做的，
不過要說的話就跑題了。
-------------------------

今天來補充一個
5. 模擬手機模擬器查看手機版網頁
這次我們點手機這個圖標：

然後點 Device 這裡可以選擇要模擬的設備屏幕

例如我選 iPhone 4

說一個審查自動隱藏元素的小技巧：
有些元素在點完「審查元素後」，滑鼠一移動就自動隱藏了，Elements Panel中選中了其他元素。
這種情況可以先點右鍵，然後滑鼠移到DevTools上，然後按按鍵盤的N鍵：
1）在要審查的元素上點擊右鍵
2）滑鼠移到DevTools上
3）按N

讓網頁密碼明文顯示，當你忘記密碼但卻在瀏覽器里保存了密碼也能用:

搜索 type="password"
改成 type="text"

但說審查元素這個tab，感覺最亮的功能是給HTML元素加斷點(元素上右鍵–&>break on)。可以在元素的屬性被修改時，元素被移除時，元素的子元素添加刪除時進入斷點。

當你想知道某個功能是在哪個js，哪個方法里實現的時候，可以快速定位。

html斷點調試啊
ajax斷點調試
html選擇器搜索
全局搜索
還有Console、Network的Preserve log、Filter選項簡直良心

類似的問題就不重複回答了，鏈接地址：Chrome 按下 F12 之後出現的功能是做什麼用的？ - roben 的回答

不知道大家有沒有碰見這種情況，查資料看到有用的信息需要記錄保存，這時候發現

這時候 Chrome 就厲害了，快捷鍵「command + alt + i」

在右側點擊小箭頭，然後在左側選中需要的內容

binggo！內容就有了！

當然圖片、視頻、音樂同理

----------逗逼預警------------

當然，如果你是一個逗逼的話還可以這樣

或者假象自己中了大獎

或者銀行賬戶里多了一個億，自己發揮想像吧，親測會鎮住不少群眾

1. 幾乎所有你能看到的，都可以直接改動並馬上反應出來：動態。
2. 所有資源你都可以找到來源，不管是一直存在還是臨時存在的：記錄。
3. 所有性能數據都可以記錄並展現出來。

一般用來可視化調試css樣式，調試ajax，然後模擬一下手機各種網路環境的載入速度。

終於遇到一個自己能回答的了.

一、 contenteditable 標籤
contenteditable 屬性規定是否可編輯元素的內容。

小技巧:
1.右鍵審查元素,選中body的DOM元素,右鍵Edit as HTML,在裡面添加一個 contenteditable 標籤,這時候你隨便點擊一下頁面,會發現在頁面上多了一個游標.

直接操作頁面把Chrome換成知乎兩個字

2.利用這個標籤實現動態編輯css
可以寫一個頁面,在style標籤上面添加一個contenteditable 標籤,這樣的話,style文件就能動態編輯而且直接生效.

上圖的頁面通過直接在頁面上修改body裡面的css值,變成了下圖

演示鏈接:sinaapp.com 的頁面
html

&
&
&
&
&
&
&可以直接編輯body裡面的內容。&
& &css可以動態生效。&
& &