谷歌瀏覽器調試（前端）：Chrome F12

Chrome開發者工具（DevTools）爲前端調試工作提供了諸多的工具可供使用，相對於“alert”、“console.log”大大提高了前端調試的效率。

這些工具可以實現例如：DOM結構分析、CSS動態變更、斷點調試、watch變量、檢測網絡請求和響應、移動端調試等。

 

點擊Ctrl+Shift+I或F12打開DevTools，講解基本使用界面：

1. 右上角可選擇Dock side；
2. Ctrl+[和Ctrl+]切換頁籤，Ctrl+Shift+P命令快捷鍵
3. Elements、Console、Sources、Network、Application頁籤簡單介紹
4. 左上角可切換移動端調試

 

Console頁籤

1. 中間的控制檯可以實時驗證JavaScript代碼，可以實時控制頁面（document.querySelector('button').style.fontSize='2em'）
2. 代碼出現Error會在Console頁面提示，點進去可以看到對應的代碼位置
3. 左側console側邊欄、清屏；右側設置記錄AJAX請求，可直接導航到對應代碼的位置
4. Console.error, Console.table([{},{},{}]), console.clear, ctrl+L
5. 提前提一下Sources裏的Snippets

 

Elements頁籤

HTML

1. 鼠標定位DOM，可動態修改DOM元素
2. $0 獲取選中DOM元素，在控制檯進行操作
3. 選中DOM元素，Copy樣式和JS路徑
4. Event Listeners查看DOM元素綁定事件關聯的代碼

CSS

1. 右側查看樣式
   1. 可動態增加內聯樣式，例如背景色、字體大小，上下鍵調增調減
   2. :cls :hov 增刪類、僞狀態；+增加新規則
2. Computed查看盒模型參數：border、padding、margin信息，可編輯

 

Sources頁籤

1. JavaScript代碼調試工作大部分在這個頁簽下進行。左側是文件導航面板，中間是代碼編輯面板，右側是JavaScript代碼調試面板。
2. 演示：
   1. Call Stack、Scope、Breakpoints、Watch、{}美化代碼、保存臨時測試代碼修改效果（隨下面講）
   2. 指定斷點位置
      1. Step over
      2. Step into
      3. Step out
      4. Resume
      5. Call stack restart frame（斷點回跳）
      6. Scope可編輯變量
      7. 將指定腳本置於黑盒（在編輯頁面、call stack欄、settings裏面的blackboxing）
   3. 條件斷點
   4. 事件監聽斷點
   5. DOM斷點（停在改變DOM節點或其子孫節點的代碼位置）
      1. Subtree modifications: 當前選中的DOM元素的子節點刪除或增加，或子孫節點內容改變。子節點屬性變化，當前選中節點屬性變化不觸發斷點。
      2. Attribute modifications: 選中DOM元素的屬性增加、刪除、值發生變化（不包含input value）。
      3. Node removal: 選中DOM元素被移除
   6. XHR/Fetch斷點（停在XHR調用send()的代碼位置）
   7. 文件導航面板Code Snippets的使用（Esc調出console，短代碼調試，注意變量域的控制）
3. HTML和JavaScript混在一個頁面怎麼辦？
   1. 靜態加載的情況
   2. 動態加載的情況（debugger、事件監聽）
   3. //# sourceURL=resources/common/js/majorPublish.js (針對動態加載的頁面section引用獨立的js文件)

 

Network頁籤

1. 請求的網絡資源的列表
   1. Status、Type、Initiator、Size、Time、Waterfall
   2. Title欄右鍵可增加類型
2. 長按地址欄左側刷新圖標
3. Block掉指定資源（調出命令窗口，show request blocking）

 

pplication頁籤

Cookie、LocalStorage、SessionStorage