最前端

我的工作,我的生活,点点滴滴...

标签 ‘ web developer

一款媲美Firebug的Web前端插件


web developer

大家或许不知道有一款和Firebug相媲美的web前端插件—- Web Developer Toolbar,这也是我用的第一个firefox插件,它有很多实用的甚至连Firebug也无法媲美的功能。

以下是十个你可能从未了解过的关于Web Developer Toolbar的强大功能:

  • 1. 辅助线功能——Display Line Guides(Miscellaneous)

    当然,你正在使用 背景网格来设计你的网站。但是,万一你需要去快速地核查在页面上(或者是图形上)一些元素的平面图时,这个非常方便的功能可以让你任意添加许多个人的水平和垂直的指导。

  • 2. 浏览图象信息——View Image Information(Images)

    在Images菜单中,有许多与图片有关的功能。然而,我喜欢“浏览图象信息(View Image Information)选项,以很快的方式去看看一张页面上所有的图片,包括了背景图片,所有的东西都列在一个新的标签上,连同路径、尺寸、以及文件大小。

  • 3. 浏览色彩信息——View Color Information(Miscellaneous)

    我已经数不清有多少次,我需要去查看关于一个页面元素的色彩信息。Colorzilla是我通常所使用的工具,但是,如果要为一个标题找到正确的配色,有时候可能会非常棘手。
    而利用Web Developer Toolbar这一功能就会非常的简单,并且在一个新的标签中,列出了完整的CSS配色(带有样本)。

  • 4. 显示元素信息——Display Element Information(Informaition)

    你是否仍旧突出显示一个页面的元素,然后从文章背景菜单中选择“浏览选择来源(View Selection Source)”,去找出它是如何编码的?
    然后停止,用Ctrl+Shift+F来代替。点击一个元素去看看它的信息(分类/编号、位置、尺寸、等等)。你也可以看到那个元素的来龙去脉,如果你需要为你所采用的风格添加一些额外的特别环节,那真的是非常有用!

  • 5. 浏览页面信息——View Page Information(Information)

    点击这个选项,在标签弹出框窗口中,获取关于你的页面的多种信息。在这里,你可以看到关于你页面的各种信息,以及形式的详细资料、链接信息和详细的图片信息(包括文件大小、尺寸和预览)。
    并且,在Web Developer Toolbar的右边,单击绿色的符号,便可获取此功能。

  • 6. 显示密码——Show Passwords(Forms)

    窗体菜单对任何一个人来说,都是非常有用的一个工具。但是“显示密码(Show Passwords)”选项,可能是一个你从来不知道其存在的功能。

    大部分我都保存到了Firefox的密码管理中,如果我一直都需要去知道这个究竟是什么,只需要点击它,就可以得到这个信息。

  • 7. 嵌入式形式领域——Populate Form Fields(Forms)

    说起窗体,当需要去测试时,这个功能是非常有用的。如果你确实需要收到这样的形式,你可以通过选项菜单(Options)改变默认邮件地址。

  • 8. 屏幕表现——Small Screen Rendering(Miscellaneous)

    想知道你的网站在移动设备上是如何表现出来的?这个选项给了你一个大概的印象,它至少向你展示了你的工具条是否显示在你的主要内容之上。

  • 9. 标出所有未被访问过的链接——Mark All Links Unvisited(Miscellaneous > Visited Links)

    这对某些前提来说,是非常有用的功能。假定你想对你的所有链接在他们的自然状态下做一个屏幕截图,只需快速点击原始页面。当你在运行一个可用性的测试时,它也同样有用,并且,你需要为下一项任务重新安排你的页面。

  • 10. 浏览速度报告——View Speed Report(Tools)

    出于某些原因,你应该点击页面,并且从文章背景菜单中去获得“Tools”子菜单,从而获取“Web Developer”选项。这个功能驱动了Web Site Optimization的 Web Page Analyzer
    这个服务告诉你,在不同连接速度时,如何快速加载你的网页,并且同时提供其他相关页面有价值的信息,包括基于其分析的介绍去加快你的网站的速度(提示:让你的图片更小一点,并且不要使用那么多HTML代码、CSS、以及scripts等等)

附加:编辑HTML(Miscellaneous)
相信我们都知道Web Developer Toolbar所提供的关于CSS可怕的编辑功能。但是你知道吗,你可以用同样的方式来编写HTML代码。
为了网站的发展而利用这一功能,对于打磨网站内容来说,它真的是非常的方便。例如:当你在一个特定的空间里,试着去编辑标题或者一些内容时,它就显得非常的方便。
在Web Developer Toolbar中,这是我最喜欢的功能,尽管它鲜为人知。它还有很多我不没用过,或者不知道怎么用的功能(比如:Enable Auto Completion、Show Window Chrome、Display Object Information),大家好好研究!