【Chorme】前端調試工具之Chorme專篇

    【相關來源】

• Browser-Sync：響應式Web開發調試利器

• 開發者調試工具Chrome Workspace

• Chrome中的 workspace 工具（官方）
  

• Chrome調試工具developer tool技巧

• 【Chrome開發，debug的使用方法。】

• 【Google Chrome調試js入門】

• Chrome調試工具developer tool技巧：http://www.xuanfengge.com/chrome-developer-debugging-tool-tool-tips.html

• Browser-Sync：響應式Web開發調試利器：http://www.alloyteam.com/2014/02/browser-sync-responsive-web-development-and-debugging-tool/ 
  

-----------------------------------------------------------------------------

Google Chrome調試js入門

Google Chrome不管在咱們平時的上網衝浪、或者程序開發，都給咱們帶來很大的便利，而這樣創新、不做惡的一家公司在中國卻走不下去。但願本篇使用Google Chrome中的開發者工具調試js文章，能帶給天天來本站的數百位朋友一些幫助，以便能更好、更快的開發。本篇僅簡單的以一個對json數據的訪問爲例，若是你對json數據格式不瞭解，那是不行的。推薦你看看IBM開發者提供的一份json 入門文檔。

var json = { "comment": [ { "user": "朋友的你", "email": "test@gmail.com" }, { "user": "jQuery學習", "email": "test@gmail.com" } ] };

首先，咱們打開開發者工具，打開方式以下圖，咱們也可使用快捷鍵 F12 來打開。

咱們先來看看斷點的設置，我在11行設置了斷點，設置方法左側點擊便可，我太喜歡這個斷點了，看起來真漂亮。刷新一下頁面，執行以下圖：

在向下執行以前，咱們直接輸入json(咱們的對象名)，看看對象結構，能夠很是清晰的看到json究竟是個什麼東西，不用太多的解釋，以下圖：

按F10向下執行，咱們依次輸入咱們的變量名，本例中3個取值方法是相同的，調試結果以下圖：

若是你還在使用alert()調試js代碼，趕快丟棄吧。固然了，這僅是一篇很是很是簡單的入門級文章，更多的精彩還得由你去發現！

Chrome瀏覽中的 workspace

     Workspaces allow you to select custom directories in your file system which are always available for you to edit within the Sources panel. This can be one specific project directory or a directory that contains multiple different projects within it.
    To use this feature it open the Workspaces tab via the Settings pane. Here you will see an Add Folder link allowing you to add local directories for editing (eg: project root directories).
     Once you've added a folder directory, you will be able to view, edit and save changes to files within it anytime you are working in the Sources panel. All changes to files will persist down to local file contained in directory.
     In addition to adding a file system for your Workspace, you are also able to add file Mappings individual file urls to the path of the file on your local machine. 

     那麼Workspace究竟是個啥東東能幹啥用呢？
     一句話，Ta可以在開發者工具中調試修改js或者css同時自動保存文件，可以避免開發人員在工具中調試好，再到編輯器中修改一次代碼的重複操做，可以提升必定的效率。

     四個步驟：（參見官網的步驟圖片）
     https://developers.google.com/chrome-developer-tools/docs/settings-files/workspace.png
     
     參考教程：
http://isux.tencent.com/chrome-workspace.html
https://developers.google.com/chrome-developer-tools/docs/settings#workspace（官方教程） 

Chrome開發，debug的使用方法。

怎樣打開Chrome的開發者工具？

你能夠直接在頁面上點擊右鍵，而後選擇審查元素：

或者在Chrome的工具中找到：

或者，你直接記住這個快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打開控制檯)，或者直接按F12。

打開的開發者工具就長下面的樣子：

不過我通常習慣與點左下角的那個按鈕，將開發者工具彈出做爲一個獨立的窗口：

下面來分別說下每一個Tab的做用。

【Elements標籤頁】

這個就是查看、編輯頁面上的元素，包括HTML和CSS：

左側就是對頁面HTML結構的查看與編輯，你能夠直接在某個元素上雙擊修改元素的屬性，或者你點右鍵選"Edit as Html"直接對元素的HTML進行編輯，或者刪除某個元素，全部的修改都會即時在頁面上獲得呈現。（注：看到上面右鍵菜單的最後一個選項"審查元素"了麼？這是否是說明這個開發者工具的頁面也是HTML來的呢？你點一下就知道了哦，嘿嘿）

你還能夠對某個元素進行監聽，在JS對元素的屬性或者HTML進行修改的時候，直接觸發斷點，跳轉到對改元素進行修改的JS代碼處：

Elements標籤頁的右側能夠對元素的CSS進行查看與編輯修改：

你還能夠經過這裏看到各CSS選擇器設置的CSS值的覆蓋狀況。

下面的Metrics能夠看到元素佔的空間狀況（寬、高、Padding、Margin神馬的）：

注意到上面的Properties沒有？這個頗有用哦，可讓你看到元素具備的方法與屬性，比查API手冊要方便得多哦（要注意某些方法和屬性在IE、FireFox等其餘瀏覽器下面的支持狀況哦）。

【Resources標籤頁】

Resources標籤頁能夠查看到請求的資源狀況，包括CSS、JS、圖片等的內容，同時還能夠查看到存儲相關的如Cookies、HTML5的Database和LocalStore等，你能夠對存儲的內容編輯和刪除。

這裏的CSS文件有一個好玩的特性，你能夠直接修改CSS文件，而且修改即時生效哦：

【Network標籤頁】

Network標籤頁對於分析網站請求的網絡狀況、查看某一請求的請求頭和響應頭還有響應內容頗有用，特別是在查看Ajax類請求的時候，很是有幫助。注意是在你打開Chrome開發者工具後發起的請求，纔會在這裏顯示的哦。

點擊左側某一個具體去請求URL，能夠看到該請求的詳細HTTP請求狀況：

咱們能夠在這裏看到HTTP請求頭、HTTP響應頭、HTTP返回的內容等信息，對於開發、調試，都是頗有用的。

【Scripts標籤頁】

很明顯，這個標籤頁就是查看JS文件、調試JS代碼的，直接看下圖的說明：

還有你能夠打開Javascript控制檯，作一些其餘的查看或者修改：

你甚至還能夠爲某一XHR請求或者某一事件設置斷點：

【Timeline標籤頁】

注意這個Timeline的標籤頁不是指網絡請求的時間響應狀況哦（這個在Network標籤頁裏查看），這個Timeline指的JS執行時間、頁面元素渲染時間：

點擊底部的Record就能夠開始錄製頁面上執行的內容。（這個不熟悉，請參考文末連接）

【Profiles標籤頁】

這個主要是作性能優化的，包括查看CPU執行時間與內存佔用：

這個也不熟悉，很少說，仍是請參考文末連接吧。

【Audits標籤頁】

這個對於優化前端頁面、加速網頁加載速度頗有用哦（至關與Yslow）：

點擊run按鈕，就能夠開始分析頁面，分析完了就能夠看到分析結果了：

它甚至能夠分析出頁面上樣式表中有哪些CSS是沒有被使用的哦：

【Console標籤頁】

就是Javascript控制檯了：

這個除了查看錯誤信息、打印調試信息（console.log()）、寫一些測試腳本之外，還能夠看成Javascript API查看用。

例如我想查看console都有哪些方法和屬性，我能夠直接在Console中輸入"console"並執行：

怎麼樣，一目瞭然了吧 ？再例如我想查看日期函數都有哪些方法：

（注：注意在這裏看到的某些方法和屬性是ES5新增的，記得兼容其餘瀏覽器的支持狀況哦）

【結語】

Google Chrome除了簡潔、快速，如今的Chrome的插件也很是的豐富了。而對於web開發者來講，Chrome對於HTML五、CSS3等一些新標準的支持也是比較完善的，並且Chrome的開發者工具我我的認爲真的很是好用，這就是爲何我向web開發者推薦使用Chrome的緣由。