使用chrome查看頁面元素的css樣式
我們在寫頁面的時候，可能總是不知道怎么回事，就發現某個元素出現了問題，但是不知道為什么會這樣，這時候，就需要使用強大的chrome了！！！
舉例說明：
1.
我們希望看到博客園這張圖片的具體信息。就可以打開chrome的開發者工具，點擊箭頭后選中該圖片，這時代碼就自動定位到了該元素的HTML代碼，如下圖所示：
這個頁面中，右上方的藍色陰影下即為圖片元素所在的HTML代碼，而開發者工具的左下方就是該元素的css樣式代碼：
其中最上面的是行內樣式，
往下有我們對其進行直接的樣式設置的代碼；
往下有從a元素繼承來的樣式，在往下會有從h1繼承來的樣式，一直繼承自html，這個繼承順序是按照嵌套順序來排列的。
而右下方是這個元素的盒模型，盒模型的下方是這個元素的所有屬性，我們可以通過其來判定我們寫的代碼存在的問題。
2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 100px; height: 100px; background: green; padding:20px; } </style> </head> <body> <div id="div" onclick="show()">這是一個div</div> <script> var div=document.getElementById("div"); div.onmouseover=function(){ div.style.backgroundColor="red"; } div.onmouseout=function(){ div.style.backgroundColor="green"; } function show(){ alert("哈哈，我就是show()函數"); } </script> </body> </html>
這時我們可以打開開發者工具：
我們可以看到具體信息，在右下角可以看出：background-origin為padding-box，因此這個盒子是標准的盒模型。
在左下方我們看到此時默認選中的是Styles選項，我們可以切換到Event Listeners選項中，顯示內容如下：
這三個事件的出現是因為我給div添加了三個事件。所以在Event Listeners中會出現三個時間。
我們還可以通過查看該事件來查看作用域鏈。
如下：
打開了這個事件之后，我們發現click這個監聽程序所對應的處理函數(handler)是function onclick(event); 而[[scopes]]即表示作用域鏈，這個作用域鏈的前端開始，一共涉及到了四個不同的作用域。
末端的作用域是全局作用域，緊接着是HTLMDocument作用域，接下來是Object即body，最后就是HTMLDivElement作用域。
3.實時調試我們的css代碼
當我們設置一個元素的css時，因為不知道到怎么樣的值才合適，所以我們需要不斷地在編輯器和瀏覽器之間切換，這無疑浪費了我們寶貴的時間，而chrome則可以幫助我們！
比如下面的代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>梯形</title> <style> div{ width: 200px; height: 200px; line-height: 200px; background: red; text-align: center; color:white; transform: rotateX(0deg); } </style> </head> <body> <div>918之初</div> </body> </html>
我希望可以觀察rotateX（）是如何使用的。按照之前的做法，我會先把0deg修改為20deg，然后保存，再去瀏覽器刷新查看效果；再把20deg修改為40deg，然后保存，再去瀏覽器刷新查看效果.....如此循環往復直到我看出效果為止。 然而，有了chrome我們就再也不需要這樣了，我們可以按下F12，選中元素，然后直接在css中調試，如下所示：
注意：數字的改變是因為我先把光標放在了括號里，然后按鍵盤的上下鍵即可改變，當然，我們也可以直接輸入任何你想要的數字。
值得注意的是：這里數值的改變並不會改變css文件中的值，這里只是方便我們調試使用。
4.查看與隱藏元素
在 Chrome 瀏覽器的 Elements 里面選中某個元素，按 h 可以隱藏該元素。
5.如何查看頁面的布局
在控制台中輸入：
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })