一個程序員按照要求編寫一個網頁，不可能一次編寫就完全達到目的，一般要對自己的的代碼修改調試幾次后才能到達要求，瀏覽器的F12開發(fā)人員工具就可以很方便的幫助程序員調試自己的代碼。

瀏覽器F12功能介紹

調試時使用最多的功能頁面是：元素（ELements）、控制臺（Console）、源代碼（Sources）、網絡（Network）等。

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

一，背景介紹

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

二，知識剖析

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

注：部分電腦打開F12是需要組合鍵：FN + F12。

三，具體實操

1，如何更改調試窗口的顯示位置？

先按F12進入調試位置

Dosk side有四個選項，1。將開發(fā)者工具單框拖出來2.放置左側3.放置底部4.放置右側。

一般都是谷歌瀏覽器是默認放置在右側的，今天我們主要說谷歌瀏覽器當中的F12開發(fā)者工具。

如果要進行模擬手機端調試頁面的話，用左右布局調試會比較方便，如果是調試PC端頁面的話，將調試頁面放置下端會更好一點，這樣不會遮住部分的顯示內容。

2，如何選中需要修改的元素？如何進行手機端的調試？

首先打開F12，圖上右上角有一個小鼠標箭頭圖標和一個小手機圖標。我們用鼠標小鼠標箭頭圖標然后點擊選擇網頁中的內容，這時候就會在開發(fā)者工具中看見該選中的內容樣式顯示出來。選擇網頁中的內容可以是一串文字也可以是一張圖片或者一個塊級元素。

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

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

咱們在CSS布局會經常用到盒子模型，可是在網頁上隨意點開某一個塊級元素進行審查，在管理者工具欄有一個直觀的盒子樣式（如上圖），你可以直接在盒子上進行更改.margin，填充，邊框，內容欄的上下左右各個值都可以進行直觀的修改。

4，如何修改設置當前元素的樣式，或在當前元素對應的類上修改樣式？

①如何在當前元素上修改？

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

②如何在當前元素對應的類上修改樣式？

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

5，如何修改元素設置的偽類屬性？

最新評論