13個(gè)瀏覽器兼容性調(diào)試驗(yàn)證工具
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
[p]前端開發(fā)人員最頭疼的,莫過于形形色色的瀏覽器間的兼容性問題。每天絞盡腦汁地為這些本不應(yīng)該存在的東西費(fèi)盡心思。由于各個(gè)瀏覽器內(nèi)核及解析方式的不同,使得相同的前端代碼不能實(shí)現(xiàn)相同的效果。所以,培養(yǎng)良好標(biāo)準(zhǔn)的代碼編寫習(xí)慣的同時(shí),熟練掌握瀏覽器兼容性測(cè)試的常用工具也是必需的了。這里是網(wǎng)絡(luò)上傳播較多的13個(gè)不同操作系統(tǒng)中各色瀏覽器兼容性測(cè)試的軟件工具。[/p]
html和css驗(yàn)證 [p]首先讓我們先看一看檢查驗(yàn)證html與css的方法。我應(yīng)該說到的是由于我在mac上工作,會(huì)略微偏向于mac。不要擔(dān)心,仍然有許多平**立解決方案的。[/p] [p]除了驗(yàn)證你的文件以外,你也應(yīng)該很好的格式化自己的代碼”[url=http://blog.themeforest.net/tutorials/examples-and-tips-for-great-htmlcss-formatting/]html/css格式化[/url][url=http://blog.themeforest.net/tutorials/examples-and-tips-for-great-htmlcss-formatting/]實(shí)例與提示[/url]“是有關(guān)此類主題的文章。[/p] 1. w3c 驗(yàn)證 – html [p]可能大多數(shù)人都知道在線的[url=http://validator.w3.org/][color=#2e6ab1]w3c驗(yàn)證服務(wù)[/color][/url]你可以通過鏈接地址進(jìn)行驗(yàn)證,或者是上傳文件或者直接提交代碼。有很多的驗(yàn)證選項(xiàng),盡管很多時(shí)間你不真的需要他們。[/p] [url=http://validator.w3.org/][img]http://bbon.cn/wp-content/uploads/2009/11/224822xr4.jpg[/img][/url] 2. w3c 驗(yàn)證 – css [p]你很可能知道w3c的也有一個(gè)[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]校驗(yàn)服務(wù)。與html驗(yàn)證服務(wù)一樣,這個(gè)css版本更多的選擇,并允許在必要時(shí)通過的uri驗(yàn)證,文件上傳和直接提交代碼。[/p] [url=http://jigsaw.w3.org/css-validator/][img]http://bbon.cn/wp-content/uploads/2009/11/2248229ja.jpg[/img][/url] 3. [firefox] 網(wǎng)頁開發(fā)工具條 [p]the web developer toolbar extension for firefox的網(wǎng)頁開發(fā)工具條非常受歡迎,擁有很多非常棒個(gè)的功能,附加了很棒的html與[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]驗(yàn)證工具,你可以快速的對(duì)當(dāng)前瀏覽的本地文件網(wǎng)站進(jìn)行驗(yàn)證。他會(huì)發(fā)送uri或者文件到w3c,并在新的選項(xiàng)頁里面顯示驗(yàn)證結(jié)果。[/p] [p]你也可以打開“驗(yàn)證顯示頁面”來快速查看html和[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]的驗(yàn)證信息,無需再打開新的標(biāo)簽頁面。假如你在開發(fā)一個(gè)項(xiàng)目非常有幫助。不僅僅是html與css你也可以驗(yàn)證更多的選項(xiàng)。[/p] [url=http://chrispederick.com/work/web-developer/][img]http://bbon.cn/wp-content/uploads/2009/11/22482338a.jpg[/img][/url] 4. [獨(dú)立的瀏覽器] w3c validator favelets [p]我使用safari瀏覽器作為我的主要網(wǎng)絡(luò)瀏覽器,但是firefox已經(jīng)寵壞了我,它擁有強(qiáng)大的擴(kuò)展選擇,如網(wǎng)絡(luò)開發(fā)工具欄和firebug。 safari瀏覽器的web inspector,一個(gè)類似firebug的工具,但不能進(jìn)行文件驗(yàn)證。[/p] [p]涵蓋幾乎任何主要瀏覽器驗(yàn)證html和[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]的快速和輕松的方法是使用favelets 。 favelets是通過javascript增加額外的功能的書簽片段。 w3c的提供了幾種驗(yàn)證favelets,我經(jīng)常使用的是safari 。[/p] [url=http://validator.w3.org/favelets.html][img]http://bbon.cn/wp-content/uploads/2009/11/224823x7x.jpg[/img][/url] 5. 你的開發(fā)編輯器 [p]大多數(shù)的編輯器提供少許的驗(yàn)證工具。目前我使用的編輯器[url=http://panic.com/coda/][color=#2e6ab1]coda[/color][/url]和[url=http://macrabbit.com/cssedit/][color=#2e6ab1]cssedit[/color][/url]都提供驗(yàn)證工具。[url=http://macrabbit.com/cssedit/][br][/url][/p] [img]http://bbon.cn/wp-content/uploads/2009/11/224823xf9.png[/img] 6. 驗(yàn)證 s.a.c. [p]如果您需要迅速驗(yàn)證大量的文件,在最喜愛的編輯器或通過瀏覽器打開所有文件是痛苦的事情。這個(gè)應(yīng)用會(huì)讓這個(gè)過程快速而且簡(jiǎn)單。[/p] [p]s.a.c驗(yàn)證器是os x的單機(jī)應(yīng)用程序,可以使用favelet驗(yàn)證html文件(with w3c),拖放或者通過url的或僅僅是應(yīng)用程序的文件> 打開。我用的是拖放方法尤其頻繁。 [img]http://bbon.cn/wp-includes/images/smilies/icon_wink.gif[/img] [/p] [url=http://habilis.net/validator-sac/][img]http://bbon.cn/wp-content/uploads/2009/11/2248237ks.jpg[/img][/url] 驗(yàn)證的一些想法 [p]雖然驗(yàn)證是非常重要的,不過它只是一種工具,以幫助確保您的代碼達(dá)到標(biāo)準(zhǔn)和接近完美。如果您使用的是一些新的網(wǎng)絡(luò)技術(shù),它可能無法驗(yàn)證,這并不意味著你不應(yīng)該使用它。創(chuàng)新的問世往往是打破了規(guī)則。[/p] [p]盡管如此,如果需要提交的模板進(jìn)行銷售,請(qǐng)確保所有的文件驗(yàn)證后提交。如果有由于[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]3這樣的驗(yàn)證錯(cuò)誤,只需要在后面的說明中注明。 [img]http://bbon.cn/wp-includes/images/smilies/icon_wink.gif[/img] [/p] 瀏覽器兼容測(cè)試 [p]如果每個(gè)人都只使用最新版本的firefox或safari瀏覽器,瀏覽器的測(cè)試將是一件輕而易舉的事。還是讓我們面對(duì)現(xiàn)實(shí)吧,這是不會(huì)發(fā)生,我們未來幾年都將會(huì)與internet explorer的問題做斗爭(zhēng)(不只是ie6) 。[/p] [p]以下是一些我常用的和一些我不用的工具,測(cè)試internet explorer,safari,firefox和其他瀏覽器的兼容性。[/p] 當(dāng)前的ie, firefox 與 safari [p]很明顯,如果你在使用的windows,目前肯定安裝了例如firefox 3.5 , safari4 , opera和internet explorer等瀏覽器。[/p] [img]http://bbon.cn/wp-content/uploads/2009/11/224823jje.jpg[/img] 7. 老版本的firefox [p]如果需要測(cè)試的舊版本firefox。這里有幾個(gè)我認(rèn)為最簡(jiǎn)單的方法可以做到這一點(diǎn)。[/p] [ul] [li]windows: [url=http://sourceforge.net/projects/portablefirefox/files/][color=#2e6ab1]standalone firefox (older versions)[/color][/url] via [url=http://portableapps.com/][color=#2e6ab1]portableapps.com[/color][/url][/li] [li]mac: [url=http://davemartorana.com/multifirefox/][color=#2e6ab1]multifirefox 2.0[/color][/url][/li][/ul] [p]portableapps在windows上作為單獨(dú)的應(yīng)用軟件運(yùn)行firefox,因此沒有必要安裝,也不會(huì)干擾到當(dāng)前安裝的firefox。[/p] [p]mac下的multifirefox 2.0,可以讓你運(yùn)行不同版本的firefox,并管理不同的賬戶。[/p] [url=http://davemartorana.com/multifirefox/][img]http://bbon.cn/wp-content/uploads/2009/11/224824zhl.jpg[/img][/url] [p]你可以訪問 [url=http://releases.mozilla.org/pub/mozilla.org/firefox/releases/][color=#2e6ab1]http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ [/color][/url]下載其他版本[url=http://releases.mozilla.org/pub/mozilla.org/firefox/releases/][br][/url][/p] 8.老版本的safari [p]不幸的是,基于windows的web開發(fā)人員,我沒有測(cè)試多個(gè)版本的safari瀏覽器的簡(jiǎn)單解決辦法。對(duì)mac用戶來說,這是個(gè)不錯(cuò)的獨(dú)立版本的safari瀏覽器收集,[url=http://michelf.com/projects/multi-safari/][color=#2e6ab1]michel fortin提供[/color][/url]。[/p] [url=http://michelf.com/projects/multi-safari/][img]http://bbon.cn/wp-content/uploads/2009/11/224824gpk.png[/img][/url] 9 & 10. 老版本的internet explorer [p]在mac下交互測(cè)試ie是不輕松的,所以我安裝了虛擬機(jī)運(yùn)行xp安裝了ietester,這個(gè)產(chǎn)品可以幫助你在windows xp, vista 和 7下測(cè)試ie從5.5開始的各個(gè)版本。[/p] [url=http://my-debugbar.com/wiki/ietester/homepage][img]http://bbon.cn/wp-content/uploads/2009/11/224824dm7.jpg[/img][/url] [p]每隔一段時(shí)間我都會(huì)在ietester中發(fā)現(xiàn)一個(gè)古怪的問題,我不能確定是不是在原版本的ie6或7中是存在。所以我也使用[url=http://finalbuilds.edskes.net/iecollection.htm][color=#2e6ab1]internet explorer collection[/color][/url]安裝了獨(dú)立版本的ie6, 7 和 8。[/p] [url=http://finalbuilds.edskes.net/iecollection.htm][img]http://bbon.cn/wp-content/uploads/2009/11/224824wbj.jpg[/img][/url] 快照服務(wù) [p]假如你不需要在這些瀏覽器中與你的網(wǎng)站實(shí)際互動(dòng),你還可以使用多種瀏覽器的快照服務(wù),這將只顯示網(wǎng)站在各種各樣的瀏覽器中的圖像效果。[/p] 11. adobe browserlab [p]adobe最近放出一個(gè)新的名叫[url=http://browserlab.adobe.com/][color=#2e6ab1]browserlab[/color][/url]的服務(wù),它可以通過網(wǎng)站的網(wǎng)址讓你看到不同瀏覽器下的不同效果。快速,免費(fèi),你可以進(jìn)行兩個(gè)不同瀏覽器版本的瀏覽效果進(jìn)行對(duì)比。[/p] [url=http://browserlab.adobe.com/][img]http://bbon.cn/wp-content/uploads/2009/11/224824cw8.jpg[/img][/url] 12. browsershots.org [p][url=http://browsershots.org/][color=#2e6ab1]browsershots.org[/color][/url] 與adobe browserlab有著相同想法,但是也有很多的不同之處。你可以在更多的平臺(tái)上設(shè)置更多的選項(xiàng)例如屏幕大小,顏色深度,js,flash等,來測(cè)試更多的瀏覽器效果。服務(wù)的趨勢(shì)在下降,因?yàn)樗俣扔悬c(diǎn)慢(有的時(shí)候太慢了),幾乎沒有很好的ui.[/p] [url=http://browsershots.org/][img]http://bbon.cn/wp-content/uploads/2009/11/224824rtp.jpg[/img][/url] 13. browsercam [p]如果你沒有讀到”[url=http://blog.themeforest.net/resources/25-essential-web-services-for-designers/][color=#2e6ab1]25個(gè)設(shè)計(jì)師必不可少的網(wǎng)絡(luò)服務(wù)[/color][/url]“, 那你應(yīng)該去讀一下。你會(huì)發(fā)現(xiàn)有很多很棒的服務(wù),[url=http://browsercam.com/][color=#2e6ab1]browsercam[/color][/url] 就是我在其中發(fā)現(xiàn)的。[/p] [p]browsercam也可以做基礎(chǔ)的瀏覽效果截圖,但是進(jìn)一步使用別的功能和快速顯示需要付費(fèi),然而我沒有再次使用。[/p] [url=http://browsercam.com/][img]http://bbon.cn/wp-content/uploads/2009/11/2248255e8.jpg[/img][/url] 最后的一些想法 [p]現(xiàn)在你擁有了一些在windows和mac中驗(yàn)證和測(cè)試工作的的方法。如果你要提交模板到theme fores,你現(xiàn)在沒有驗(yàn)證錯(cuò)誤或者瀏覽器不兼容的接口了吧。大多數(shù)我審查拒絕的模板,都是由于瀏覽器驗(yàn)證錯(cuò)誤和瀏覽器兼容問題而造成的,需要在提交前修正這些問題。[/p] [p]內(nèi)容出處不詳,如果是你的原創(chuàng)文章,請(qǐng)留下你的文章地址,會(huì)及時(shí)補(bǔ)上。[/p] [p][url=http://bbon.cn/2009/11/13-debugging-the-browser-compatibility-verification-tools.html]http://bbon.cn/2009/11/13-debugging-the-browser-compatibility-verification-tools.html[/url][/p] 該文章在 2010/4/26 23:56:24 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |