谷歌開發者工具除錯CSS樣式

通過谷歌開發者工具可以線上編輯HTML程式碼，具體參閱谷歌開發者工具線上編輯HTML程式碼一章節。

當然也可以線上編輯或者新增CSS樣式，下面結合圖示做一下介紹。

一.修改CSS程式碼:

滑鼠懸浮於要修改CSS程式碼的元素之上，然後滑鼠右擊，點選檢查:

點選檢查，開啟谷歌開發者工具，當前元素呈現變色顯示，並且會定位於相應css程式碼處:

然後點選右側的CSS程式碼進行修改即可，圖示如下：

將block修改為了inline。

二.新增CSS程式碼:

很多時候修改現有的CSS程式碼是不夠的，需要新增CSS程式碼:

（1）.修改引入的CSS檔案:

右擊引入的CSS檔案，然後點選open sources in panel，彈出如下介面：

然後你就可以在上面隨意的編輯修改了。

（2）.修改頁面內部樣式表：

這個就將其當做HTML程式碼處理即可，右擊彈出如下介面：

然後彈出如下介面：

然後就可以愉快的修改CSS程式碼了。

三.新增樣式類:

可以編輯HTML程式碼的方式來新增樣式類，谷歌也提供另一種方式:

選中指定的元素，然後點選.cls按鈕，在彈出框中寫入class名稱即可：

這時候，再點選右側的加號（+），即可為此樣式類編寫css程式碼了：