Go to comments ↓ 2009年09月24日 - Home » 资源分享

YAML Debug：强大的在线网页调试工具

recommend 调试工具对网页开发人员来说是必备的。但是像我们不专业，只是偶尔修改下主题的话就显得大材小用。
A.shun给大家推荐一个线网页调试工具：YAML Debug。简单易用，功能也还不错，界面美观，更重要的是使用极其方便，只需加到书签或者工具栏上。特别适合向我这样业余的。

当然，作为一个在线工具，你不能指望它像Firebug和Dragonfly那样强大。只是这不会占用你硬盘上的空间，也不会像扩展那样影响浏览器性能。所以建议收藏着。

yaml debug

什么是YAML Debug

YAML Debug是Web开发的一个辅助工具，允许您快速审查代码质量和语义结构的任何网站（特别是YAML的基础的。
完美支持Opera9.x+和FF3.x+。在 Safari 3.x中有一些小问题：无法禁用外部的样式表。IE7仅支持部分功能。

来自德国，官方主页：http://debug.yaml.de/

官方描述：

YAML Debug is …
… an assistive tool for web developers, that allows you to quickly review code quality and semantic structure of any website (particularly those based on YAML) as well as testing it against common oversights.

主界面如下：

在线调试工具

YAML Debug的功能

由于我英文水平实在太囧，这是通过自己实际体验并对照着Google翻译写出来的，大家将就着看吧。

查看网页信息

YAML Debug能检测网页的编码、文档类型、渲染模式（支持HTML 5）。
还可以计算出外部样式表、脚本和图像的数量。

样式选项

在样式表选项卡，会列出该页所有的外部和嵌入式样式表。通过点击，可以禁用或启用相应样式表。
可以查看每一个外部样式表，支持代码颜色。还直接发送给W3C进行CSS验证。

样式表查看
yaml样式表查看
样式表调试

代码性质检查

检查页面内没有alt属性的<img>元素，不建议使用的HTML元素，找到空元素（如<p></p>）。
和包含内联元素样式。段落的样式。这些可以点击相应的按钮以高亮发生显示。

代码检查

内容和屏幕布局查看

YAML Debug可让您轻松直观的任何网页语义结构和Div布局。
此外，可以添加背景网格测试典型大小的网页。

yaml辅助
背景网格

辅助功能

这些功能可以帮助网络开发人员发现他们的网页上可访问性问题。
YAML的调试允许显示title和lang属性，突出命名锚点，特别是从同一网页的引用。

显示所有超链接

显示页面的超链接地址。

超链接检查

如何使用

点击即可体验，或者将链接存为书签方便进行调用。（适用于各种浏览器）

YAML Debug

点击添加到自定义按钮，或者将下面这个按钮拖到你向要的位置。（仅适合Opera用户）

Yaml Debug

或者把下面代码加到你的菜单文件中（仅适合Opera用户）

Item, "Yaml Debug"="Go to page, "javascript:(function()%7Bvar%20s%20=%20document.createElement('script');%20s.setAttribute('type',%20'text/javascript');%20s.setAttribute('class',%20'ydebug');%20s.setAttribute('src','http://debug.yaml.de/debugger.js');%20document.getElementsByTagName('head')%5B0%5D.appendChild(s);%20%7D)();", ,"YAML Debug" , "DOM Console""

目前版本为Version: 0.9.3 beta，这只是一个公开测试版，出现什么问题可以向作者反馈。

» 转载请以超链接形式注明来源：A.shun Blog » 《YAML Debug：强大的在线网页调试工具》
» 本文链接地址：http://shun.im/21283