-
開啟F12開發者工具：在瀏覽器中開啟您需要除錯的網頁，按下F12鍵或右鍵點選頁面任意位置選擇“檢查”（Inspect），即可開啟開發者工具。
-
選擇Elements皮膚：在開發者工具頂部的選項卡中，選擇“Elements”皮膚。這裡顯示了當前頁面的HTML結構。
-
查詢目標元素：使用滑鼠懸停在頁面上的某個元素上，開發者工具會自動高亮顯示對應的HTML程式碼。您也可以在Elements皮膚中手動搜尋特定的元素。
-
修改HTML程式碼：在Elements皮膚中，直接編輯HTML程式碼。例如，更改文字內容、新增或刪除元素等。這些更改會立即反映在頁面上，方便即時預覽效果。
-
調整CSS樣式：在Elements皮膚右側，可以看到選中元素的CSS樣式。您可以在這裡修改樣式屬性，如顏色、字型、邊距等。修改後的樣式會實時應用於頁面。
-
檢視網路請求：切換到“Network”皮膚，可以檢視頁面載入過程中發出的所有網路請求。這對於分析頁面效能、除錯API介面等問題非常有用。
-
除錯JavaScript：在“Sources”皮膚中，可以檢視和除錯JavaScript程式碼。設定斷點、單步執行、檢視變數值等功能一應俱全。
-
儲存更改：需要注意的是，F12工具中的更改僅在當前會話中有效，重新整理頁面後會丟失。因此，如果需要永久儲存更改，還需將程式碼複製到原始檔中，並透過FTP工具或網站後臺上傳。
-
使用控制檯：在“Console”皮膚中，可以執行JavaScript程式碼片段，檢視輸出結果。這對於快速測試程式碼邏輯、除錯問題非常方便。
掌握這些基本技巧，您可以更高效地使用F12開發者工具，解決網站開發和維護過程中的各種問題，提升工作效率。