Go to comments ↓ 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

» 本文采用 BY-NC-SA 协议进行授权。
» 建议通过 Rss( Feedly | Feedburner | Feedsky )方式及时获取更新。
  1. 就沙发!然后忙完手头工作再慢慢看!

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #1
    @
  2. 英文的就不太好调试

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #2
    @
    • @卢松松, 我完全看不懂英文的都知道怎么用了。
      你每个按钮按一下就知道怎么回事 😀

      Opera 10.10 Opera 10.10 Windows XP Windows XP
    • nicidoggy

      @shun, 还是firebug好用

      Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    • @nicidoggy, 此乃废话。。在线和离线能比么

      Opera 10.10 Opera 10.10 Windows XP Windows XP
    • @shun, 正想说这句。哈哈。
      FF下的Firebug+web developer,完美搭配

      Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
  3. 真的很强大,晚上回去再研究

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #3
    @
    • @要饭的, 对于在线的来说是很强烈
      不过还不能调试Js

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  4. 代码高亮看着就是舒服,其实FF,OP,Chrome都有自己的代码调试工具,OP的蜻蜓实在是用不习惯。

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #4
    @
    • @LAONB, 蜻蜓还在Alpha。
      还有,除非下载离线包,不然速度不爽 ❓

      Opera 10.10 Opera 10.10 Windows XP Windows XP
    • @shun, 我用FireBug比较习惯,很直观,能看到代码所覆盖的层。便于抄袭 :)

      Internet Explorer 7.0 Internet Explorer 7.0 Windows XP Windows XP
  5. 试用了一下,作为在线调试工具非常强大。
    收藏了,以后备用

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #5
    @
    • @alswl, 主要是功能不错的情况下能保证这么迅速的载入。

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  6. firebug就足够了,此外的一律用不惯。。。

    Mozilla Compatible Mozilla Compatible iPhone iOS 3.1 iPhone iOS 3.1
    #6
    @
  7. 就我这水平,找到问题也不会修改

    Firefox 3.5.3 Firefox 3.5.3 Windows 7 Windows 7
    #7
    @
    • @Louis Han, 不一定要修改才需要的
      起码可以分析一下别人怎么排版、还有站内链接 😀
      反正不占地方

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  8. 还是firebug好用啊,现在爱不释手啊

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #8
    @
    • @我想想, 我很无语。。又一个这样的。。
      谁说拿这玩意跟Firebug比的。。
      在线和离线,直接调用和下载安装,等等。。。本身就不能比 ❗

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  9. 介绍得很详细,马上试一下~

    TheWorld Browser TheWorld Browser Windows XP Windows XP
    #9
    @
    • @whisperer, 我很喜欢它的界面。。所以放了很多图 😳

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  10. 路过路过~~~~~~~~ 😡

    GreenBrowser GreenBrowser Windows XP Windows XP
    #10
    @
  11. 还有在线调试的,真不错

    Firefox 3.5 Firefox 3.5 Windows XP Windows XP
    #11
    @
  12. 貌似很强大~试一下

    Internet Explorer 6.0 Internet Explorer 6.0 Windows XP Windows XP
    #12
    @
  13. E文盲,还是用Firebug了

    Firefox 3.5.3 Firefox 3.5.3 Windows 7 Windows 7
    #13
    @
  14. 岂方便一个字了得!

    Firefox 3.5.3 Firefox 3.5.3 Windows 7 Windows 7
    #14
    @
  15. 在用firebug,这个看起来好复杂啊

    Tencent Traveler 4.0 Tencent Traveler 4.0 Windows XP Windows XP
    #15
    @
    • @junjun, 这个比firebug可要简单可爱多了
      连我完全不懂英文的都能用上 :)

      Opera 10.10 Opera 10.10 Windows XP Windows XP
    • @shun, 那国庆之后试试

      Firefox 3.0.14 Firefox 3.0.14 Windows XP Windows XP
    • @junjun, 天无法取代firebug的
      只是我这种业余的玩玩,呵呵

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  16. 界面看起来很不错,不知道用起来感受怎样。

    Safari 3.2.1 Safari 3.2.1 Mac OS X 10.4.11 Mac OS X 10.4.11
    #16
    @
    • @MuMu’S, 用户体验还是不错的,虽然功能还不够多

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  17. Shadowlong

    yeah!!! 狂赞一个!! 这个东西确实效果不错哦!!
    搞来试试 哈哈

    Safari 4.0.3 Safari 4.0.3 Windows 7 Windows 7
    #17
    @
  18. 不合我的习惯,还是用firebug吧

    Google Chrome 4.0.206.0 Google Chrome 4.0.206.0 Windows 7 Windows 7
    #18
    @
  19. 我一走你就更新的这么频繁……多少个沙发就这么没了。 😥 我要争取明天能上网。
    怎么还有加密码的…… 😡
    不能上网的日子,看了好多集op,嘿嘿。我发现Sanji很对我胃口,哈哈。

    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    #19
    @
    • @Vicia, Sanji有时候还是挺cool的,欣赏他的绅士风格 :)
      密码你猜吧。 😛 猜中有奖

      Opera 10.10 Opera 10.10 Windows XP Windows XP
    • @shun, 会做饭,对女生温柔体贴,就冲这个,我就要给他加分。^^
      密码试了好多,时间不够了,等我自己有网了继续试;我就不信试不出来。 :mrgreen:

      Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    • @Vicia, 如果你记得上次的密码。。
      其实一点也不难

      Opera 10.10 Opera 10.10 Windows XP Windows XP
    • @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.

      Opera 10.10 Opera 10.10 Windows XP Windows XP
    • @Vicia, 没事的。你知道了就好。

      Opera 10.10 Opera 10.10 Windows XP Windows XP
    • 小明猪

      @Vicia, 同看OP,握手~~~~~~~

      Google Chrome 3.0.195.21 Google Chrome 3.0.195.21 Windows Vista Windows Vista
    • @小明猪, 握手。 ➡

      Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
  20. 我一般都是在firefox下把网页调试好了
    然后再ie下修修改改就ok了 :)

    Firefox 3.5.3 Firefox 3.5.3 Windows 7 Windows 7
    #20
    @
  21. 我入门都没得,先把基础补了先….. 😡

    Firefox 3.0.13 Firefox 3.0.13 Windows XP Windows XP
    #21
    @
    • @derek, 那就收藏这吧,基础工具。
      我也没入门,所以挺合适

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  22. 我现在发现,还有好多好多事等着去做,网站有时候显得不堪一击.

    Google Chrome 4.0.211.7 Google Chrome 4.0.211.7 Windows XP Windows XP
    #22
    @
  23. 虽然用不上,但也得支持一下。

    Firefox 3.5.3 Firefox 3.5.3 Windows 7 Windows 7
    #23
    @
  24. RSS的图片又杯具了 😆

    Safari 4.0.3 Safari 4.0.3 Mac OS X 10.5.8 Mac OS X 10.5.8
    #24
    @
  25. 还有半夜来跟的,强啊~~~~~ ❗

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #25
    @
    • @whitmine, 这里夜猫子很多啊。。
      其实看头像你更像 😛

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  26. 我踩,我再踩~ 8)

    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    #26
    @
  27. 先留言再感谢再使用回头再来反馈。

    Firefox 3.5.3 Firefox 3.5.3 Windows Vista Windows Vista
    #27
    @
  28. 介绍的相当详细。

    Maxthon 2.0 Maxthon 2.0 Windows XP Windows XP
    #28
    @
  29. 工具是很不错的,不过国内载入速度稍慢,另外如果可以有中文版本就更好了。

    Google Chrome 3.0.195.21 Google Chrome 3.0.195.21 Windows XP Windows XP
    #29
    @
    • @XJP, 我这是载入挺迅速的。 :)
      不过有中文的话是要好点

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  30. 好东西~ 不过,通常我们用dreamweaver写代码的时候,就能帮助我们减少错误。好像说少了哥

    Google Chrome 3.0.195.21 Google Chrome 3.0.195.21 Windows XP Windows XP
    #30
    @
    • @篮球博客, 并不是每个人都用可视化编辑器的 😕

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  31. 以前改主题一直是在自己网站上面一遍一遍试,原来还有提供这种服务的网站

    Google Chrome 4.0.211.4 Google Chrome 4.0.211.4 Windows 7 Windows 7
    #31
    @
    • @小七, 这只是一个js
      可以帮助我们找到一些简单的问题和分析css

      Opera 10.10 Opera 10.10 Windows XP Windows XP
    • @shun, 我根小七是一样的方式。一定试试这个。

      Opera 10.00 Opera 10.00 Windows XP Windows XP
  32. 我是来评论的!

    Google Chrome 3.0.195.21 Google Chrome 3.0.195.21 Windows XP Windows XP
    #32
    @
  33. 我是打酱油的~

    Firefox 3.5.3 Firefox 3.5.3 Windows Vista Windows Vista
    #33
    @
  34. chrome 带的调试工具也不错

    Unknown Unknown Unknown Unknown
    #34
    @
  35. 貌似很强大,功能很强啊,有机会试一下。

    Google Chrome 4.0.202.0 Google Chrome 4.0.202.0 GNU/Linux GNU/Linux
    #35
    @
    • @simaopig, 鼠标轻点即可尝试。。方便得很 😕

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  36. 看来很有用,以后汉化和修改WP主题,估计用的上这个!!

    Google Chrome 3.0.195.21 Google Chrome 3.0.195.21 Windows XP Windows XP
    #36
    @
  37. 这个可以试试 不过我也习惯用firefox的web developer和firebug了

    Firefox 3.5.3 Firefox 3.5.3 Windows 7 Windows 7
    #37
    @
    • @smigoo, 我介绍这个并不能取代上面的,它的功能相对而言还是单薄
      就是即点即用那种,在线服务还是很有潜力

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  38. 嗯,调试 WP 主题,相信会有实际的作用的。
    不过我更多的是在本地机上使用 XAMPP 来调试 WP 主题的! 8)

    Firefox 3.0.14 Firefox 3.0.14 Windows XP Windows XP
    #38
    @
  39. 哎,中文的更好了。嘿嘿

    Internet Explorer 6.0 Internet Explorer 6.0 Windows XP Windows XP
    #39
    @
    • @yoja, 只有几个按钮,玩一会就知道了 😀

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  40. 收了,留着备用。

    Internet Explorer 7.0 Internet Explorer 7.0 Windows Vista Windows Vista
    #40
    @
  41. Anything But Ordinary

    看起来可以和firebug比拼一下了,不错不错

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #41
    @
    • @Anything But Ordinary, 跟firebug比这到不实际
      毕竟功能简单,比如说不能调试js
      只是好在使用方便,随处可用,也无需FF

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  42. 可以和firebug配合着用,有时候开着firebug在网页间来回切换确实不是很方便

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #42
    @
    • @feicun, 确实如此,而在线的功能虽弱些,却可以为同时开几个

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  43. 这样直观的分析。。对于做模块很有帮助。。

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #43
    @
    • @阿东, en,很直观。。
      可惜我不会做模板,就小修小补

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  44. 潇潇水云

    代码我确实看不懂,只会修改个字体,唉~

    Google Chrome 3.0.195.21 Google Chrome 3.0.195.21 Windows 7 Windows 7
    #44
    @
    • @潇潇水云, 我基本上也看不懂。。所以一直不换主题。。呵呵

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  45. 习惯了firebug,这个界面挺酷,有机会试试

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #45
    @
  46. 这个有些特色,不过最好用的我觉得还是ie8的调试工具

    Tencent Traveler 4.0 Tencent Traveler 4.0 Windows Vista Windows Vista
    #46
    @
    • @fblue, 你好多浏览器。。如此不专一 😕

      Opera 10.10 Opera 10.10 Windows XP Windows XP
    • @shun, 呵呵,确实我用了几个浏览器,不过opera我用了好长时间了

      Tencent Traveler 4.0 Tencent Traveler 4.0 Windows Vista Windows Vista
    • @fblue, 我很专注。。
      不过硬盘上存着很多浏览器
      IE不能抛弃,其他的用来测试blog或者没事玩下 😀

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  47. 可以用notepad++的,很强大的工具,开源的。
    不过我习惯dreamweaver了,adobe的。

    Firefox 3.5.3 Firefox 3.5.3 Windows 7 Windows 7
    #47
    @
    • @Jacse, notepad++我也用着
      但那只是代码编辑器。。。你不能指望它来分析网页

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  48. 火狐下用firebug,不过我不怎么会用。只能简单看点css

    Firefox 3.5.2 Firefox 3.5.2 Windows XP Windows XP
    #48
    @
  49. 英文的一般看不懂 😡

    Firefox 3.5.2 Firefox 3.5.2 Windows XP Windows XP
    #49
    @
  50. 恩恩~ 介个貌似以前用过 很强大

    Maxthon 2.0 Maxthon 2.0 Windows XP Windows XP
    #50
    @
  51. 我用 FF 加 HTML Validator 組件, 上網時可看每個網頁的錯誤, 你這頁有182錯誤/1警告, 框架錯誤就別看了… 😥

    Firefox 3.5.3 Firefox 3.5.3 Windows XP Windows XP
    #51
    @
    • @willin, 呵呵,我有检查过。。是很多
      只要不影响使用,我对wp是不懂得。

      Opera 10.10 Opera 10.10 Windows XP Windows XP
  52. 来自德国……
    试了下,很对胃口,用起来比蜻蜓舒服多了。

    Opera 10.10 Opera 10.10 Windows XP Windows XP
    #52
    @
  53. 不太会网页设计,只了解皮毛

    Firefox 3.5.2 Firefox 3.5.2 Windows XP Windows XP
    #53
    @
  54. @安
    围观。 :)

    Internet Explorer 6.0 Internet Explorer 6.0 Windows XP Windows XP
    #54
    @
  55. 恩 我要去试试 😛

    Tencent Traveler 4.0 Tencent Traveler 4.0 Windows XP Windows XP
    #55
    @
  56. 店大欺客,但我们这里完全不同。

    Internet Explorer 11.0 Internet Explorer 11.0 Windows 7 Windows 7
    #56
    @
Leave a Reply

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: