2021-05-12 14:32:11
Chrome審查元素使用：[1]Elements
2019-12-19 12:47:56
Chrome是一個強大的瀏覽器，不僅存取網頁速度快，而且提供了功能強大的分析工具，下面說下【審查元素】中的【Elements】如何使用。
1
首先使用Chrome隨便開啟一個軟體，比如：www.baidu.com。
2
在網頁的空白處，點選滑鼠右鍵調出選單，然後選擇審查元素。選擇（預設）Elements，會看到如下圖所示。
3
下面有很清晰的網站的結構，將滑鼠移到不同標籤上，也可以通過底部自動產生的標籤按鈕選擇標籤。如果介面某區域變成選中狀態，說明你現在選擇的標籤決定了上面的介面。
4
在標籤上右鍵會調出對應此標籤的選單，如我們編輯一下新聞的標籤，改成新鮮事。
5
對於控制元件的屬性也是同樣有效的，但是要知道，這些更改只是用戶端的更改，對伺服器不會有任何的影響。但是往往還是有用的，因為又不少網頁只在用戶端做了限制。一個是按鈕的disable屬性刪去，另一個是將onclick屬性刪去。
6
那麼右側區域是幹嘛的呢？可以看到上面的標籤分別是Style，Computed，Event Listener，...。即滑鼠所在標籤的樣式（字型顏色，大小，padding，margin等等），Computed更清晰地展示了位置關係。Event Listener顧名思義，事件監聽，即標籤有哪些事件，如滑鼠經過，點選，鍵盤按下等。
7
點選右上角的設定可以調出設定介面，（禁用JS，快捷鍵等），新視窗按鈕可以以新視窗方式開啟【審查元素】視窗。
相關文章