Chrome development tools學習筆記(3)

（上次DOM的部分作了些補充，歡迎查看Chrome development tools學習筆記(2)）

利用DevTools Elements工具來調試頁面樣式

CSS（Cascading Style Sheets層疊樣式表）定義了Web頁面的表示層，是能夠真正作到網頁表現與內容分離的一種樣式設計語言。本文主要是講調試工具，關於CSS學習能夠參考W3school的CSS部分：http://www.w3school.com.cn/css/index.asp。

DevTools的Elements右邊的部分，會依照優先級從高到低顯示應用在當前選中元素上的CSS樣式：

• 經過style屬性（或者DevTools）直接定義在元素上的CSS樣式。

• 該匹配的CSS樣式規則。

  好比，「span」會匹配到當前頁面HTML上的<span>標籤。

• 繼承樣式，繼承了被選擇元素的祖先元素匹配的CSS樣式規則。

圖中1~7相應的說明例如如下：

1. 和當前元素匹配的CSS選擇器和樣式。

2. 匹配在同一元素上的多個一樣的CSS屬性，會先按來源、權重和特異性進行重寫覆蓋，假設這些優先級都一樣，則後定義的屬性優先。詳細可以參照CSS文檔中的層疊順序說明。在Elements工具中，第一個定義的「color」屬性上面打上了刪除線，表示它被重寫覆蓋了。

3. User agent stylesheets（用戶代理樣式）也會在Elements工具中顯示出來，所謂用戶代理樣式，即瀏覽器提供的一些默認樣式，曾經給實習生出過道題目。經過CSS樣式來讓文字輸入text控件在得到焦點時候顯示藍色邊框，有的人發現Chrome如下默認text控件得到焦點就會顯示一個藍色邊框，事實上假設在DevTools下查看就會發現，這裏的藍色邊框效果，就是Chrome瀏覽器設置的用戶代理樣式。再細緻看的話，像text控件的邊框之類的屬性，都是經過用戶代理樣式設置上去的。
4. 開發人員定義的CSS樣式比用戶代理樣式優先級高，所以圖中開發人員定義的div的「display: inline-block;」樣式把用戶代理樣式的「display: inline-block;」重寫覆蓋了。前面講到了瀏覽器會設置很是多用戶代理樣式。在開發中。咱們一般使用CSS Reset，即導入一套CSS樣式覆蓋重寫不一樣瀏覽器的用戶代理樣式，以統一頁面顯示效果。

   這裏的Css Reset用到的就是優先級重寫覆蓋的原理。

5. 繼承的樣式顯示在「Inherited from [node]」分組如下，單擊分組頭部的節點名，會跳轉到相應的DOM節點。可以去CSS 2.1 properties table查看哪些CSS樣式是可被繼承的。
6. 「:root body」選擇器的特異性比單獨的「body」選擇器強。所以圖中「:root body」的「font-size: 30px」樣式覆蓋了「body」的樣式。
7. 和前一點同樣，由於CSS的優先級。「body」選擇器的「font-family: Helvetica」樣式也被覆蓋了。關於CSS重寫覆蓋的優先級。也很少贅述了。百度google上面有一大片。

在CSS選擇器中。逗號「,」被用來表示「或」的關係。即僅僅要知足當中一部分，即被匹配。在Elements工具中，「或」關係的多個選擇器中被匹配上的會以黑色字體表示。

在Elements工具中。可以經過CSS樣式的左邊checkbox來臨時禁用或者激活某條CSS樣式，某條樣式被禁用後，在代碼中相應的CSS樣式會被凝視。同理，在代碼中被凝視的CSS樣式。在Elements工具中，會以被禁用的狀態顯示出來（好比上圖的visibility樣式）。

在實際的項目中，很是有可能一個元素上面定義了大量的CSS樣式，咱們可以經過關鍵詞檢索的方式來高速定位到想要查看的CSS樣式。

編輯CSS樣式

點擊CSS樣式的選擇器、屬性名、屬性值可以分別對他們進行設置。點擊可以插入一條CSS規則，我的認爲比較讚的是利用DevTools進行CSS樣式改動的時候會依據輸入值本身主動補全輸入。好比使某個元素不可見的CSS樣式「visibility」可能記不太清楚拼寫，咱們僅僅需要在DevTools裏面CSS樣式名中輸入「v」，DevTools就會幫咱們本身主動找出來所有「v」開頭的CSS樣式。

對於樣式的值也是同樣，DevTools會本身主動給出相應CSS樣式可能的值，經過鍵盤上下鍵可以高速進行切換並實時顯示到頁面上。

點擊可以切換元素的狀態，和上一篇講的在DOM節點上右鍵選擇「Force element state」效果是同樣的。

CSS改動歷史

需要注意的是，和DOM的改動同樣，在DevTools裏面進行的所有CSS改動，都是臨時的。

這就意味着頁面一旦刷新。所有的改動都會丟失。咱們寫代碼時候可能需要重複屢次對某些地方進行微調。DevTools提供了一個改動歷史查看工具來幫助咱們查看當前對頁面上CSS以及JavaScript的改動。查看方法很是easy，在DevTools的「Sources」標籤如下，右鍵需要查看改動歷史的文件。選擇「Local modifications...」就能夠。咱們可以在改動歷史中，看到改動的時間，以及兩次改動先後的Diff，還可以對這些改動進行回滾操做。

 

順便說下，假設咱們需要讓CSS改動真正反映到源碼文件裏，可以選擇增長workspace來實現。

關於workspace，在之後會詳細展開。

 CSS盒模型查看

談到CSS佈局，一定會提起CSS的盒模型。

記得學校裏上網頁設計課的時候，還在用table來進行頁面佈局，但是放眼望去現在的站點，差點兒都是使用盒模型來佈局的。關於盒模型，在書上看到很是多概念性的東西，但是一直對margin、border、padding等概念不是很是熟悉。

經過DevTools的盒模型工具，可以很是直觀的幫助咱們上手CSS佈局。

 

經過在盒模型中設置不一樣的值。咱們可以很是直觀的看到margin、border、padding這些CSS屬性對於佈局的做用。光標移動到盒模型中的不一樣部分，頁面上該部分會以高亮顯示。可以在盒模型視圖中進行高速的改動，不需要加px單位，改動同樣是實時反饋在頁面上的。當調整頁面上元素位置的時候，可以幫助咱們高速知道改動的是上層元素的padding仍是當前元素的margin亦或是其它屬性。用了DevTools親本身主動手嘗試後，再看到網上的盒模型介紹，是否是一會兒就看懂了？

當設置position爲「static」之外的值的時候，margin外面還會有一個position的盒子。

 

 轉載自個人技術博客http://www.cc-lab.cn/chrome-dev-tools-3/

（完）