常用的Chrome f12 調試


  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), 測試的時候,有時需要清理和查看。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM