CSS tools: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
(add csscan) |
||
| Line 11: | Line 11: | ||
** 可針對遠端網頁預覽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修改的效果 | ||
** '''無法''' 追蹤網頁各元素下載所需的時間 | ** '''無法''' 追蹤網頁各元素下載所需的時間 | ||
* [https://chrome.google.com/extensions/detail/nnklpgoldelpoigiacfpnpphpkkmbdkb csscan] for {{Chrome}} | |||
** 按滑鼠一下，選取網頁元素: ok | |||
** '''無法'''針對遠端網頁預覽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}} | ||
Revision as of 10:08, 7 July 2010
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修改的效果
- 可追蹤網頁各元素下載所需的時間
- Firebug Lite for Chrome
- 按滑鼠一下，選取網頁元素: ok
- 可針對遠端網頁預覽CSS修改的效果
- 無法 追蹤網頁各元素下載所需的時間
- csscan for Chrome
- 按滑鼠一下，選取網頁元素: 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 Firefox
- Running Aardvark as a bookmarklet in Firefox , IE or Safari
- ColorZilla Extension for Firefox and Mozilla Firefox
- MeasureIt: "Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels." Quoted from official website. Firefox
- View Source Chart[1] (Author's website: JavaScript Cake Tutorials and Scripts) Firefox
不同螢幕解析度檢視網頁
- ViewLike.Us ViewLikeUs - Check Sites in Various Resolutions!
further reading