CSS tools: Difference between revisions

Revision as of 01:11, 27 April 2009

CSS tools

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

Firebug v1.05 for Firefox (How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com)
- 按滑鼠一下，選取網頁元素: ok
- 可針對遠端網頁預覽CSS修改的效果
- 可追蹤網頁各元素下載所需的時間

Web Developer extension v1.1.4 for Firefox
- 按滑鼠一下，選取網頁元素: ok
- 可針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(Validator)

DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer for IE
- 按滑鼠一下，選取網頁元素: ok
- 無法針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(validator)

TopStyle Lite 3.5 for Windows (trial)
- 按滑鼠一下，選取網頁元素: ?
- 無法針對遠端網頁預覽CSS修改的效果?
- 提供驗證工具(validator)
- 相關文章: 排序 CSS 的利器 - TopStyle | 走過的、學過的、看過的

Internet Explorer Developer Toolbar(開發者工具) v.1.00.2188.0 for Windows IE
- 按滑鼠一下，選取網頁元素: ok
- 可針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(validator)
- 可結合IE6 ~ IE8模擬應用程式，並均可使用該開發者工具

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

Aardvark Firefox Extension
Running Aardvark as a bookmarklet in Firefox, IE, or Safari
ColorZilla Extension for Firefox and Mozilla
MeasureIt: "Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels." Quoted from official website.
View Source Chart [1] (Author's website: JavaScript Cake Tutorials and Scripts)

@@ Line 1: / Line 1: @@
 {{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+])
+** 按滑鼠一下，選取網頁元素(<span style="cursor:help; Border-bottom-style:dotted; Border-bottom-width:thin;" class="acronym" title="Document Object Model">DOM</span> inspector): ?
 ** 可針對遠端網頁預覽CSS修改的效果
 ** 可預覽螢幕解析度800x600 & 1024x768 不同效果
@@ Line 7: / Line 8: @@
 * {{Gd}}[http://www.getfirebug.com/ Firebug] v1.05 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
 ** 可針對遠端網頁預覽CSS修改的效果
 ** 可追蹤網頁各元素下載所需的時間
@@ Line 13: / Line 15: @@
 * [http://chrispederick.com/work/web-developer/ Web Developer extension] v1.1.4 for {{Fx}}
+** 按滑鼠一下，選取網頁元素: ok
 ** 可針對遠端網頁預覽CSS修改的效果
 ** 提供驗證工具([[Validator]])
@@ Line 18: / Line 21: @@
 * [http://www.debugbar.com/?langage=en DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer] for {{IE}}
+** 按滑鼠一下，選取網頁元素: ok
 ** 無法針對遠端網頁預覽CSS修改的效果
 ** 提供驗證工具(validator)
@@ Line 23: / Line 27: @@
 * [http://www.newsgator.com/individuals/topstyle/default.aspx TopStyle] Lite 3.5 for Windows (trial)
+** 按滑鼠一下，選取網頁元素: ?
 ** 無法針對遠端網頁預覽CSS修改的效果?
 ** 提供驗證工具(validator)
@@ Line 29: / Line 34: @@
 * [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
 ** 可針對遠端網頁預覽CSS修改的效果
 ** 提供驗證工具(validator)

CSS tools: Difference between revisions

Revision as of 01:11, 27 April 2009

Navigation menu

Search