本文轉載自酷殼
介紹chrome的一些不爲人知的功能
Chrome的開發者工具是個很強大的東西,相信程序員們都不會陌生,不過有些小功能可能並不爲大衆所知,所以,寫下這篇文章羅列一下可能你所不知道的功能,有的功能可能會比較實用,有的則不一定,也歡迎大家補充交流。
話不多話,我們開始。
- 代碼格式化
- 強制DOM狀態
- 動畫
- 直接編輯網頁
- 網絡限速
- 複製HTTP請求
- 抓個帶手機的圖
- 設置斷點
- 關於Console中的技巧
- 關於console對象
- 關於快捷鍵
代碼格式化
有很多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還可以幫你把動畫錄下來,你可以拉動動再畫的過程,甚至可以做一些簡單的修改。
直接編輯網頁
在你的 console 裏 輸入下面的命令:
document.designMode = "on"
於是你就可以直接修改網頁上的內容了。
P.S. 下面這個抓屏中還演示了一個如何清空console的示例。你可以輸入 clear() 或是 按 Ctrl+L
(Windows下),CMD + K
(Mac下)
網絡限速
你可以設置你的網絡的訪問速度來模擬一個網絡很慢的情況。
複製HTTP請求
這個是我很喜歡 的一個功能,你可以在 network選項卡里,點擊 XHR 過濾相關的Ajax請求,然後在相關的請求上點鼠標右鍵,在菜單中選擇: Copy => Copy as cURL
,然後就可以到你的命令行下去 執行 curl 的命令了。這個可以很容易做一些自動化的測試。
友情提示:這個操作有可能會把你的個人隱私信息複製出去,比如你個人登錄後的cookie。
抓個帶手機的圖
這個可能有點無聊了,不過我覺得挺有意思的。
在device顯示中,先選擇一個手機,然後在右上角選 Show Device Frame
,然後你就看到手機的樣子了,然後再到那個菜中中選 Capture snapshot,就可以抓下一個有手機樣子的截圖了。
我抓的圖如下(當然,不是所有的手機都有frame的)
設置斷點
除了給Javascript的源代碼上設置斷點調試,你還可以:
給DOM設置斷點
選中一個DOM,然後在右鍵菜單中選 Break on … 你可以看到如下三個選項:
給XHR和Event Lisener設置斷點
在 Sources 面頁中,你可以看到右邊的那堆break points中,除了上面我們說的給DOM設置斷點,你還可以給XHR和Event Listener設置斷點,載圖如下:
關於Console中的技巧
DOM操作
- chrome會幫你buffer 5個你查看過的DOM對象,你可以直接在Console中用
$0, $1, $2, $3, $4
來訪問。 - 你還可以使用像jQuery那樣的語法來獲得DOM對象,如:
$("#mydiv")
- 你還可使用
$$(".class")
來選擇所有滿足條件的DOM對象。 - 你可以使用
getEventListeners($("selector"))
來查看某個DOM對象上的事件(如下圖所示)。 - 你還可以使用
monitorEvents($("selector"))
來監控相關的事件。比如:monitorEvents(document.body, "click");
Console中的一些函數
1.monitor函數
使用 monitor函數來監控一函數,如下面的示例
2.copy函數
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")
於是,你可以定義一些相關的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, '--');
}
關於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)
關於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,你就可以看到所有的快捷鍵了
如果你知道更多,也歡迎補充!
(全文完)