用来查看网页源码的7 个 Firefox 扩展
fmms 13年前
<p> 作为 Web 开发者来说,经常需要研究各种网站,看网页的 HTML 代码,本文向你推介 7 款 Firefox 的扩展,可让查看网页源码更加方便。</p> <p> <strong>1. <a href="/misc/goto?guid=4958193651518750064">View Source Chart</a></strong></p> <p> 该插件可让你使用更容易理解的结构来显示网页源码,并有语法着色功能。</p> <blockquote> <p>* 图形化显示 HTML 标签的边界<br /> * 图形化定义标签嵌套顺序、结构和层次</p> </blockquote> <p style="text-align:center;"><a href="/misc/goto?guid=4958193652254410200"><img alt="" src="https://simg.open-open.com/show/170154444ef05a1f56640061776ad437.jpg" width="383" height="323" /></a></p> <hr /> <p> <strong>2. <a href="/misc/goto?guid=4958193652990462487">JSView 2.0.8</a></strong></p> <p> 该扩展可让你轻松访问页面相关的外部文件,例如 js 和 css。<a href="/misc/goto?guid=4958193653727141671"><br /> </a><a href="/misc/goto?guid=4958193654470125521"><img title="JSView -- Add-ons for Firefox" alt="JSView -- Add-ons for Firefox" src="https://simg.open-open.com/show/c948ab05b76a7c5f44a5bb1a257b8369.jpg" width="279" height="217" /></a></p> <hr /> <p> <strong>3. <a href="/misc/goto?guid=4958193655216804630">HighlightAll</a></strong></p> <p> 该扩展只是简单的对所有页面中的元素的关键字进行高亮显示,并计算其出现的频率。</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958193655956810989"><img title="HighlightAll -- Add-ons for Firefox" alt="HighlightAll -- Add-ons for Firefox" src="https://simg.open-open.com/show/d35394d36aaacc9b0c0e2ba115ace731.jpg" width="448" height="145" /></a></p> <hr /> <p> <strong>4. <a href="/misc/goto?guid=4958185668404957482">Html Validator</a></strong></p> <p> 在状态栏上增加了一个小图标,该图标可立即在页面加载的时候验证代码,基于 HTML Tidy。</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958193657364267320"><img title="Html Validator -- Add-ons for Firefox" alt="Html Validator -- Add-ons for Firefox" src="https://simg.open-open.com/show/7fa6aa353389e3fce15f3b5bc7e30bec.jpg" width="345" height="324" /></a></p> <hr /> <p> <strong>5. <a href="/misc/goto?guid=4958193658093117963">View Formatted Source</a></strong></p> <p> 它显示了源码中的结构化变量,并使用代码折叠的方式进行展示,可显示每个元素的 CSS 匹配规则。</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958193658835865093"><img alt="" src="https://simg.open-open.com/show/524bd4a96d5b629ead22b0fde9a38938.jpg" width="337" height="193" /></a></p> <hr /> <p> <strong>6. <a href="/misc/goto?guid=4958193659583563336">SourceEditor</a></strong></p> <p> 这是一个很小的工具可让你在浏览器中快速轻松的编辑页面。</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958193660323386594"><img title="SourceEditor -- Add-ons for Firefox" alt="SourceEditor -- Add-ons for Firefox" src="https://simg.open-open.com/show/42b6d77bfe5c1ce1aa71b9346ae16873.jpg" width="559" height="148" /></a><a href="/misc/goto?guid=4958193661067025446"><br /> </a></p> <hr /> <p> <strong>7. <a href="/misc/goto?guid=4958193661798231476">PageDiff</a></strong></p> <p> 可对多个页面进行 HTML 代码的比较</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958193662526902340"><img alt="" src="https://simg.open-open.com/show/cb468718c85e19c2b992ff6b4d76fd67.jpg" width="400" height="188" /></a></p>