Web Developer插件(web開發(fā)者工具) v0.4.6 簡體中文版

軟件介紹

web developer是一款可以在谷歌瀏覽器上使用的Web開發(fā)者工具，這款插件擁有多種強(qiáng)大的功能，我們不僅可以使用web developer插件來對(duì)CSS網(wǎng)頁布局進(jìn)行開發(fā)和調(diào)試，同時(shí)還能夠用來清理瀏覽器上的Cookie緩存，功能非常強(qiáng)大。

web developer軟件簡介

web developer google是一款可以安裝在您的谷歌瀏覽器上的chrome web developer輕量級(jí)開發(fā)插件,安裝使用web developer插件可以讓您的開發(fā)變得更加順暢,馬上下載web developer吧。

Web Developer 這款擴(kuò)展集成了各種各樣的 Web 開發(fā)工具，幾乎是網(wǎng)頁開發(fā)人員必備的 Chrome 開發(fā)者工具擴(kuò)展插件，安裝之后會(huì)在瀏覽器工具欄添加一個(gè)齒輪狀的小圖標(biāo)，點(diǎn)擊小圖標(biāo)之后就可以看到大量的 Web 開發(fā)工具。

web developer軟件功能

禁用工具

Disable禁用工具 可以暫時(shí)的屏蔽當(dāng)前頁面中的某些東東，如JavaScript腳本、緩存、mete自動(dòng)重新定向、將網(wǎng)頁顯示為黑色（圖片除外）、禁用彈窗等等。如下圖：

Cookies工具 可以用此工具查看當(dāng)前頁面的Cookies信息，可以按不同的域名或路徑進(jìn)行查看，而且可以手工增加一個(gè)Cookies，這對(duì)于后臺(tái)網(wǎng)絡(luò)編程的開發(fā)調(diào)試來說是非常方便而得力的工具。

CSS樣式表工具這是一個(gè)非常強(qiáng)大的工具，基于CSS網(wǎng)頁布局有這個(gè)得力的助手，工作與學(xué)習(xí)都將變的非常簡單，可以控制CSS是否應(yīng)用，查看頁面的CSS文件，并進(jìn)行實(shí)時(shí)的編輯，并在瀏覽器窗口中立即反應(yīng)出編輯后的效果。

表單工具

Forms表單工具 其主要作用是對(duì)頁面的表單進(jìn)行控制，其中的很多功能對(duì)于表單程序的開發(fā)有著非常非常大的幫助，由于我們的重點(diǎn)是CSS網(wǎng)頁布局，此工具我們不作深入的探討。

圖像工具

Images圖像工具 可以對(duì)當(dāng)前頁面的圖像進(jìn)行設(shè)定，可以顯示所有圖片的alt信息，對(duì)背景等也可以進(jìn)行是否顯示的設(shè)定。

信息工具

Information信息工具 此工具在我們的CSS網(wǎng)頁布局設(shè)計(jì)中也經(jīng)常用到，我們可以用它來查看頁面中所有的id、class及table等元素的名稱、占位等信息，關(guān)于此工具的詳細(xì)介紹：Web Developer插件 Information工具教程

Miscellaneous其他這是一個(gè)非常“好玩”的工具，它所提供的功能是我們所夢寐以求的，在頁面布局中，我們可以用它來達(dá)到很多有意思的功能，如輔助線、面積、測量等，我們在CSS網(wǎng)頁布局設(shè)計(jì)中也經(jīng)常用到

線框工具

Outline線框工具這組工具對(duì)我們CSS網(wǎng)頁布局設(shè)計(jì)是非常有用的，線框顯示工具能夠?qū)㈨撁嬷械哪承┰厥褂镁€框描邊，使我們可以更好的查看其占位信息，我們可以使用它給div、h1-h6、表單等進(jìn)行線框描邊，關(guān)于此工具的詳細(xì)介紹：Web Developer插件 Outline、Resize工具教程

尺寸工具

Resize尺寸工具 我們可以用它來改變?yōu)g覽器窗口的尺寸，如果我們使用了1600*1200的分辨率，我們可以借助此工具來模擬1027*768的窗口效果。

Tools工具 對(duì)于我們CSS網(wǎng)頁布局設(shè)計(jì)，它的最大功能在于將CSS及XHTML校驗(yàn)工具整合在一起，可以點(diǎn)擊此工具中的校驗(yàn)選項(xiàng)對(duì)當(dāng)前頁面進(jìn)行檢驗(yàn)，它會(huì)自動(dòng)鏈接到相關(guān)校驗(yàn)頁面，并返回校驗(yàn)結(jié)果。

View Source查看源代碼 用于查看頁面的源文件。

軟件特色

1、相信在 Chrome 面世之前很多網(wǎng)頁開發(fā)者都用過 FireFox上的 Web Developer 附加組件，功能非常強(qiáng)大?，F(xiàn)在，Chrome 版本的 Web Developer 也正式推出了，而且開發(fā)者和 Web Developer For FireFox 是同一個(gè)人—— Chris Pederick。添加一個(gè)工具欄按鈕與各種Web開發(fā)工具。網(wǎng)絡(luò)開發(fā)者擴(kuò)展的官方端口。

2、Web開發(fā)人員擴(kuò)展插件在瀏覽器上添加了一個(gè)工具欄按鈕，使用不同的Web開發(fā)工具。這是官方端口的Web開發(fā)擴(kuò)展的瀏覽器。

3、Web Developer 插件強(qiáng)大的功能超乎你的想象，用于CSS網(wǎng)頁布局開發(fā)調(diào)試只是它強(qiáng)大功能的一部分，對(duì)于網(wǎng)絡(luò)程序的開發(fā)也提供了非常強(qiáng)大的輔助設(shè)計(jì)功能，例如：調(diào)試CSS、清理Cookie、對(duì)表單圖片等對(duì)象進(jìn)行操作等等

使用說明

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序。

3.找到自己已經(jīng)下載好的Chrome離線安裝文件xxx.crx，然后將其從資源管理器中拖動(dòng)到Chrome的擴(kuò)展管理界面中，這時(shí)候用戶會(huì)發(fā)現(xiàn)在擴(kuò)展管理器的中央部分中會(huì)多出一個(gè)”拖動(dòng)以安裝“的插件按鈕。

4.松開鼠標(biāo)就可以把當(dāng)前正在拖動(dòng)的插件安裝到谷歌瀏覽器中去，但是谷歌考慮用戶的安全隱私，在用戶松開鼠標(biāo)后還會(huì)給予用戶一個(gè)確認(rèn)安裝的提示。

5.用戶這時(shí)候只需要點(diǎn)擊添加按鈕就可以把該離線Chrome插件安裝到谷歌瀏覽器中去，安裝成功以后該插件會(huì)立即顯示在瀏覽器右上角（如果有插件按鈕的話），如果沒有插件按鈕的話，用戶還可以通過Chrome擴(kuò)展管理器找到已經(jīng)安裝的插件。

用戶只需要通過上面介紹的五個(gè)步驟就可以輕松地把離線谷歌瀏覽器插件安裝到Chrome中去，希望這個(gè)離線Chrome插件的安裝方法能夠幫助到您。

web developer操作方法

像Robot一樣瀏覽網(wǎng)頁：通過設(shè)置禁用 JavaScript 與 Cookies，這樣一來你在瀏覽網(wǎng)頁時(shí)看到的頁面就像搜索引擎蜘蛛所看到的那樣（多數(shù)情況下不支持Cookies，不執(zhí)行JavaScript）。這個(gè)小小的變化可以迅速幫你識(shí)別網(wǎng)站的結(jié)構(gòu)問題，比如主導(dǎo)航條的顯示是利用 JavaScript 實(shí)現(xiàn)，或訪問者不能使用 Cookies 時(shí)則總是重定向至首頁。（不是危言聳聽，這兩種情況皆為親眼所見?。?/p>

模擬蜘蛛查看網(wǎng)頁：為了盡量還原出模擬出核心蜘蛛工作的效果，可以使用 Web Developer 工具欄屏蔽網(wǎng)頁的樣式與圖片。這時(shí)你則會(huì)驚訝的發(fā)現(xiàn)：之前隱藏的文本已然無所遁形，看似“頭等”的標(biāo)題實(shí)際上只是一個(gè)H4元素以及內(nèi)容的飽和度達(dá)到 75% 也許就表明了某個(gè)頁面出問題的原因。雖然不同搜索引擎的蜘蛛對(duì)待meta重定向的方式不同，但你通過“禁用→禁用 Meta 重定向”往往可以更容易的診斷出一些實(shí)際問題。

查看網(wǎng)頁的結(jié)構(gòu)：至于網(wǎng)頁結(jié)構(gòu)，你可以點(diǎn)擊“網(wǎng)頁信息→查看文件大綱”來查看一個(gè)頁面的結(jié)構(gòu)，或者更加簡化的使用“標(biāo)示→標(biāo)題”功能來查看頁面中標(biāo)題元素的等級(jí)。

驗(yàn)證與最佳實(shí)踐：該工具欄還提供了十分便捷的代碼規(guī)范驗(yàn)證通道（類似W3C 的HTML，CSS與RSS驗(yàn)證），同樣可以對(duì)未設(shè)置“tittle”屬性的鏈接或未設(shè)置“alt”屬性的圖片元素進(jìn)行高亮顯示。

對(duì)調(diào)研和測試有幫助的功能：對(duì)于我們這些長期使用大號(hào)屏幕的人來說，或許沒辦法總是很清楚的了解人們?nèi)绾螢g覽我們的網(wǎng)頁。然而只需輕點(diǎn)“”（向下還原）按鈕就可以讓你看到從老式顯示器或上網(wǎng)本瀏覽該頁的情況。

上圖中的“Love Film com”應(yīng)該明白：大約有20%的瀏覽者看不到他們的“免費(fèi)試用”的大號(hào)綠色按鈕。

網(wǎng)頁截圖更方便：長久以來我們不停的努力去要求自己要做到一件事——“要在客戶報(bào)告中提升具有說明意義的圖片的比重”。但接踵而至的麻煩是，在你不停創(chuàng)建一個(gè)又一個(gè)網(wǎng)頁截圖時(shí)，卻無法避免那些點(diǎn)擊過變了色的鏈接，很難看。通過Web Developer工具欄只需要點(diǎn)擊“其他功能→已訪問鏈接→標(biāo)記所有連接為未訪問”即可！

輕松匿名：很多時(shí)候你或許不想讓他人知道，你是在探測他的站點(diǎn)?，F(xiàn)在你可以通過Web Developer簡單的隱蔽自己的行蹤。點(diǎn)擊“禁用→禁用引用頁（Referrer）”就可以實(shí)現(xiàn)該功能。