《進擊JavaScript核心》學習筆記

一、調試工具

常見的瀏覽器調試工具

IE8+(開發人員工具)

Firefox(firebug)

Chrome(審查元素)

其餘瀏覽器通常基於IE或者Chrome

頁面審查元素：

一、查看動態添加到頁面的元素

二、查看頁面元素綁定的事件

三、在線編輯頁面元素樣式、屬性、內容，而且實時展現

四、樣式數字值可使用鍵盤上下方向鍵微調整

二、網絡監聽

頁面所有資源網絡請求、請求耗時、狀態碼、頭信息

Ajax請求返回Json數據格式化查看

支持按請求類型分組過濾查看

查看頁面徹底加載耗時，總請求個數

網頁中的Network，紅色表示監聽網絡，點擊變爲灰色則是再也不監聽網絡。

總結：靜態資源請求狀態碼可用於分析是否使用了緩存

請求頭信息可用於查看請求攜帶Cookie信息

響應頭信息可用於分析服務器配置信息

單個請求耗時與總請求耗時可用於網絡優化

三、Chrome瀏覽器調試工具-靜態資源

按url目錄結構查看圖片、腳本、樣式

腳本支持斷點調試

總結：若是文件加載失敗，好比路徑不對，不會出如今靜態資源目錄中。

JS代碼動態追加的靜態資源，也會動態出如今資源目錄中。

四、控制檯

打印不一樣級別日誌信息，用於程序追蹤

動態執行代碼，用於驗證代碼正確性和結果

查看斷點處變量值

總結：不一樣日誌級別在控制檯顯示不一樣顏色

動態執行的代碼，定義的變量都是全局變量，上下文有關聯性

五、本地存儲

本地存儲只能查看當前域名存儲數據

Cookie信息有效期，所屬域名路徑

SessionStorage和LocalStorage能夠存儲任意字符內容

Storage的存儲容量比Cookie的容量更大，H5開發中很經常使用

總結：Cookie和Storage都支持查看，增長，修改，清除

Cookie存數的數據，當過時日期小於當前日期，則自動刪除

SessionStorage存儲數據在關閉瀏覽器以後就沒了

LocalStorage存儲數據能夠長期保存，沒有截止有效有效期

本地存儲只能看當前域名全部信息

Cookie信息有效期，所屬域名路徑

SessionStorage和LocalStorage能夠儲存任意字符內容

Storage的存儲容量比Cookie的容量更大，H5開發中很是經常使用！

 

斷點調試：

增長斷點，停用斷點，單步執行，跳過斷點
3種方式查看代碼單步執行過程當中變量的值
斷點管理，部分啓用與停用，所有移除
Source中使用crtl/command+o進行文件搜索，也能夠手動打開對應的file下面的文件夾

 

第一個按鈕表明喚醒咱們的程序：若是點擊一下程序就會跳過當前斷點，程序所有進行執行，也能夠用於2個斷點時，第一個斷點執行過程當中直接跳出，執行第二個斷點。
行號點擊鼠標左鍵會增長一個箭頭標記表明斷點增長成功，而後點擊行號代碼對應的頁面位置，而後本行代碼被選取表示當前程序已經執行了斷點函數

 

單步執行按鈕：程序單行執行，想要多執行幾回就多點擊幾回單行執行按鈕，單步執行過程當中，鼠標選中邏輯語句，能夠查看最終運算結果。

 

不執行變量，對變量進行查看的3種方式：
1. 將鼠標滑到對應變量位置

2. 在控制檯中直接輸入變量名稱，回車就會輸出對應變量的值

   3.  選中咱們要查看的變量，鼠標右鍵找到：Add to watch（將這個變量增長到看板中）

 

鼠標選中邏輯判斷：會計算出當前邏輯運算的最終結果，而且和變量提示同樣

 

若是想進入函數進行單獨調試，能夠在對應函數中增長一個斷點，再點擊單步執行按鈕，就會進入單步執行。

2.進入函數內部執行，點擊按鈕，也可使用跳出函數

在Watch中取消勾選就能取消對應行數的斷點，表示斷點被臨時停用，執行時就會被忽略掉。

禁用全部斷點按鈕，程序執行將不會進入斷點

 

調試完成已經結束後，想要移除程序中全部斷點，那麼就使用斷點管理裏面的Breakpoints，而後點擊鼠標右鍵點擊Remove breakpoint只會移除一個斷點，若是是用Deactivate breakpoints表示移除全部斷點。

 

本地的腳本代碼支持動態修改（不經常使用），修改以後ctrl+s保存就能看效果、