面向Web設計人員，開發人員和測試人員的集成工具集
除了大多數瀏覽器製造商專注於尋找網上沖浪的日常用戶之外，他們還迎合了Web開發人員，設計師和質量保證專業人員，他們通過將強大的工具直接集成到瀏覽器中幫助構建這些用戶正在訪問的應用程序和網站他們自己。
在瀏覽器中發現的唯一編程和測試工具允許您查看頁面的源代碼的日子已經一去不復返了。 通過執行和調試JavaScript片段，檢查和編輯DOM元素，在您的應用或頁面加載時監控實時網絡流量以識別瓶頸，分析CSS性能，確保您的代碼是現在的瀏覽器不利用太多的內存或太多的CPU週期等等。 從測試的角度來看，您可以通過響應式設計和內置模擬器的魔力，重現應用程序或網頁在不同瀏覽器以及不同設備和平台上的呈現方式。 最好的部分是，你可以做所有這些，而不必離開你的瀏覽器！
以下教程將引導您了解如何在多個常用Web瀏覽器中訪問這些開發人員工具。
谷歌瀏覽器
Chrome的開發人員工具允許您編輯和調試代碼，審核各個組件以顯示性能問題，模擬不同的設備屏幕，包括運行Android或iOS的設備屏幕，以及執行其他一些有用的功能。
- 點擊Chrome的主菜單按鈕，標記為三條水平線，位於瀏覽器的右上角。
- 出現下拉菜單時，將鼠標光標懸停在“ 更多工具”選項上。
- 現在應該出現一個子菜單。 選擇標記為開發者工具的選項。 您還可以使用以下鍵盤快捷鍵代替此菜單項：Chrome OS / Windows（ CTRL + SHIFT + I ），Mac OS X（ ALT（OPTION）+ COMMAND + I ）
- 現在應該顯示Chrome Developer Tools界面，如此示例屏幕截圖所示。 根據您使用的Chrome版本，您看到的初始佈局可能與此處顯示的佈局略有不同。 開發人員工具的主要集線器通常位於屏幕的底部或右側，包含以下選項卡。
元素：提供檢查CSS和HTML代碼的功能，以及即時編輯CSS，實時查看更改的效果。
控制台： Chrome的JavaScript控制台允許直接命令輸入以及診斷調試。
來源：讓您通過強大的圖形界面調試JavaScript代碼。
網絡：分類並顯示活動應用程序或頁面上每個相關操作的詳細信息，包括完整的請求和響應標題以及高級時序指標。
時間軸：一旦啟動頁面或應用程序加載請求，就可以深入分析瀏覽器內發生的所有活動。 - 除了這些部分之外，您還可以通過位於時間軸選項卡右側的>>圖標訪問以下工具。
配置文件：分解成CPU分析器和堆分析器部分，提供活動應用程序或頁面的全面內存使用情況和總體執行時間。
安全性：突出顯示活動頁面或應用程序中的證書問題和其他安全相關問題。
資源：這是您可以檢查當前網頁或應用程序使用的Cookie，本地存儲，應用程序緩存和其他本地數據源的位置。
審計：提供優化頁面或應用程序的加載時間和一般性能的方法。 - Device Mode（設備模式）允許您在模擬器中查看活動頁面，使其與在十幾種設備上出現的模擬器幾乎完全相同，其中包括多款知名的Android和iOS模型，如iPad，iPhone和Samsung Galaxy。 您還可以模擬自定義屏幕分辨率以適應您特定的開發或測試需求。 要打開和關閉設備模式 ，請選擇位於元素選項卡左側的手機圖標。
- 您還可以自定義開發人員工具的外觀，方法是首先單擊由三個垂直放置的點表示並位於上述選項卡最右側的菜單按鈕。 在此下拉菜單中，您可以重新定位底座，顯示或隱藏不同的工具以及啟動更高級的項目，例如設備檢查器。 您會發現，通過本節中的設置，開發工具界面本身是高度可定制的。
火狐瀏覽器
Firefox的Web開發人員部分包括設計人員，開發人員和測試人員的工具，如風格編輯器和以像素為目標的吸管。
推薦閱讀： 前25名Greasemonkey和Tampermonkey用戶腳本
- 點擊Firefox的主菜單按鈕，由三條水平線表示，位於瀏覽器窗口的右上角。
- 出現下拉菜單時，選擇標有Developer的圖標。 現在應該顯示Web Developer菜單，其中包含以下選項。 您會注意到大多數菜單項都有與其關聯的鍵盤快捷鍵。
切換工具：顯示或隱藏開發人員工具界面，通常位於瀏覽器窗口的底部。 鍵盤快捷鍵：Mac OS X（ ALT（OPTION）+ COMMAND + I ），Windows（ CTRL + SHIFT + I ）
Inspector：允許您通過遠程調試來檢查和/或調整活動頁面以及便攜式設備上的CSS和HTML代碼。 鍵盤快捷鍵：Mac OS X（ ALT（OPTION）+ COMMAND + C ），Windows（ CTRL + SHIFT + C ）
Web控制台：允許您在活動頁面內執行JavaScript表達式，並查看各種記錄的數據，包括安全警告，網絡請求，CSS消息等。 鍵盤快捷鍵：Mac OS X（ ALT（OPTION）+ COMMAND + K ），Windows（ CTRL + SHIFT + K ）
調試器： JavaScript調試器可以通過設置斷點，檢查DOM節點，黑盒子外部源等來查明和修復缺陷。 與Inspector一樣 ，該功能還支持遠程調試。 鍵盤快捷鍵：Mac OS X（ ALT（OPTION）+ COMMAND + S ），Windows（ CTRL + SHIFT + S）
樣式編輯器：允許您創建新的樣式表並將它們與活動網頁合併，或者編輯現有工作表並測試您的更改在瀏覽器中的顯示效果，只需單擊一次即可。 鍵盤快捷鍵：Mac OS X，Windows（ SHIFT + F7 ）
性能：詳細分析活動頁面的網絡性能，幀率數據，JavaScript執行時間和狀態，閃爍等等。 鍵盤快捷鍵：Mac OS X，Windows（ SHIFT + F5 ）
網絡：列出瀏覽器發起的每個網絡請求以及相應的方法，原始域，類型，大小和時間。 鍵盤快捷鍵：Mac OS X（ ALT（OPTION）+ COMMAND + Q ），Windows（ CTRL + SHIFT + Q ）
開發人員工具欄：打開交互式命令行解釋器。 在解釋器中輸入幫助以獲取所有可用命令及其正確語法的列表。 鍵盤快捷鍵：Mac OS X，Windows（ SHIFT + F2 ）
WebIDE：提供通過運行Firefox OS或Firefox OS Simulator的實際設備創建和執行Web應用程序的功能。 鍵盤快捷鍵：Mac OS X，Windows（ SHIFT + F8 ）
瀏覽器控制台：提供與Web控制台相同的功能（請參閱上文）。 但是，返回的所有數據都是針對整個Firefox應用程序（包括擴展和瀏覽器級功能），而不僅僅是活動的Web頁面。 鍵盤快捷鍵：Mac OS X（ SHIFT + COMMAND + J ），Windows（ CTRL + SHIFT + J ）
自適應設計視圖：允許您以不同的分辨率，佈局和屏幕尺寸即時查看網頁，以模擬包括平板電腦和智能手機在內的多種設備。 鍵盤快捷鍵：Mac OS X（ ALT（OPTION）+ COMMAND + M ），Windows（ CTRL + SHIFT + M ）
吸管：顯示單獨選擇的像素的十六進制顏色代碼。
Scratchpad ：讓您可以在彈出的Firefox窗口中編寫，編輯，集成和執行JavaScript代碼片段。 鍵盤快捷鍵：Mac OS X，Windows（ SHIFT + F4 ）
頁面源代碼：原始的基於瀏覽器的開發者工具，該選項只顯示活動頁面的可用源代碼。 鍵盤快捷鍵：Mac OS X（ COMMAND + U ），Windows（ CTRL + U ）
獲取更多工具：在Mozilla的官方插件網站上打開Web Developer's Toolbox集合，其中包含十幾種流行的擴展，如Firebug和Greasemonkey。
Microsoft Edge / Internet Explorer
通常被稱為F12開發者工具 ，對從早期版本的IE瀏覽器，IE11和微軟邊緣開發工具集推出界面以來的鍵盤快捷鍵表示敬意，自推出以來已經走過了很長時間，提供了一組非常方便的監視器，調試器，仿真器和即時編譯器。
- 點擊更多操作菜單，用三個點表示，位於瀏覽器窗口的右上角。 出現下拉菜單時，選擇標有F12開發人員工具的選項。 正如我已經提到的，您也可以通過F12鍵盤快捷鍵訪問這些工具。
- 現在應該顯示開發界面，通常位於瀏覽器窗口的底部。 可以使用以下工具，每個工具都可以通過單擊各自的標籤標題或使用隨附的鍵盤快捷方式進行訪問。
DOM Explorer：允許您在活動頁面中編輯樣式表和HTML，隨時渲染修改後的結果。 利用智能感知功能在適用的地方自動完成代碼。 鍵盤快捷鍵： （CTRL + 1）
控制台：提供通過集成API提交包括計數器，定時器，跟踪和自定義消息的調試信息的功能。 此外，讓您將代碼注入到活動的Web頁面並實時修改分配給各個變量的值。 鍵盤快捷鍵： （CTRL + 2）
調試器：允許您在執行時設置斷點並調試您的代碼，如有必要，逐行執行。 鍵盤快捷鍵： （CTRL + 3）
網絡：列出頁面加載和執行期間由瀏覽器發起的每個網絡請求，包括協議詳細信息，內容類型，帶寬使用情況等等。 鍵盤快捷鍵： （CTRL + 4）
性能：詳細介紹幀速率，CPU利用率以及其他與性能相關的指標，以幫助您加快頁面加載時間和其他活動。 鍵盤快捷鍵： （CTRL + 5）
內存：通過顯示內存使用時間線和來自不同時間間隔的快照，幫助您隔離和糾正當前網頁上的潛在內存洩漏。 鍵盤快捷鍵： （CTRL + 6）
仿真：顯示活動頁面如何以各種分辨率和屏幕尺寸呈現，模擬智能手機，平板電腦和其他設備。 還提供修改用戶代理和頁面方向的功能，以及通過輸入緯度和經度來模擬不同的地理位置。 鍵盤快捷鍵： （CTRL + 7） - 要在任何其他工具中顯示控制台 ，請點擊位於開發工具界面右上角的右方括號內的方形按鈕。
- 要解除連接，開發人員工具界面將成為一個單獨的窗口，單擊由兩個級聯矩形表示的按鈕或使用以下鍵盤快捷鍵： CTRL + P。 您可以通過再次按下CTRL + P將工具放回原始位置。
Apple Safari（僅限OS X）
Safari的多樣化開發工具集反映了大型開發者社區，他們利用Mac來滿足他們的設計和編程需求。 除了功能強大的控制台和傳統日誌記錄和調試功能外，還提供易於使用的響應式設計模式和創建自己的瀏覽器擴展的工具。
- 點擊位於屏幕頂部的瀏覽器菜單中的Safari 。 出現下拉菜單時，選擇首選項 。 您也可以使用以下鍵盤快捷鍵代替此菜單項： COMMAND + COMMA（，）
- 現在應該顯示Safari的“首選項”界面，覆蓋您的瀏覽器窗口。 點擊位於標題最右側的高級圖標。
- 高級首選項現在應該可見。 在這個屏幕的底部是一個選項，帶有一個複選框，帶有菜單欄中的Show Develop菜單 。 如果方框中沒有顯示複選標記，請點擊一次將其放置在那裡。
- 點擊左上角的紅色'x'關閉首選項界面。
- 您現在應該在位於書籤和窗口之間的名為Develop的瀏覽器菜單中註意到一個新選項。 點擊這個菜單項。 現在應該顯示下拉菜單，其中包含以下選項。
打開頁面：使您可以在Mac上當前安裝的其他瀏覽器之一中打開活動網頁。
用戶代理：允許您從多個預定義的用戶代理值中進行選擇，包括Chrome，Firefox和Internet Explorer的多個版本，以及定義您自己的自定義字符串。
進入自適應設計模式 ：呈現當前頁面，因為它會出現在各種設備和不同的屏幕分辨率上。
Show Web Inspector：啟動Safari開發工具的主界面，通常放置在瀏覽器屏幕的底部，包含以下部分： 元素 ， 網絡 ， 資源 ， 時間軸 ， 調試器 ， 存儲 ， 控制台 。
顯示錯誤控制台：還會啟動開發工具界面，直接顯示錯誤，警告和其他可搜索日誌數據的控制台選項卡。
顯示頁面源：打開資源選項卡，其中顯示按文檔分類的活動頁面的源代碼。
顯示頁面資源：執行與顯示頁面源選項相同的功能。
顯示代碼片段編輯器：打開一個新窗口，您可以在其中輸入CSS和HTML代碼，即時預覽其輸出。
顯示擴展生成器：提供使用CSS，HTML和JavaScript創建或編輯Safari擴展的功能。
顯示時間線記錄：打開時間線選項卡，並開始實時顯示網絡請求，佈局和渲染信息以及JavaScript執行。
清空緩存：刪除當前存儲在硬盤上的整個緩存。
禁用緩存：停止緩存Safari，以便在每次加載頁面時從服務器檢索所有內容。
禁用圖像：禁止在所有網頁上呈現圖像。
禁用樣式：加載頁面時忽略CSS屬性。
禁用JavaScript：限制所有頁面上的JavaScript執行。
禁用擴展：禁止在瀏覽器中運行所有已安裝的擴展 。
禁用站點特定的黑客：如果Safari已被修改為明確處理特定於活動網頁的問題，則此選項將阻止這些更改，以便在引入這些修改之前加載頁面。
禁用本地文件限制：允許瀏覽器訪問本地磁盤上的文件，這是默認情況下出於安全原因限制的操作。
禁用跨源限制：默認情況下會實施這些限制，以防止XSS和其他潛在危險。 但是，為了發展目的，他們通常需要暫時停用。
允許來自智能搜索字段的JavaScript：啟用後，可以輸入具有javascript的 URL ：直接合併到地址欄中。
將SHA-1證書視為不安全：使用SHA-1算法的 SSL證書被廣泛認為是過時且易受攻擊的。