在瀏覽器開發者工具中，我們可以很方便地查看網頁的源代碼和CSS樣式，進而調試問題和優化頁面。本文將介紹如何查看瀏覽器源代碼中的CSS樣式。 首先，我們需要打開我們要查看的網頁，并在瀏覽器中開啟開發者工具。通常情況下，我們可以使用快捷鍵"F12"或者右鍵菜單中的“檢查元素”來打開開發者工具。 打開開發者工具后，我們可以看到一排標簽。這些標簽分別對應著不同的功能，包括Elements、Console、Sources、Network、Performance、Memory等。在本文中，我們主要關注的是Elements和Sources兩個標簽。 在Elements標簽中，我們可以看到網頁的HTML結構。如果我們想要查看某個元素的CSS樣式，只需要在右側的Styles面板中找到該元素對應的樣式規則即可。 而在Sources標簽中，我們可以看到瀏覽器加載的所有資源文件，包括CSS文件。在這里，我們可以通過點擊CSS文件名來查看該文件的源代碼。 在源代碼中，我們可以看到所有的CSS樣式規則。為了更方便地閱讀代碼，我們可以使用pre標簽來將代碼按照原來的格式展示出來。這會使代碼更加清晰易讀。 使用pre標簽的方法很簡單，只需要將代碼用pre標簽包裹起來即可。例如：

body {
background-color: #f1f1f1;
}
h1 {
color: red;
text-align: center;
}

這樣我們就可以將CSS代碼以原來的格式展示出來了。 總之，通過瀏覽器開發者工具中的Elements和Sources標簽，我們可以很方便地查看網頁的CSS樣式。而使用pre標簽則可以使代碼更加易讀，方便我們的調試和優化工作。