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