爲Google瀏覽器的開發人員工具叫好
工慾善其事必先利其器，瀏覽器F12開發人員工具就是威力無比的神器。下面就分別從頁面視覺調試、JS調試、網絡調試三個方面簡單介紹開發人員工具的使用。
頁面視覺調試
l 點擊鍵盤上“F12”按鍵進入調試工具
l Elements：查看並編輯HTML（雙擊或是右鍵選擇，拖動重排）
l Styles:查看並修改內聯style屬性或者css屬性（雙擊）
l Computed:查看盒子模型，並可以修改（雙擊）
l Sources:查看並編輯css文件，第一次修改需要“另存爲”；還有一點激動人心的是它可以用底部的{}符合對文檔進行格式化整理
JS調試
l 點擊Console面板，在文檔中點擊行號添加斷點，刷新頁面進入調試，依次下一步
l 輸出JS變量的值alert("result="+"result");更簡單的直接看Watch,Scope,Breakpoints等
l Elements中右鍵選擇“break on”可以對某個元素進行監聽，在JS對元素的屬性或者HTML進行修改的時候，直接觸發斷點，跳轉到對改元素進行修改的JS代碼處
l 作爲JS_API手冊使用，其實輸入任何信息都會智能提示，如console;
l 使用並測試方法
var d=new Date()
console.dir(d);
還可以直接輸入變量，就會顯示變量的值
網絡調試
l Network面板是form請求調試的地盤，同時還擅長調試Ajax類請求，注意是打開這個面板之後發起的請求
l 點擊傳輸列表中某一項文件，在右側Headers中的Query String Parameters傳遞的參數和值是多麼一目瞭然呀！
l 若文件爲非提交數據文件，那麼右側的Preview選項卡把源文件顯示的一覽無餘，把小夥伴們驚呆了
OTHERS
l Sources可以查看源代碼，css，js，img等。且css可以直接編輯
l Resources可以看到的內容就比較多了，WebSQL，IndexedDB，Session，Cookies，Cache等
l Audits做前端優化，加速網頁加載速度
l Profiles查看內存佔用時間和CPU消耗情況