個人簡介
👀個人主頁： 前端雜貨鋪
🙋?♂?學習方向： 主攻前端方向，正逐漸往全干發展
📃個人狀態： 研發工程師，現效力于中國工業軟件事業
🚀人生格言： 積跬步至千里，積小流成江海
🥇推薦學習：🍍前端面試寶典 🎨100個小功能 🍉Vue2 🍋Vue3 🍓Vue2/3項目實戰 🥝Node.js實戰 🍒Three.js
🌕個人推廣：每篇文章最下方都有加入方式，旨在交流學習&資源分享，快加入進來吧
文章目錄
- Tab 介紹
- 打開開發者工具
- 打開命令菜單
- 切換主題顏色
- 截圖
- CSS 調試
- 檢查
- 查詢
- 按字符串直接查詢
- 按選擇器查詢
- 按XPath查詢
- 從控制臺搜索元素
- 復制樣式
- 計算樣式
- 布局
- 控制臺
- $_
- $0
- console
- JavaScript調試
- 監視變化
- DOM 斷點
- 事件監聽
Tab 介紹
打開開發者工具
- 菜單>更多工具>開發者工具
- 快捷鍵：F12
打開命令菜單
- 快捷鍵：CTRL + SHIFT + P （Command + SHIFT + P）
切換主題顏色
Command + SHIFT + P，輸入 主題 或 theme，可進行主題切換。
截圖
CSS 調試
檢查
查詢
按字符串直接查詢
按選擇器查詢
如 div#test 表示查詢 id=“test” 的 div。
按XPath查詢
如 //selection/dev 表示找 selection 下面的 div 標簽。
從控制臺搜索元素
// 查找 id 為 test 的元素
inspect(document.getElementById('test'))
復制樣式
計算樣式
計算樣式面板可以查看所選元素的盒子。并能夠過濾樣式和查看渲染的字體等。
布局
控制臺
$_
返回上一條語句的執行結果。
$0
返回上一個選擇的 DOM 節點。
$1 => 再上一個，$2…以此類推。
console
點擊小眼睛，創建實時表達式，可用于觀測變量。
JavaScript調試
debugger
console.log(xxx)
瀏覽器打斷點
監視變化
DOM 斷點
那么當屬性被修改時，將會斷到修改屬性的代碼處。
事件監聽
更多內容將持續補充…
好啦，本篇文章到這里就要和大家說再見啦，祝你這篇文章閱讀愉快，你下篇文章的閱讀愉快留著我下篇文章再祝！
參考資料：
- 百度 · 百科
- DeepSeek
- 瀏覽器調試工具精講 · 我在B站玩編程
- VS Code · Copilot
)
