Leon's blog

每天活的有趣一点

正在浏览标签为 html 的文章

前端开发调试工具非常方便,Firefox下有Firebug,Google Chrome和Safari下有Web inspector。 但是手机上的浏览器调试一直还没有特别好的工具。随着iOS 6的退出,这一现象得到了很大的改变。现在可以通过桌面Safari的Web inspector直接调试,iOS 6上浏览器里的网页内容了,几乎跟调试桌面浏览器里的页面一样快,一样方便。唯一的遗憾是,似乎还只有Mac下的Safari 6支持这个功能,Windows下的Safari版本还不行。也许这也是Apple促销Mac的一个手段吧。

调试iOS 6上浏览器里的页面的具体步骤如下

  1. 在iOS 6上的Safari设置里开启Web inspector选项。并把设备通过数据线连接到Mac。

iOS 6 Safari inspector-1

  1. 打开Mac上的桌面Safari,在Develop菜单下将会出现连接了的iOS 6设备。选择这个设备下要调试的页面。

iOS 6 Safari inspector-2

  1. 在桌面Web inspector上选取Html元素,手机上将高亮显示

iOS 6 Safari inspector-3

  1. 当然除了高亮显示,其他修改、查看页面加载过程,调试Javascript等一样也不少

iOS 6 Safari inspector-4

update

整理Eclipse for php的时候,无意间看到了这工具,Zen Coding。真是快速编辑html和css的利器,有多厉害,看看这里的演示吧。访问不到的请移步土豆

作者的主要想法是,通过把编辑器变成一个简单的脚步解释环境,来提高编码的效率。我想这也是VIM这种编辑器反而比一些的IDE效率更高的主要原因。不过Zen Coding的想法更新颖,代码更少。
例如我们要输入这样一段html代码,

<div id=”header”>
    <ul class=”navigation”>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
    </ul>
</div>

以zen coding的方式,就只需要输入“div#header>ul.navigation>li*4>a”,然后按快捷键展开就好了。

心动了,来体验一下zen coding的魅力吧。这个在线的Zen Coding编辑器,是通过js,把普通的html textarea变成了不错的IDE。如何让你网站上的textarea也支持这个功能?试试这个吧。

我常用的代码编辑器是VIM和Eclispe,来看看怎么使它们支持Zen Coding吧。

首先来看看VIM

VIM下支持Zen Coding相对比较容易

  • 首先确保你的VIM版本支持python的。我使用的是Debian/squeeze下的vim-nox包,squeeze下支持python的VIM包
  • 然后下载这两个VIM插件,zencoding.vimzencoding_vim.py,拷贝到VIM的.vim/plugin目录中。
  • 再从这里,下载Zen Coding for TextMate v0.3.1.zip,把压缩包里的zencoding整个目录拷贝到.vim/plugin下。注意是目录。

OK,现在可以打开VIM试试了。进入插入模式输入“div#header>ul.navigation>li*4>a”,然后按“Ctrl+E”,看看有什么效果,呵呵。
VIM下的Zen Coding的快捷键设置如下:

插入模式下Ctrl+L :插入缩略代码
可视模式下Ctrl+L :在选中的文本前后,重复插入缩略代码
插入模式下Ctrl+E:直接在当前编辑位置,运行并插入生产的代码
插入模式下Tab:同Ctrl+E

再说说Eclipse

Eclipse下支持Zen Coding实际上是通过js做的。就像在Firefox里有Greasemonkey这样的扩展是用户可以通过js来扩充Firefox;Eclipse下也有个类似的叫Eclipse Monkey的项目。

  • 首先在Eclipse里添加这个更新站点http://download.eclipse.org/technology/dash/update,更新、安装Eclipse Monkey。
  • 然后看这个演示,就知道怎么在项目里加入zen coding的js文件,来扩展Eclipse了。

zen coding in Eclipse

Zen Coding现在是一个比较新的项目,有兴趣的可以多关心Zen Coding在Google code上的项目

参考文档:

  • http://code.google.com/p/zen-coding/issues/detail?id=16
  • http://code.google.com/p/zen-coding/wiki/AptanaHowToEn