Chrome之于網(wǎng)頁開發(fā)的優(yōu)異性能
泡泡網(wǎng)網(wǎng)絡(luò)工具頻道12月7日 作為一個web開發(fā)的初學的我，第一次使用Chrome瀏覽器就被他出色的性能所吸引！
在使用chrome之前我一直都是在使用世界之窗、遨游、360，等瀏覽器。這些瀏覽器的特點在于功能強大，操作比較簡單。對于對普通的電腦用戶在合適不過了！但當開發(fā)時這些強大而簡單的操作就顯的多余了。在開發(fā)時我們往往更注重我們的程序加載的速度，兼容性，以及便捷、清晰的開發(fā)人員工具。而chrome正好兼?zhèn)淞诉@幾點，這無疑對開發(fā)web程序的我們帶來了極大地便利。
下面我們來詳細的介紹下Chrome強大之處。
1、首先是簡潔的界面，沒有任何多余的東西。我們可以從最大的視角整體觀察我們開發(fā)的網(wǎng)頁效果！而且獨特的梯形標簽設(shè)計使得界面更加別致！
2、那就是chrome出色的兼容性，它能夠很好的兼容HTML5和CSS3。如下圖（數(shù)據(jù)來源：http://www.findmebyip.com/litmus）
3、chrome 令人難以置信的更新速度： 目前來說每六周就會有chrome的更新。這使得chrome始終保持它的先進性，始終緊跟時代的步伐！
4、這也是最關(guān)鍵的——chrome出色的開發(fā)人員工具（用我朋友的話來說：沒有了chrome瀏覽器我就不知道怎么開發(fā)了，呵呵?。?/P>
(1)首先我們打開開發(fā)人員工具：
打開方式主要有兩種：右鍵審查元素和點擊chrome扳手>工具>開發(fā)人員工具（或javascript控制臺）
（2）當打開開發(fā)人員工具后我們就會發(fā)現(xiàn)，我們所需的工具都結(jié)構(gòu)清晰的集成到了一個窗口當中，我們可以很方便的進行切換！而且這個窗口可以根據(jù)我們的需要進行拖拉。使我們的開發(fā)過程更加順暢！
當然你也可以點擊左下角的按鈕,這時開發(fā)人員工具作為一個獨立窗口彈出。彈出后再按會還原先前狀態(tài)。
再看看其我們經(jīng)常使用的瀏覽器的開發(fā)人員工具。
IE8 功能不夠全，而且細節(jié)粗糙（個人觀點）
firefox 窗口太凌亂，操作不方便。
（3）緊挨著彈出窗口按鈕的是控制臺顯示切換按鈕
點擊該按鈕就會打開控制臺，這與頂部的Console功能相同。不同的是一個是局部顯示可拖動一個是全部填充顯示。就從這細節(jié)方面，我們也可以看出chrome充分的考慮到了開發(fā)人員的不同需求（點擊后不同效果如下圖）。
在控制臺查看錯誤信息、打印調(diào)試信息（console.log()）、寫一些測試腳本以外，還可以當作Javascript API查看用。
例如我想查看屏幕的屬性我們就可以在Console中輸入“screen”,就會輸出屏幕的相關(guān)屬性。（如下圖）
（4）提到控制臺就得說一下network個人認為其功能非常強大，打開后當你對網(wǎng)頁進行任何操作時network就會動態(tài)顯示相關(guān)操作的交互信。Network標簽頁對于分析網(wǎng)站請求的網(wǎng)絡(luò)情況、查看某一請求的請求頭和響應(yīng)頭還有響應(yīng)內(nèi)容，對于查看Ajax請求很有用。當然它是時時更新的。（network窗口如下圖）是不是很強大！
點擊左側(cè)的每個具體選項你會看到每個選項對應(yīng)的具體信息（如下圖），在這里就不細說具體怎樣使用了，大家可以在開發(fā)過程中具體體會。
大家還看到在開發(fā)人員工具還有幾個選項，下面我們就來介紹剩下的幾個選項，共同體驗下chrome的強大
（5）首先是第一個選項Elements即元素
打開元素窗口我們首先看到的是網(wǎng)頁的各個元素。這跟大瀏覽器的開發(fā)人員工具都差不多。但當你點擊其中的各個元素是你就能夠發(fā)現(xiàn)chrome的優(yōu)點了。當你點擊元素時你就會發(fā)現(xiàn)底部多了幾個標簽項(如下圖)
最后的那個藍底的就是你當前點的標簽，前一個就是其父標簽，再往前依次提升。這樣當我們想找標簽的上一層時，就變的極其輕松了。你再也不用為在密密麻麻的標簽中找父標簽了而頭疼了。
同時假如你頁面的運行效果不是很滿意可以右鍵/或雙擊要修改的地方，進行直接修改。然后查看其效果，如果正確你就可以將修改復(fù)制到你的程序里。這就提高了我們的開發(fā)效率。當然右鍵還有其他選項在這里就不一一贅述了。（右鍵菜單如下圖）
Elements窗口右側(cè)還為您顯示了網(wǎng)頁的布局樣式（右邊欄如下圖）。你同樣也可以對其進行編輯。這樣清晰的結(jié)構(gòu)，便捷的操作使得我們的開發(fā)效率再一次高。
（6）我們再來看看Resources選項在這里你可以看到你網(wǎng)頁中所有用到的元素包括js文件、css文件、圖片文件，cookies,session,datbase等等。（resources窗口如下圖）。注意這里的CSS和js都可以修改并且即時生效。
（7）profiles選項主要是做性能優(yōu)化的，包括查看CPU執(zhí)行時間與內(nèi)存占用可點擊右下角的圓形按鈕開始，點眼睛查看性能。
（8）然后是audits選項
這個用于分析頁面，優(yōu)化頁面，提高頁面加載速度。這個目前正在研究。
點擊run按鈕后就可以進行網(wǎng)頁分析了。分析結(jié)果如下圖
以上分析了我們加載網(wǎng)頁的所用到的和未用的文件。你可以根據(jù)結(jié)果調(diào)整程序提高網(wǎng)頁的加載速度。
（9）最后還要提一下右上角的搜索框，它為我們查找我們需要的元素提供了極大地方便（它是由Goole開發(fā)的您應(yīng)該不會對它的搜索性能提出質(zhì)疑吧，呵呵?。?BR>
5、不能忽略的還有chrome強大的翻譯功能，他可以幫助國內(nèi)的開發(fā)人員在閱讀外文的api或者文章時提供很好的幫助！提高我們的處理問題的速度。
這樣我就把我了解到的chrome對于開發(fā)的優(yōu)勢基本上介紹了一遍。當然它的優(yōu)點并不止這些。
綜上所述可以說chrome可以說是目前最適合開發(fā)人員使用的瀏覽器了。大家一起來體驗一下吧！
以上屬個人觀點，可能有不足之處，望大家諒解！
關(guān)注我們
