chrome使用

本文轉載於http://www.cnblogs.com/tester-l/p/5743031.html

Chrome調試工具各個工具的做用：

Element

Elements板塊你能夠看到整個頁面的Dom結構。你能夠在這裏編輯HTML,查看元素CSS,查找元素等等。

Console

Console應該都很熟悉了吧？常常會覺得少寫了’}’而報語法錯誤。固然它的功能遠不止這些。點擊這裏查看更多

Sources

Sources就是全部資源了，你能夠看到頁面加載的資源，圖片，css,js等，它們會按照資源的來源分類。

Network

 這個板塊，你能夠查看頁面所加載的全部資源響應狀況，響應時間，瀏覽器等待時間，狀態碼，MINE Type,資源大小等。

Timeline

跟前面的工具相比，Timeline就高級不少了。它可讓你查看瀏覽器的渲染流程。解析代碼,佈局，繪製，合併渲染層。瞭解更多，查看以前的文章瀏覽器渲染流程

Profiles

Profiles工具主要是用來檢測CPU佔用程度，堆棧申請的內存。

Resources

Resources工具顯示資源的，跟Sources不一樣的是，它會對文檔類型分類。而且它能夠查看，增長，刪除，修改頁面LocalStorage，SessionStorage,Cookies等等。

 

Timeline面板

左上角有一個灰色的圓點，這是錄製按鈕，按下它會變成紅色。而後，在網頁上進行一些操做，再按一次按鈕完成錄製。

Timeline面板提供兩種查看方式：橫條的是"事件模式"（Event Mode），顯示從新渲染的各類事件所耗費的時間；豎條的是"幀模式"（Frame Mode），顯示每一幀的時間耗費在哪裏。

先看"事件模式"，你能夠從中判斷，性能問題發生在哪一個環節，是JavaScript的執行，仍是渲染？

 

不一樣的顏色表示不一樣的事件。

 

• 藍色：網絡通訊和HTML解析
• 黃色：JavaScript執行
• 紫色：樣式計算和佈局，即重排
• 綠色：重繪

哪一種色塊比較多，就說明性能耗費在那裏。色塊越長，問題越大。

 

 

幀模式（Frames mode）用來查看單個幀的耗時狀況。每幀的色柱高度越低越好，表示耗時少。

 

 

你能夠看到，幀模式有兩條水平的參考線。

 

 

下面的一條是60FPS，低於這條線，能夠達到每秒60幀；上面的一條是30FPS，低於這條線，能夠達到每秒30次渲染。若是色柱都超過30FPS，這個網頁就有性能問題了。

此外，還能夠查看某個區間的耗時狀況。

 

 

或者點擊每一幀，查看該幀的時間構成。

 

快速切換文件

按Ctrl+P就能快速搜尋和打開你項目的文件。

 

在源代碼中搜索

你們都知道若是在要在Elements查看源碼，只要定位到Elements面板，而後按ctrl+f就能夠了

 

在源代碼中快速跳轉到指定的行

在Sources標籤中打開一個文件以後，按Ctrl + G，而後輸入行號，chrome控制檯就會跳轉到你輸入的行號所在的行。或者ctrl+p後輸入  :行號；

 

使用多個插入符進行選擇

當編輯一個文件的時候，你能夠按住Ctrl在你要編輯的地方點擊鼠標，能夠設置多個插入符，這樣能夠一次在多個地方編輯

 

格式化凌亂的js源碼

有時候看到壓縮好的一團糟的js，都不知道從何着手去看。chrome控制檯有內建的美化代碼功能，能夠返回一段最小化且格式易讀的代碼。Pretty Print的按鈕在Sources標籤的左下角。

 

顏色選擇器

當在樣式編輯中選擇了一個顏色屬性時，你能夠點擊顏色預覽，就會彈出一個顏色選擇器。當選擇器開啓時，若是你停留在頁面，鼠標指針會變成一個放大鏡，讓你去選擇像素精度的顏色。

 

改變顏色格式

相信前端開發人員都知道，顏色有不少種表示方式，好比rgb,hsl,十六進制表示方法等。看了下面的這個圖，我相信你確定會佩服chrome的功能強大，連細節都作得那麼好。

在顏色預覽功能使用快捷鍵Shift + Click，能夠在rgba、hsl和hexadecimal來回切換顏色的格式

 

強制改變元素狀態（方便查看不一樣狀態下元素的樣式）

chrome控制檯有一個能夠模擬CSS狀態的功能，例如元素的hover和focus,能夠很容易的改變元素樣式。在CSS編輯器中能夠利用這個功能查看不一樣狀態下元素的樣式，我相信這個功能對於模仿別人界面的前端愛好者來講是很是實用的。

 

 

利用chrome來查看和編輯本地文件

事實上咱們能夠用chrome來查看本地文件，只要把相關目錄拖到chrome瀏覽器中便可。

 

選擇下一個匹配項

當在Sources標籤下編輯文件時，按下Ctrl + D 當前選中的單詞的下一個匹配也會被選中，有利於你同時對它們進行編輯。

 

可視化的DOM陰影

瀏覽器在構建如文本框、按鈕和輸入框一類元素時，其它基本元素的視圖是隱藏的。不過，你能夠在Settings -> General 中切換成Show user agent shadow DOM，這樣就會在元素標籤頁中顯示被隱藏的代碼。甚至還能單獨設計他們的樣式，這給你了很大的控制權

 

Chrome Dev開發者選項

Chrome Dev開發者選項,瀏覽器進入chrome://flags，你會看到不少瀏覽器不少隱藏功能，啓用開發者工具實驗。

 

而後再進入設置，你會看到新增長了不少開發者選項。

 

設備模式

設備傳感仿真

設備模式的另外一個很酷的功能是模擬移動設備的傳感器，例如觸摸屏幕和加速計。你甚至能夠惡搞你的地理位置。這個功能位於元素標籤的底部，點擊「show drawer」按鈕，就可看見Emulation --> Sensors.

 

 

利用chrome來查看和編輯本地文件

事實上咱們能夠用chrome來查看本地文件，只要把相關目錄拖到chrome瀏覽器中便可。

選擇下一個匹配項

當在Sources標籤下編輯文件時，按下Ctrl + D (Cmd + D) ，當前選中的單詞的下一個匹配也會被選中，有利於你同時對它們進行編輯。

 

好連接分享：

Chrome Developer Tools：Timeline Panel說明：http://www.cnblogs.com/tester-l/p/6018069.html

Chrome 控制檯不徹底指南：http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html

我所瞭解的chrome：http://www.cnblogs.com/liyunhua/p/4531964.html

你可能不知道console強大：http://www.cnblogs.com/liyunhua/p/4529079.html#top