• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] 前端開發兼容性測試的工具與網站—- 其他教程




    教學主題: 前端開發兼容性測試的工具與網站

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: 前端開發兼容性測試的工具與網站

    這教學的重點為這幾點 [ 工具,網站,測試,開發,驗證,瀏覽器,版本,使用,Firef ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    很不錯的文章,涵蓋了目前前端開發者經常要用的一些測試工具與網站,對於前端開發來說測試各類網頁在瀏覽器中的兼容性是必須掌握的技能,其中也包括使用許多軟件來提高工作效率,當然本文並不包含所有的測試工具,但大多數都十分有用。

    導讀:很不錯的文章,涵蓋了目前前端開發者經常要用的一些測試工具與網站,對於前端開發來說測試各類網頁在瀏覽器中的兼容性是必須掌握的技能,其中也包括使用許多軟件來提高工作效率,當然本文並不包含所有的測試工具,但大多數都十分有用。

    前端開發人員最頭疼的,莫過於形形色色的瀏覽器間的兼容性問題。每天絞盡腦汁地為這些本不應該存在的東西費盡心思。由於各個瀏覽器內核及解析方式的不同,使得相同的前端代碼不能實現相同的效果。所以,培養良好標準的代碼編寫習慣的同時,熟練掌握瀏覽器兼容性測試的常用工具也是必需的了。這裡是網絡上傳播較多的13個不同操作系統中各色瀏覽器兼容性測試的軟件工具。

    HTML和CSS驗證

    首先讓我們先看一看檢查驗證HTML與CSS的方法。我應該說到的是由於我在MAC上工作,會略微偏向於MAC。不要擔心,仍然有許多平台獨立解決方案的。

    除了驗證你的文件以外,你也應該很好的格式化自己的代碼”HTML/CSS格式化實例與提示“是有關此類主題的文章。

    1. W3C 驗證 – HTML

    可能大多數人都知道在線的W3C驗證服務你可以通過鏈接地址進行驗證,或者是上傳文件或者直接提交代碼。有很多的驗證選項,儘管很多時間你不真的需要他們。

    前端開發兼容性測試的工具與網站

    2. W3C 驗證 – CSS

    你很可能知道W3C的也有一個CSS校驗服務。與HTML驗證服務一樣,這個CSS版本更多的選擇,並允許在必要時通過的URI驗證,文件上傳和直接提交代碼。

    前端開發兼容性測試的工具與網站

    3. [Firefox] 網頁開發工具條

    The Web Developer toolbar extension for Firefox的網頁開發工具條非常受歡迎,擁有很多非常棒個的功能,附加了很棒的HTML與CSS驗證工具,你可以快速的對當前瀏覽的本地文件網站進行驗證。他會發送URI或者文件到W3C,並在新的選項頁裡面顯示驗證結果。

    你也可以打開“驗證顯示頁面”來快速查看HTML和CSS的驗證信息,無需再打開新的標籤頁面。假如你在開發一個項目非常有幫助。不僅僅是HTML與CSS你也可以驗證更多的選項。

    前端開發兼容性測試的工具與網站

    4. [獨立的瀏覽器] W3C Validator Favelets

    我使用Safari瀏覽器作為我的主要網絡瀏覽器,但是Firefox已經寵壞了我,它擁有強大的擴展選擇,如網絡開發工具欄和Firebug。 Safari瀏覽器的Web Inspector,一個類似Firebug的工具,但不能進行文件驗證。

    涵蓋幾乎任何主要瀏覽器驗證HTML和CSS的快速和輕鬆的方法是使用favelets 。 Favelets是通過JavaScript增加額外的功能的書籤片段。 W3C的提供了幾種驗證favelets,我經常使用的是Safari 。

    前端開發兼容性測試的工具與網站

    5. 你的開發編輯器

    大多數的編輯器提供少許的驗證工具。目前我使用的編輯器Coda和CSSEdit都提供驗證工具。

    前端開發兼容性測試的工具與網站

    6. 驗證 S.A.C.

    如果您需要迅速驗證大量的文件,在最喜愛的編輯器或通過瀏覽器打開所有文件是痛苦的事情。這個應用會讓這個過程快速而且簡單。

    S.A.C驗證器是OS X的單機應用程序,可以使用favelet驗證HTML文件(with W3C),拖放或者通過URL的或僅僅是應用程序的文件> 打開。我用的是拖放方法尤其頻繁。

    前端開發兼容性測試的工具與網站

    前端開發兼容性測試的工具與網站

    驗證的一些想法

    雖然驗證是非常重要的,不過它只是一種工具,以幫助確保您的代碼達到標準和接近完美。如果您使用的是一些新的網絡技術,它可能無法驗證,這並不意味着你不應該使用它。創新的問世往往是打破了規則。

    儘管如此,如果需要提交的模板進行銷售,請確保所有的文件驗證后提交。如果有由於CSS3這樣的驗證錯誤,只需要在後面的說明中註明。

    前端開發兼容性測試的工具與網站

    瀏覽器兼容測試

    如果每個人都只使用最新版本的Firefox或Safari瀏覽器,瀏覽器的測試將是一件輕而易舉的事。還是讓我們面對現實吧,這是不會發生,我們未來幾年都將會與Internet Explorer的問題做鬥爭(不只是IE6) 。

    以下是一些我常用的和一些我不用的工具,測試Internet Explorer,Safari,Firefox和其他瀏覽器的兼容性。

    當前的IE, Firefox 與 Safari

    很明顯,如果你在使用的Windows,目前肯定安裝了例如Firefox 3.5 , Safari4 , Opera和Internet Explorer等瀏覽器。

    前端開發兼容性測試的工具與網站

    7. 老版本的Firefox

    如果需要測試的舊版本Firefox。這裡有幾個我認為最簡單的方法可以做到這一點。

    Windows: Standalone Firefox (older versions) via Portableapps.com

    Mac: MultiFirefox 2.0

    Portableapps在Windows上作為單獨的應用軟件運行Firefox,因此沒有必要安裝,也不會幹擾到當前安裝的Firefox。

    Mac下的MultiFirefox 2.0,可以讓你運行不同版本的Firefox,並管理不同的賬戶。

    前端開發兼容性測試的工具與網站

    你可以訪問 http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ 下載其他版本

    8.老版本的Safari

    不幸的是,基於Windows的Web開發人員,我沒有測試多個版本的Safari瀏覽器的簡單解決辦法。對Mac用戶來說,這是個不錯的獨立版本的Safari瀏覽器收集,Michel Fortin提供。

    前端開發兼容性測試的工具與網站

    9 & 10. 老版本的Internet Explorer

    在Mac下交互測試IE是不輕鬆的,所以我安裝了虛擬機運行XP安裝了IETester,這個產品可以幫助你在Windows XP, Vista 和 7下測試IE從5.5開始的各個版本。

    前端開發兼容性測試的工具與網站
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    每隔一段時間我都會在IETester中發現一個古怪的問題,我不能確定是不是在原版本的IE6或7中是存在。所以我也使用Internet Explorer Collection安裝了獨立版本的IE6, 7 和 8。

    前端開發兼容性測試的工具與網站
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    快照服務

    假如你不需要在這些瀏覽器中與你的網站實際互動,你還可以使用多種瀏覽器的快照服務,這將只顯示網站在各種各樣的瀏覽器中的圖像效果。

    11. Adobe BrowserLab

    Adobe最近放出一個新的名叫BrowserLab的服務,它可以通過網站的網址讓你看到不同瀏覽器下的不同效果。快速,免費,你可以進行兩個不同瀏覽器版本的瀏覽效果進行對比。

    前端開發兼容性測試的工具與網站

    12. Browsershots.org

    Browsershots.org 與Adobe BrowserLab有着相同想法,但是也有很多的不同之處。你可以在更多的平台上設置更多的選項例如屏幕大小,顏色深度,JS,flash等,來測試更多的瀏覽器效果。服務的趨勢在下降,因為速度有點慢(有的時候太慢了),幾乎沒有很好的UI.

    前端開發兼容性測試的工具與網站

    13. Browsercam

    如果你沒有讀到”25個設計師必不可少的網絡服務“, 那你應該去讀一下。你會發現有很多很棒的服務,Browsercam 就是我在其中發現的。

    Browsercam也可以做基礎的瀏覽效果截圖,但是進一步使用別的功能和快速顯示需要付費,然而我沒有再次使用。

    前端開發兼容性測試的工具與網站

    最後的一些想法

    現在你擁有了一些在Windows和Mac中驗證和測試工作的的方法。如果你要提交模板到Theme Fores,你現在沒有驗證錯誤或者瀏覽器不兼容的接口了吧。大多數我審查拒絕的模板,都是由於瀏覽器驗證錯誤和瀏覽器兼容問題而造成的,需要在提交前修正這些問題。

    內容出處不詳,如果是你的原創文章,請留下你的文章地址,會及時補上。

    進入論壇參與討論:http://www.missyuan.com/viewthread.php?tid=429320

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 前端開發兼容性測試的工具與網站 這教學會喜歡

    文章標題: 骨子愛創意- 前端開發兼容性測試的工具與網站–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 工具,網站,測試,開發,驗證,瀏覽器,版本,使用,Firef

    本文永久連結 :前端開發兼容性測試的工具與網站

    本文轉載自 :VIA