Chrome調試窗口有9個標簽:
工作中常用的幾個:Elements, Console, Sources, NetWork, Application
- Elements
Elements 中,可以查看並且編輯頁面元素,在左側可以點選某一個元素,該元素會在頁面上高亮,同時在右側顯示該元素的所有樣式。
- Console
Console最有用的,就是打斷點的時候進行查看吧。
- Sources
Sources標簽頁下,可以查看當前網站的HTML,及其引入的所有CSS、Javascript文件。重要的是,在Javascript文件中的任何一行,我們都可以設置斷點,腳本將會在這一行停下來。觸發斷點時,我們可以查看斷點所在的作用域內的所有變量的值。
右側窗格顯示了局部變量、監視變量以及調用棧。右側窗格的上方有繼續、下一步、進入函數、跳出函數、禁用斷點等按鈕。
- Network
Network 中,可以查看當前頁面的所有網絡請求。
- Application
目前application主要用來查看有哪些cookies和local Storage(H5本地存儲Web storage特性的API), 測試的時候,有時需要清理和查看。