一個(gè)程序員按照要求編寫(xiě)一個(gè)網(wǎng)頁(yè)，不可能一次編寫(xiě)就完全達(dá)到目的，一般要對(duì)自己的的代碼修改調(diào)試幾次后才能到達(dá)要求，瀏覽器的F12開(kāi)發(fā)人員工具就可以很方便的幫助程序員調(diào)試自己的代碼。

瀏覽器F12功能介紹

調(diào)試時(shí)使用最多的功能頁(yè)面是：元素（ELements）、控制臺(tái)（Console）、源代碼（Sources）、網(wǎng)絡(luò)（Network）等。

元素（Elements）：用于查看或修改HTML元素的屬性、CSS屬性、監(jiān)聽(tīng)事件、斷點(diǎn)（DOM斷點(diǎn)：在JavaScript調(diào)試中，我們經(jīng)常使用到斷點(diǎn)調(diào)試，其實(shí)在DOM結(jié)構(gòu)的調(diào)試中，我們也可以使用斷點(diǎn)方法，這就是DOM Breakpoint（DOM 斷點(diǎn)））
控制臺(tái)（Console）：控制臺(tái)一般用于執(zhí)行一次性代碼，查看JavaScript對(duì)象，查看調(diào)試日志信息或異常信息。
源代碼（Sources）：該頁(yè)面用于查看頁(yè)面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調(diào)試JavaScript源代碼，可以給JS代碼添加斷點(diǎn)等。
網(wǎng)絡(luò)（Network）：網(wǎng)絡(luò)頁(yè)面主要用于查看header等與網(wǎng)絡(luò)連接相關(guān)的信息。

一，背景介紹

通常前端程序員在按照UI效果圖編輯網(wǎng)頁(yè)時(shí)，不可能一口將全部的代碼全部寫(xiě)好，通常情況是編寫(xiě)邊調(diào)，經(jīng)過(guò)反反復(fù)復(fù)的調(diào)試后才能達(dá)到要求的效果，這時(shí)候用Chrome瀏覽器的F12開(kāi)發(fā)者工具能形象直觀的幫助程序員調(diào)試自己的代碼，用好F12能顯著提高開(kāi)發(fā)者的工作效率，加快調(diào)試的速度。

二，知識(shí)剖析

1，F(xiàn)12開(kāi)發(fā)人員工具是一套按需采用的工具，網(wǎng)站開(kāi)發(fā)人員可以隨時(shí)在任何網(wǎng)頁(yè)上使用F12工具，從而快速調(diào)試的JavaScript中，HTML和級(jí)聯(lián)樣式表（CSS），還可以跟蹤并查明網(wǎng)頁(yè)或網(wǎng)絡(luò)的性能問(wèn)題。

注：部分電腦打開(kāi)F12是需要組合鍵：FN + F12。

三，具體實(shí)操

1，如何更改調(diào)試窗口的顯示位置？

先按F12進(jìn)入調(diào)試位置

Dosk side有四個(gè)選項(xiàng)，1。將開(kāi)發(fā)者工具單框拖出來(lái)2.放置左側(cè)3.放置底部4.放置右側(cè)。

一般都是谷歌瀏覽器是默認(rèn)放置在右側(cè)的，今天我們主要說(shuō)谷歌瀏覽器當(dāng)中的F12開(kāi)發(fā)者工具。

如果要進(jìn)行模擬手機(jī)端調(diào)試頁(yè)面的話(huà)，用左右布局調(diào)試會(huì)比較方便，如果是調(diào)試PC端頁(yè)面的話(huà)，將調(diào)試頁(yè)面放置下端會(huì)更好一點(diǎn)，這樣不會(huì)遮住部分的顯示內(nèi)容。

2，如何選中需要修改的元素？如何進(jìn)行手機(jī)端的調(diào)試？

首先打開(kāi)F12，圖上右上角有一個(gè)小鼠標(biāo)箭頭圖標(biāo)和一個(gè)小手機(jī)圖標(biāo)。我們用鼠標(biāo)小鼠標(biāo)箭頭圖標(biāo)然后點(diǎn)擊選擇網(wǎng)頁(yè)中的內(nèi)容，這時(shí)候就會(huì)在開(kāi)發(fā)者工具中看見(jiàn)該選中的內(nèi)容樣式顯示出來(lái)。選擇網(wǎng)頁(yè)中的內(nèi)容可以是一串文字也可以是一張圖片或者一個(gè)塊級(jí)元素。

點(diǎn)擊小手機(jī)圖標(biāo)，開(kāi)發(fā)者工具會(huì)將頁(yè)面模式換成模擬手機(jī)瀏覽的狀態(tài)，如上圖圖中正上方可選擇市場(chǎng)主流的不同品牌手機(jī)和不同的分辨率樣式來(lái)進(jìn)行頁(yè)面查看，從而觀察頁(yè)面在不同手機(jī)不同分辨率下的顯示效果。

3，如何更直觀的觀察到頁(yè)面中設(shè)置的盒子模型？

咱們?cè)贑SS布局會(huì)經(jīng)常用到盒子模型，可是在網(wǎng)頁(yè)上隨意點(diǎn)開(kāi)某一個(gè)塊級(jí)元素進(jìn)行審查，在管理者工具欄有一個(gè)直觀的盒子樣式（如上圖），你可以直接在盒子上進(jìn)行更改.margin，填充，邊框，內(nèi)容欄的上下左右各個(gè)值都可以進(jìn)行直觀的修改。

4，如何修改設(shè)置當(dāng)前元素的樣式，或在當(dāng)前元素對(duì)應(yīng)的類(lèi)上修改樣式？

①如何在當(dāng)前元素上修改？

選擇某一個(gè)元素，在開(kāi)發(fā)者工具底下會(huì)彈出一個(gè)當(dāng)前元素樣式 - 元素風(fēng)格。可在該選擇樣式下更改，這樣更改有一個(gè)好處，它不會(huì)影響其它位置相同元素的樣式，只會(huì)影響當(dāng)前你選取的這個(gè)元素的樣式。這樣優(yōu)先級(jí)更高。

②如何在當(dāng)前元素對(duì)應(yīng)的類(lèi)上修改樣式？

在開(kāi)發(fā)者工具最底下我框選出來(lái)的位置就是當(dāng)前元素類(lèi)，也可在這個(gè)位置進(jìn)行更改樣式，但是在這個(gè)位置修改樣式需要注意頁(yè)面當(dāng)中所有同一種元素的樣式都會(huì)發(fā)生改變，一牽動(dòng)則動(dòng)全身。

5，如何修改元素設(shè)置的偽類(lèi)屬性？

如圖，選中某一個(gè)元素，然后在開(kāi)發(fā)者工具的過(guò)濾器當(dāng)中有一個(gè)：HOV值點(diǎn)擊它，然后選取你需要查找的偽類(lèi)。

注：因?yàn)檎Ｇ闆r下點(diǎn)擊一個(gè)元素屬性，你是看不到它的偽類(lèi)的。

點(diǎn)擊出現(xiàn)偽類(lèi)后，你就可以在這個(gè)上面直接更改樣式了。

比如顏色，可以直接在開(kāi)發(fā)者工具中自帶的畫(huà)板中吸取頁(yè)面中你想要的顏色，然后確定就可以更改了。

咱們?cè)谥谱骶W(wǎng)頁(yè)時(shí)，UI圖上的顏色也可以拿開(kāi)發(fā)者自帶的畫(huà)板吸取確定顏色。

6，如何添加新的類(lèi)，復(fù)制和刪除原來(lái)的類(lèi)？

過(guò)濾器欄中最右邊有一個(gè).CLS選項(xiàng)，它可以添加新的類(lèi)，這個(gè)功能主要是添加CSS原樣式中存在的類(lèi)，通過(guò)調(diào)用其它類(lèi)樣式到當(dāng)前元素中來(lái)，從而查看新的樣式。

.CLS右邊的十號(hào)作用是復(fù)制當(dāng)前類(lèi)，可重新在新類(lèi)中布置新的樣式。特別是在舊類(lèi)樣式代碼非常多的情況下重新布局樣式，這時(shí)候用新增一個(gè)類(lèi)的方法就很方便，新類(lèi)復(fù)制到編碼器當(dāng)中也省不少事。

7，如何快速增加元素的樣式？

谷歌瀏覽器自帶了4個(gè)快速增加屬性的按鈕，如圖上4個(gè)圖標(biāo)，從左到右分別是應(yīng)：

文本shadow-文本元素陰影效果

箱型shadow-塊級(jí)元素陰影效果

color-字體顏色

背景color-背景顏色

有人可能會(huì)問(wèn)怎么才能找到它們呢？可能細(xì)心的同學(xué)已經(jīng)發(fā)現(xiàn)了。

當(dāng)鼠標(biāo)懸浮在類(lèi)欄中，右邊會(huì)出現(xiàn)一個(gè)三個(gè)小點(diǎn)的按鈕，點(diǎn)擊它便會(huì)出現(xiàn)這四個(gè)按鈕了。

最后，頁(yè)面樣式修改完成后，我們就該保存啦?？梢杂腥N方式保存修改后的代碼。

①?gòu)拈_(kāi)發(fā)者工具類(lèi)里面復(fù)制代碼到你的代碼編輯器。

②直接在頁(yè)面上CTRL + S另存為即可，這種比較暴力，適合F12大幅度修改后的頁(yè)面。

③也可以對(duì)照開(kāi)發(fā)者工具，在WebStorm或VScode代碼編輯器中敲上去····

四，思考

1，如何通過(guò)F12開(kāi)發(fā)者工具來(lái)學(xué)習(xí)優(yōu)秀網(wǎng)站的設(shè)計(jì)？

比如在開(kāi)發(fā)過(guò)程中遇到了一些很難的布局，或者產(chǎn)品經(jīng)理的一些要求你沒(méi)有想到一些很好的方法來(lái)實(shí)現(xiàn)的，大家就可以借鑒一下別的網(wǎng)站的設(shè)計(jì)。

如圖上，我們可以打開(kāi)F12的源來(lái)查看HTML或者CSS樣式，JavaScript的的的樣式。通過(guò)借鑒別的網(wǎng)站的代碼來(lái)參悟自己想要實(shí)現(xiàn)的布局。

五。一些常見(jiàn)問(wèn)題

問(wèn)題一：如何用F12查詢(xún)偽類(lèi)？

在F12中有一個(gè)：HOV值，點(diǎn)擊它然后勾選你需要查找的偽類(lèi)就能在底下顯示出來(lái)了。

問(wèn)題二：如何用F12查看CSS文件？

點(diǎn)擊F12中的資源，就能看見(jiàn)頁(yè)面中包含的文件，然后找到CSS文件，JS文件的查找也是同樣的辦法。

問(wèn)題三：如何使用F12修改文字陰影效果？

在F12中有四個(gè)按鈕是專(zhuān)門(mén)修改陰影效果，塊級(jí)元素效果，字體顏色，塊級(jí)顏色的。

點(diǎn)擊需要修改的元素，在元素里面點(diǎn)擊Ť圖標(biāo)就可以形象的同步更改字體的陰影效果了。

最新評(píng)論