一、打開

• 使用快捷鍵：Ctrl + Shift + C
• Web開發(fā)者工具 – 查看器

二、選擇元素

右鍵單擊網(wǎng)頁(yè)上的一個(gè)元素，并選擇“查看元素”

點(diǎn)擊開發(fā)者工具的左上角的圖標(biāo)：選取頁(yè)面中的元素

使用方向鍵來(lái)改變當(dāng)前選中的元素：

• 上：當(dāng)前元素的上一個(gè)元素
• 下：當(dāng)前元素的下一個(gè)元素
• 左：高亮當(dāng)前元素的父級(jí)
• 右：高亮當(dāng)前元素的子級(jí)，如果沒(méi)有子級(jí)則就輪到同級(jí)， 如果沒(méi)有同級(jí)就輪到下一個(gè)節(jié)點(diǎn)。

當(dāng)一個(gè)元素及其父級(jí)占據(jù)了屏幕同一個(gè)空間的情況下，只使用鼠標(biāo)很難選中其中一個(gè)元素，這個(gè)功能就特別有用了。

三、查看和編輯HTML

1、搜索

• 點(diǎn)擊搜索框，輸入你想尋找的類型按“Enter”，頁(yè)面中的第一個(gè)元素類型將被選中。
• 再按“Enter”查找下一個(gè)。

2、html樹

每個(gè)箭頭表示一個(gè)節(jié)點(diǎn)：單擊箭頭來(lái)展開節(jié)點(diǎn)。如果你按住Alt鍵單擊箭頭，會(huì)一次性展開下面的所有節(jié)點(diǎn)。

3、右鍵菜單

在一個(gè)特定節(jié)點(diǎn)使用右鍵彈出菜單執(zhí)行某些常見的任務(wù)。（編輯，復(fù)制，粘貼，控制狀態(tài)）

4、編輯html

• 直接在HTML面板編輯HTML標(biāo)簽、屬性和內(nèi)容：雙擊要編輯的文本，修改它，按Enter鍵立即看到更改效果。
• 使用右鍵菜單，選擇“編輯HTML”，在文本框中進(jìn)行編輯
• 點(diǎn)擊并按住任何元素，然后將其拖在樹的上或下，當(dāng)您釋放鼠標(biāo)按鈕時(shí)，該元素將被插入相應(yīng)的位置。

四、查看和編輯CSS

列出作用于當(dāng)前元素的所有規(guī)則

1、規(guī)則顯示

規(guī)則的聲明，每條規(guī)則包含的樣式列表：屬性、值

• 選擇器旁邊的圖標(biāo)是一個(gè)指向目標(biāo)的按鈕：單擊按鈕在頁(yè)面上突出顯示匹配這個(gè)選擇器的所有節(jié)點(diǎn)。
• 被劃掉的聲明是被后面的規(guī)則所覆蓋的。
• 鼠標(biāo)懸停在一個(gè)聲明上，,旁邊會(huì)出現(xiàn)一個(gè)復(fù)選框，你可以用它來(lái)切換或關(guān)閉聲明。
• 右側(cè)鏈接到一個(gè)規(guī)則

2、過(guò)濾規(guī)則

• 不包含鍵入字符串的所有規(guī)則都被隱藏
• 其中包含了鍵入字符串的任何聲明都被強(qiáng)調(diào)

3、切換偽類

點(diǎn)擊“ :hov ”圖標(biāo)，對(duì)所選元素切換偽類 :hover, :active, :focus

4、鏈接到css文件

在每一個(gè)規(guī)則的右上方會(huì)有顯示：源文件名和行號(hào)，并附有鏈接，點(diǎn)擊后在樣式編輯器中打開該文件。

5、查看計(jì)算后CSS

• 切換到”計(jì)算后“視圖。這里顯示選定元素的每個(gè)CSS屬性計(jì)算后的值
• 在檢索框中鍵入關(guān)鍵字可以進(jìn)行列表的實(shí)時(shí)過(guò)濾

6、添加和編輯規(guī)則

• 如果你點(diǎn)擊一個(gè)聲明或規(guī)則，你可以對(duì)其進(jìn)行編輯和查看，并立即看到結(jié)果。
• 點(diǎn)擊搜索框后的加號(hào)圖標(biāo)
• 要添加一個(gè)新的聲明到規(guī)則中，則點(diǎn)擊規(guī)則的最后一行（右括號(hào)占據(jù)行）

在編輯模式下您可以使用箭頭鍵來(lái)增大/減小規(guī)則數(shù)字

• 按一下向上箭頭會(huì)由“1px”變成”2px“，
• Shift +向上/向下將以10為最小單位改變，
• Alt +向上/向下變化值為0.1，
• shift+Page up/down 變化值為100。

7、復(fù)制規(guī)則

復(fù)制全部：右鍵全選，選擇復(fù)制

復(fù)制某一條規(guī)則：鼠標(biāo)移到這條規(guī)則范圍內(nèi)（或者指向目標(biāo)的按鈕），右鍵選擇復(fù)制規(guī)則

總結(jié)

以上是生活随笔為你收集整理的火狐浏览器页面元素查看的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。