CSS tools: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
(add Opera Dragonfly)
mNo edit summary
Line 1: Line 1:
{{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = CSS}} tools
{{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = CSS}} tools
* {{Gd}}[http://litmusapp.com/labs CSSVista] for Windows XP/Vista v0.15 (freeware; 須安裝 [http://www.microsoft.com/downloads/details.aspx?familyid=0856eacb-4362-4b0d-8edd-aab15c5e04f5 .Net Framework v2.0+])
* {{Gd}}[http://litmusapp.com/labs CSSVista] for Windows XP/Vista v0.15 (freeware; 須安裝 [http://www.microsoft.com/downloads/details.aspx?familyid=0856eacb-4362-4b0d-8edd-aab15c5e04f5 .Net Framework v2.0+])
** 按滑鼠一下，選取網頁元素(<span style="cursor:help; Border-bottom-style:dotted; Border-bottom-width:thin;" class="acronym" title="Document Object Model">DOM</span> inspector): ?
** 按滑鼠一下，選取網頁元素(<span style="cursor:help; Border-bottom-style:dotted; Border-bottom-width:thin;" class="acronym" title="Document Object Model">DOM</span> inspector)，即可顯示網頁元素屬性: ?
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** 可預覽螢幕解析度800x600 & 1024x768 不同效果
** 可預覽螢幕解析度800x600 & 1024x768 不同效果
Line 8: Line 8:


* {{Gd}} [http://www.getfirebug.com/ Firebug] v1.5.4 for {{Fx}} ([http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/ How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com])
* {{Gd}} [http://www.getfirebug.com/ Firebug] v1.5.4 for {{Fx}} ([http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/ How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com])
** 按滑鼠一下，選取網頁元素: ok
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** 可追蹤網頁各元素下載所需的時間
** 可追蹤網頁各元素下載所需的時間


* [https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench Firebug Lite] for {{Chrome}}
* [https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench Firebug Lite] for {{Chrome}}
** 按滑鼠一下，選取網頁元素: ok
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** '''無法''' 追蹤網頁各元素下載所需的時間
** '''無法''' 追蹤網頁各元素下載所需的時間
Line 23: Line 23:


* [http://www.opera.com/dragonfly/ Opera Dragonfly] (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly)
* [http://www.opera.com/dragonfly/ Opera Dragonfly] (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly)
** 按滑鼠一下，選取網頁元素: ok
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** 可追蹤網頁各元素下載所需的時間
** 可追蹤網頁各元素下載所需的時間


* [http://chrispederick.com/work/web-developer/ Web Developer extension] v1.1.4 for {{Fx}}
* [http://chrispederick.com/work/web-developer/ Web Developer extension] v1.1.4 for {{Fx}}
** 按滑鼠一下，選取網頁元素: ok
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** 提供驗證工具([[Validator]])
** 提供驗證工具([[Validator]])
Line 34: Line 34:


* [http://www.debugbar.com/?langage=en DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer] for {{IE}}
* [http://www.debugbar.com/?langage=en DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer] for {{IE}}
** 按滑鼠一下，選取網頁元素: ok
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 無法針對遠端網頁預覽CSS修改的效果
** 無法針對遠端網頁預覽CSS修改的效果
** 提供驗證工具(validator)
** 提供驗證工具(validator)
Line 40: Line 40:


* [http://www.newsgator.com/individuals/topstyle/default.aspx TopStyle] Lite 3.5 for Windows (trial)
* [http://www.newsgator.com/individuals/topstyle/default.aspx TopStyle] Lite 3.5 for Windows (trial)
** 按滑鼠一下，選取網頁元素: ?
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ?
** 無法針對遠端網頁預覽CSS修改的效果?
** 無法針對遠端網頁預覽CSS修改的效果?
** 提供驗證工具(validator)
** 提供驗證工具(validator)
Line 47: Line 47:


* [http://www.microsoft.com/downloads/details.aspx?FamilyId=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en Internet Explorer Developer Toolbar](開發者工具) v.1.00.2188.0 for Windows {{IE}}
* [http://www.microsoft.com/downloads/details.aspx?FamilyId=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en Internet Explorer Developer Toolbar](開發者工具) v.1.00.2188.0 for Windows {{IE}}
** 按滑鼠一下，選取網頁元素: ok
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** 提供驗證工具(validator)
** 提供驗證工具(validator)

Revision as of 00:22, 23 August 2010

CSS tools

  • Good.gifCSSVista for Windows XP/Vista v0.15 (freeware; 須安裝 .Net Framework v2.0+)
    • 按滑鼠一下，選取網頁元素(DOM inspector)，即可顯示網頁元素屬性: ?
    • 可針對遠端網頁預覽CSS修改的效果
    • 可預覽螢幕解析度800x600 & 1024x768 不同效果
    • 分割視窗同時顯示 Firefox v1.7 (Firefox browser_firefox.png ) 與 Internet explorer(IE Browser msie.png ) v6 瀏覽畫面


  • Firebug Lite for Chrome Browser chrome.png
    • 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 無法 追蹤網頁各元素下載所需的時間
  • csscan for Chrome Browser chrome.png
    • 將滑鼠移動到要顯示的網頁元素，就會顯示CSS屬性
    • 無法針對遠端網頁預覽CSS修改的效果
    • 無法 追蹤網頁各元素下載所需的時間
  • Opera Dragonfly (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly)
    • 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 可追蹤網頁各元素下載所需的時間
  • Web Developer extension v1.1.4 for Firefox browser_firefox.png
    • 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 提供驗證工具(Validator)





網頁製作相關擴充套件 for Firefox browser_firefox.png

不同螢幕解析度檢視網頁

further reading

Retrieved from "https://wiki.planetoid.info/index.php?title=CSS_tools&oldid=8873"