瀏覽器的開發者工具使用介紹
瀏覽器開發者工具（通常稱作devtools）是一種網頁開發者測驗和除錯代碼的工具，一般內置于網頁瀏覽器或者作為瀏覽器的附加組件使用，不同于網站創建器或者集成開發環境，Web 開發工具不直接參與網站的創建，而用于測驗網站或網頁應用的用戶界面，Web 開發工具便于開發人員除錯各種瀏覽器網頁處理技術，例如HTML、CSS、DOM、JavaScript，顯示每個資源頁面的請求以及載入所花費的時間等，
打開瀏覽器后，按下F12鍵，可以打開瀏覽器自帶的開發工具，它有多個面板，Microsoft Edge瀏覽器的參見下圖：
瀏覽器控制臺（Console）使用簡介
瀏覽器的“開發者工具”（Developer Tools）里面的“控制臺”（console），是運行 JavaScript 代碼的理想環境，打開瀏覽器，按下 F12鍵，然后選擇 “控制臺”（console） 面板，就進入了控制臺，進入控制臺以后，就可以在提示符后輸入代碼，然后按回車（Enter鍵），代碼就會執行，如果按Shift + Enter鍵，就是代碼換行，不會觸發執行，
在瀏覽器控制臺中輸入多行陳述句示例：
let x=2 //按shift+enter鍵
let y=5 //按shift+enter鍵
console.log('和：',x+y) //按enter鍵
參見下圖：
特別提示：在瀏覽器控制臺中使用console.log()陳述句，如console.log("Hello")，沒有顯示的原因及解決：
原因篩選框中有內容，洗掉之即可，參見下圖：
如何在瀏覽器中查看HTTP請求或回應頭？
步驟:
1、用瀏覽器（在此以 Edge為例），訪問一個網址（在此以https://www.baidu.com/為例），用如下操作之一：
點擊右鍵，選擇檢查，打開“開發人員工具”；
直接按F12，
2、選擇 Network（網路） 選項卡，
3、重新加載頁面，
4、單擊“名稱”格的HTTP請求，在“標頭（Headers）”格中顯示相關資訊，參見下圖：
附錄：主要瀏覽器開發者工具參考網址
Edge Microsoft Edge開發人員工具概述 - Microsoft Edge Development | Microsoft Docs
Chrome Chrome 開發工具指南_w3cschool
【Microsoft的Edge瀏覽器基于Chromium（由Google主導開發的網頁瀏覽器）開發的，Microsoft的 Edge瀏覽器和Google的Chrome瀏覽器開發者工具差不多，】
Firefox Firefox 開發者工具 | MDN
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/325545.html
標籤：其他