在Web開發(fā)中，我們經(jīng)常需要對頁面樣式進(jìn)行調(diào)試，Safari瀏覽器的開發(fā)者工具可以幫助我們進(jìn)行CSS調(diào)試。

首先，打開Safari瀏覽器，打開開發(fā)者工具（快捷鍵：Command+Option+i）。

接下來，點(diǎn)擊開發(fā)者工具中的“元素”標(biāo)簽，我們可以在頁面中選擇要調(diào)試的元素，同時(shí)，在右側(cè)的樣式面板中，我們能看到該元素的CSS樣式。

.example {
background-color: red;
color: white;
font-size: 24px;
}

我們可以在CSS樣式中進(jìn)行編輯，查看效果是否如預(yù)期。同時(shí)，我們還可以通過開啟“監(jiān)視”選項(xiàng)，來查看元素在不同狀態(tài)下的樣式，比如:hover或:focus效果。

如果我們想要檢查某個(gè)元素的盒子模型（box model），可以選擇該元素，然后在右側(cè)樣式面板中的“計(jì)算”標(biāo)簽下查看。

除了上述功能，Safari開發(fā)者工具中還有其他強(qiáng)大的CSS調(diào)試功能，比如查看CSS動(dòng)畫、布局等。我們可以通過仔細(xì)學(xué)習(xí)和使用，提高Web開發(fā)的效率和質(zhì)量。