Chrome開發者工具的小技巧

coolshell發表於2017-01-22

  Chrome的開發者工具是個很強大的東西,相信程式設計師們都不會陌生,不過有些小功能可能並不為大眾所知,所以,寫下這篇文章羅列一下可能你所不知道的功能,有的功能可能會比較實用,有的則不一定,也歡迎大家補充交流。

  話不多話,我們開始。

  程式碼格式化

  有很多css/js的程式碼都會被 minify 掉,你可以點選程式碼視窗左下角的那個 { }  標籤,chrome會幫你給格式化掉。

  強制DOM狀態

  有些HTML的DOM是有狀態的,比如<a> 標籤,其會有 active,hover, focus,visited這些狀態,有時候,我們的CSS會來定關不同狀態的樣式,在分析網頁檢視網頁上DOM的CSS樣式時,我們可以點選CSS樣式上的 :hov 這個小按鈕來強制這個DOM的狀態。

  動畫

  現在的網頁上都會有一些動畫效果。在Chrome的開發者工具中,通過右上角的選單中的 More Tools => Animations 撥出相關的選項卡。於是你就可以慢動作播放動畫了(可以點選 25% 或 10%),然後,Chrome還可以幫你把動畫錄下來,你可以拉動動再畫的過程,甚至可以做一些簡單的修改。

Chrome開發者工具的小技巧

  直接編輯網頁

  在你的 console 裡 輸入下面的命令:

document.designMode = "on" 

  於是你就可以直接修改網頁上的內容了。

  P.S. 下面這個抓屏中還演示了一個如何清空console的示例。你可以輸入 clear() 或是 按 Ctrl+L(Windows下),CMD + K (Mac下)

Chrome開發者工具的小技巧

  網路限速

  你可以設定你的網路的訪問速度來模擬一個網路很慢的情況。

  複製HTTP請求

  這個是我很喜歡 的一個功能,你可以在 network選項卡里,點選 XHR 過濾相關的Ajax請求,然後在相關的請求上點滑鼠右鍵,在選單中選擇: Copy => Copy as cURL,然後就可以到你的命令列下去 執行 curl 的命令了。這個可以很容易做一些自動化的測試。

Chrome開發者工具的小技巧

  友情提示:這個操作有可能會把你的個人隱私資訊複製出去,比如你個人登入後的cookie。

  抓個帶手機的圖

  這個可能有點無聊了,不過我覺得挺有意思的。

  在device顯示中,先選擇一個手機,然後在右上角選 Show Device Frame,然後你就看到手機的樣子了,然後再到那個菜中中選 Capture snapshot,就可以抓下一個有手機樣子的截圖了。

Chrome開發者工具的小技巧

  我抓的圖如下(當然,不是所有的手機都有frame的)

  設定斷點

  除了給Javascript的原始碼上設定斷點除錯,你還可以:

  給DOM設定斷點

  選中一個DOM,然後在右鍵選單中選 Break on … 你可以看到如下三個選項:

Chrome開發者工具的小技巧

  給XHR和Event Lisener設定斷點

  在 Sources 面頁中,你可以看到右邊的那堆break points中,除了上面我們說的給DOM設定斷點,你還可以給XHR和Event Listener設定斷點,載圖如下:

Chrome開發者工具的小技巧

  關於Console中的技巧

  DOM操作

  • chrome會幫你buffer 5個你檢視過的DOM物件,你可以直接在Console中用 $0, $1, $2, $3, $4來訪問。
  • 你還可以使用像jQuery那樣的語法來獲得DOM物件,如:$("#mydiv")
  • 你還可使用 $$(".class") 來選擇所有滿足條件的DOM物件。
  • 你可以使用 getEventListeners($("selector")) 來檢視某個DOM物件上的事件(如下圖所示)。

Chrome開發者工具的小技巧

  • 你還可以使用 monitorEvents($("selector")) 來監控相關的事件。比如:
monitorEvents(document.body, "click");

  Console中的一些函式

  1)monitor函式

  使用 monitor函式來監控一函式,如下面的示例

Chrome開發者工具的小技巧

  2)copy函式

  copy函式可以把一個變數的值copy到剪貼簿上。

  3)inspect函式

  inspect函式可以讓你控制檯跳到你需要檢視的物件上。如:

  更多的函式請引數官方文件 – Using the Console / Command Line Reference

  Console的輸出

  我們知道,除了console.log之外,還有console.debug,console.info,console.warn,console.error這些不同級別的輸出。另外一個鮮為人知的功能是,console.log中,你還可以對輸出的文字加上css的樣式,如下所示:

console.log("%c左耳朵", "font-size:90px;color:#888")

Chrome開發者工具的小技巧

  於是,你可以定義一些相關的log函式,如:

console.todo = function( msg){
  console.log( '%c%s %s %s', 'font-size:20px; color:yellow; background-color: blue;', '--', msg, '--');
}
console.important = function( msg){
  console.log( '%c%s %s %s', 'font-size:20px; color:brown; font-weight: bold; text-decoration: underline;', '--', msg, '--');
}

Chrome開發者工具的小技巧

  關於console.log中的格式化,你可以參看如下表格:

指示符 輸出
%s 格式化輸出一個字串變數。
%i or %d 格式化輸出一個整型變數的值。
%f 格式化輸出一個浮點數變數的值。
%o 格式化輸出一個DOM物件。
%O 格式化輸出一個Javascript物件。
%c 為後面的字串加上CSS樣式

  除了console.log列印js的陣列,你還可以使用console.table來列印,如下所示:

var pets = [
  { animal: 'Horse', name: 'Pony', age: 23 },
  { animal: 'Dog', name: 'Snoopy', age: 13 },
  { animal: 'Cat', name: 'Tom', age: 18 },
  { animal: 'Mouse', name: 'Jerry', age: 12}
];
console.table(pets)

Chrome開發者工具的小技巧

  關於console物件

  • console物件除了上面的打日誌的功能,其還有很多功能,比如:
  • console.trace() 可以打出js的函式呼叫棧
  • console.time() 和 console.timeEnd() 可以幫你計算一段程式碼間消耗的時間。
  • console.profile() 和 console.profileEnd() 可以讓你檢視CPU的消耗。
  • console.count() 可以讓你看到相同的日誌當前被列印的次數。
  • console.assert(expression, object) 可以讓你assert一個表示式

  這些東西都可以看看Google的Console API的文件

  其實,還有很多東西,你可以參看Google的官方文件 – Chrome DevTools

  關於快捷鍵

  點選在 DevTools的右上角的那三個堅排的小點,你會看到一個選單,點選 Shortcuts,你就可以看到所有的快捷鍵了

  如果你知道更多,也歡迎補充!

相關文章