YAML Debug:强大的在线网页调试工具
调试工具对网页开发人员来说是必备的。但是像我们不专业,只是偶尔修改下主题的话就显得大材小用。
A.shun给大家推荐一个线网页调试工具:YAML Debug。简单易用,功能也还不错,界面美观,更重要的是使用极其方便,只需加到书签或者工具栏上。特别适合向我这样业余的。
当然,作为一个在线工具,你不能指望它像Firebug和Dragonfly那样强大。只是这不会占用你硬盘上的空间,也不会像扩展那样影响浏览器性能。所以建议收藏着。
什么是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验证 。
代码性质检查
检查页面内没有alt属性的<img>元素,不建议使用的HTML元素,找到空元素(如<p></p>)。
和包含内联元素样式。段落的样式。这些可以点击相应的按钮以高亮发生显示。
内容和屏幕布局查看
YAML Debug可让您轻松直观的任何网页语义结构和Div布局。
此外,可以添加背景网格测试典型大小的网页。
辅助功能
这些功能可以帮助网络开发人员发现他们的网页上可访问性问题。
YAML的调试允许显示title和lang属性,突出命名锚点,特别是从同一网页的引用。
显示所有超链接
显示页面的超链接地址。
如何使用
点击即可体验,或者将链接存为书签方便进行调用。(适用于各种浏览器)
点击添加到自定义按钮,或者将下面这个按钮拖到你向要的位置。(仅适合Opera用户)
或者把下面代码加到你的菜单文件中(仅适合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:强大的在线网页调试工具》
» 本文链接地址:https://shun.im/21283
就沙发!然后忙完手头工作再慢慢看!
@zwwooooo, 我插下楼
不错,firebug和ie开发者工具也都很好用
英文的就不太好调试
@卢松松, 我完全看不懂英文的都知道怎么用了。
你每个按钮按一下就知道怎么回事 😀
@shun, 还是firebug好用
@nicidoggy, 此乃废话。。在线和离线能比么
@shun, 正想说这句。哈哈。
FF下的Firebug+web developer,完美搭配
真的很强大,晚上回去再研究
@要饭的, 对于在线的来说是很强烈
不过还不能调试Js
代码高亮看着就是舒服,其实FF,OP,Chrome都有自己的代码调试工具,OP的蜻蜓实在是用不习惯。
@LAONB, 蜻蜓还在Alpha。
还有,除非下载离线包,不然速度不爽 ❓
@shun, 我用FireBug比较习惯,很直观,能看到代码所覆盖的层。便于抄袭 🙂
试用了一下,作为在线调试工具非常强大。
收藏了,以后备用
@alswl, 主要是功能不错的情况下能保证这么迅速的载入。
firebug就足够了,此外的一律用不惯。。。
Warning: Undefined array key 1 in /www/wwwroot/ashun/shun.im/wp-content/plugins/wp-useragent/wp-useragent-detect-webbrowser-version.php on line 32
Mozilla Compatible iPhone iOS 3.1
就我这水平,找到问题也不会修改
@Louis Han, 不一定要修改才需要的
起码可以分析一下别人怎么排版、还有站内链接 😀
反正不占地方
还是firebug好用啊,现在爱不释手啊
@我想想, 我很无语。。又一个这样的。。
谁说拿这玩意跟Firebug比的。。
在线和离线,直接调用和下载安装,等等。。。本身就不能比 ❗
介绍得很详细,马上试一下~
@whisperer, 我很喜欢它的界面。。所以放了很多图 😳
路过路过~~~~~~~~ 😡
Warning: Undefined array key 1 in /www/wwwroot/ashun/shun.im/wp-content/plugins/wp-useragent/wp-useragent-detect-webbrowser-version.php on line 32
GreenBrowser Windows XP
还有在线调试的,真不错
@aisinvon, 其实就是利用js实现的效果
貌似很强大~试一下
E文盲,还是用Firebug了
岂方便一个字了得!
在用firebug,这个看起来好复杂啊
@junjun, 这个比firebug可要简单可爱多了
连我完全不懂英文的都能用上 🙂
@shun, 那国庆之后试试
@junjun, 天无法取代firebug的
只是我这种业余的玩玩,呵呵
界面看起来很不错,不知道用起来感受怎样。
@MuMu’S, 用户体验还是不错的,虽然功能还不够多
yeah!!! 狂赞一个!! 这个东西确实效果不错哦!!
搞来试试 哈哈
不合我的习惯,还是用firebug吧
我一走你就更新的这么频繁……多少个沙发就这么没了。 😥 我要争取明天能上网。
怎么还有加密码的…… 😡
不能上网的日子,看了好多集op,嘿嘿。我发现Sanji很对我胃口,哈哈。
@Vicia, Sanji有时候还是挺cool的,欣赏他的绅士风格 🙂
密码你猜吧。 😛 猜中有奖
@shun, 会做饭,对女生温柔体贴,就冲这个,我就要给他加分。^^
密码试了好多,时间不够了,等我自己有网了继续试;我就不信试不出来。
@Vicia, 如果你记得上次的密码。。
其实一点也不难
@shun, Eigentlich habe ich es derzeit schon gewusst,doch habe ich keine Zeit,dich zu antworten. Ich bin berührt und kann kurzzeitig nichts sagen.
@Vicia, 没事的。你知道了就好。
@Vicia, 同看OP,握手~~~~~~~
@小明猪, 握手。 ➡
我一般都是在firefox下把网页调试好了
然后再ie下修修改改就ok了 🙂
我入门都没得,先把基础补了先….. 😡
@derek, 那就收藏这吧,基础工具。
我也没入门,所以挺合适
我现在发现,还有好多好多事等着去做,网站有时候显得不堪一击.
@老K, ?何出此言 💡
@shun, 意思是说,网络生活应该只是我们的正常生活中很小的一个环节.
@老K, 呵呵,没错。不过我们很难离开网络了。
@shun, 需要淡化…
虽然用不上,但也得支持一下。
RSS的图片又杯具了 😆
@lovee, 这次是正常的。。我特地用了几个阅读器测试 ❗
@shun, 偶用的Safari自己的 😆
还有半夜来跟的,强啊~~~~~ ❗
@whitmine, 这里夜猫子很多啊。。
其实看头像你更像 😛
我踩,我再踩~ 8)
先留言再感谢再使用回头再来反馈。
介绍的相当详细。
工具是很不错的,不过国内载入速度稍慢,另外如果可以有中文版本就更好了。
@XJP, 我这是载入挺迅速的。 🙂
不过有中文的话是要好点
好东西~ 不过,通常我们用dreamweaver写代码的时候,就能帮助我们减少错误。好像说少了哥
@篮球博客, 并不是每个人都用可视化编辑器的 😕
以前改主题一直是在自己网站上面一遍一遍试,原来还有提供这种服务的网站
@小七, 这只是一个js
可以帮助我们找到一些简单的问题和分析css
@shun, 我根小七是一样的方式。一定试试这个。
我是来评论的!
@zwwooooo, o(︶︿︶)o test
我是打酱油的~
chrome 带的调试工具也不错
@某兔, 这个倒是没怎么了解 😕
貌似很强大,功能很强啊,有机会试一下。
@simaopig, 鼠标轻点即可尝试。。方便得很 😕
看来很有用,以后汉化和修改WP主题,估计用的上这个!!
这个可以试试 不过我也习惯用firefox的web developer和firebug了
@smigoo, 我介绍这个并不能取代上面的,它的功能相对而言还是单薄
就是即点即用那种,在线服务还是很有潜力
嗯,调试 WP 主题,相信会有实际的作用的。
不过我更多的是在本地机上使用 XAMPP 来调试 WP 主题的! 8)
@365hope, 我也是搭建了 XAMPP
哎,中文的更好了。嘿嘿
@yoja, 只有几个按钮,玩一会就知道了 😀
收了,留着备用。
看起来可以和firebug比拼一下了,不错不错
@Anything But Ordinary, 跟firebug比这到不实际
毕竟功能简单,比如说不能调试js
只是好在使用方便,随处可用,也无需FF
可以和firebug配合着用,有时候开着firebug在网页间来回切换确实不是很方便
@feicun, 确实如此,而在线的功能虽弱些,却可以为同时开几个
这样直观的分析。。对于做模块很有帮助。。
@阿东, en,很直观。。
可惜我不会做模板,就小修小补
代码我确实看不懂,只会修改个字体,唉~
@潇潇水云, 我基本上也看不懂。。所以一直不换主题。。呵呵
习惯了firebug,这个界面挺酷,有机会试试
@博译论, firebug相当受欢迎哪
这个有些特色,不过最好用的我觉得还是ie8的调试工具
@fblue, 你好多浏览器。。如此不专一 😕
@shun, 呵呵,确实我用了几个浏览器,不过opera我用了好长时间了
@fblue, 我很专注。。
不过硬盘上存着很多浏览器
IE不能抛弃,其他的用来测试blog或者没事玩下 😀
可以用notepad++的,很强大的工具,开源的。
不过我习惯dreamweaver了,adobe的。
@Jacse, notepad++我也用着
但那只是代码编辑器。。。你不能指望它来分析网页
火狐下用firebug,不过我不怎么会用。只能简单看点css
@小O, 看下css这个就差不多了。
英文的一般看不懂 😡
恩恩~ 介个貌似以前用过 很强大
@粥小卜, 好久好久没看到你了:arrow:
我用 FF 加 HTML Validator 組件, 上網時可看每個網頁的錯誤, 你這頁有182錯誤/1警告, 框架錯誤就別看了… 😥
@willin, 呵呵,我有检查过。。是很多
只要不影响使用,我对wp是不懂得。
来自德国……
试了下,很对胃口,用起来比蜻蜓舒服多了。
@Vicia, 是啊,来自德国 😀
蜻蜓其实很强大,只是我没那个需求
@shun, 我也没。 🙂
不太会网页设计,只了解皮毛
@安
围观。 🙂
恩 我要去试试 😛
店大欺客,但我们这里完全不同。