样式之美 ^重装上阵

我想没多少人敢保证写JavaScript能不用调试，那选择用什么方式调试会比较好呢？

• 告别了我最爱的alert("MM")
• 告别了我最爱的document.title="MM"
• 告别了我最爱的window.status="MM"

大家开始用各种新的方式来看调试信息。。。比如最近sitepoint就发了一篇Debugging JavaScript: Throw Away Your Alerts!，大家先去看，看完再回来接着看。

var err = new Error(); 
err.name = 'My API Input Error'; 
err.message = 'Input must be a number'; 
throw(err);

throw虽然不错，但是我们调试时可能不只能抛错，还可能抛很多奇怪的信息，比如把执行时间、返回结果打出来看，当然，你也可以写不同的err.name来区分。但是，有事没事看到报错也是很不爽的一件事。

写JavaScript的同学应该都有装Firebug，如果没装赶快装去，装完了再回来看，要是连Firefox都没有就玩Firebug Lite。

Firebug提供有了个console，你可以用：console.log(object[, object, ...])和若干console.xxx来玩，这样就可以把错误跟警告区分开了，挖哈哈。

同时，console并不是Firebug独有的，你也可以用console.log('嗷嗷又出来忽悠人了！');把信息打到Safari的错误控制台，还可以这样玩：

• console.warn('这个图标很黄');
• console.error('×的图标不好看');

Opera也有个错误控制台，可惜不能用console.log来显示东东，不过也有打印的接口： opera.postError，但它打出的的图标却不是错误的图标，它的真名应该叫postWarn，throw打出来的图标才是错误的图标，它才是真正的postError，算了，凑和着用吧。如果在Opera下做开发推荐使用Opera Dragonfly。

还有IE呢？嗯，介于我的系统没有IE，飘过。挖哈哈。

其实大家可以自己写个Console，除了可以把东东打印到浏览器的错误控制台上，还可以把信息打印到服务器上，在自己调试环境下没问题不代表在任何情况下都会没问题。

上周收到两件T-Shirt，一件是Google的Junyu送的Blogger，这件只要穿着人家就知道是Blogger滴，另一件是Taobao UED的怿飞送的他们刚出炉的不知道叫什么名滴，上次打着一些非常奇怪的职位，可以让人一眼就看出是IT民工，挖哈哈，非常感谢他们。

晚上发现这两件放一起有着特别滴意义，因为这两件我会担心穿着上班会被打，挖哈哈。

firefox不支持text-overflow一直让人很折腾。。不过还好有大虾为我们提供解决方案。。text-overflow: ellipsis for firefox

Firefox still does not implement the proposed CSS3 text-overflow property. It does however provide a similar behaviour for the XUL description element. Furthermore, it does support XBL bindings through CSS. This leads to the following solution:

.ellipsis {
  text-overflow: ellipsis;
  -moz-binding: url('ellipsis.xml#ellipsis');

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
  <binding id="ellipsis">
    <content>
      <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
    </content>
  </binding>
</bindings>

xul:description的crop原来是那样强。。除了可以点点点掉后面的。。还可以点点点前面或者中间部分的。。这个功能可是非常实用哦，不知道W3C虾米时候也给这样的CSS属性让我们简单搞定一大堆问题呢。

然后还不小心发现。hedger悄悄的也实现一样的功能Hacking text-overflow for Firefox，不过还是感觉用XBL简洁方便。。

在很久很久以前，我也在研究，能不能调用firefox处理title的点点点的东东来完成效果，不过一直没实现。之前提出的-moz-text-overflow: ellipsis;via这种不靠谱的说法也不行，看来人家是铁了心。

在做移动网页时，我们总不能每次调试时都拿自己的手机来折腾，而且拿手机来试也不方便，所以模拟器的作用就出来了。

在手持设备中，Opera Mini是一个相当不错的浏览器，今天给大家介绍的是Opera Mini 的仿真器。先看下用Opera Mini访问我blog的实际效果（需要JAVA支持），

官方提供的这个其实跟手机里的是完全一样的（可能会有字体支持的不同），你可以通过http://www.operamini.com/demo/?url=[URL] 预览任意网页，官方还提供了个bookmarks Show in Opera Mini，把它拉到收藏夹里，突然想看什么网站时就点一下（^__^可以用它来穿墙，就是屏幕太少了）。

做为开发测试用时，每次跑它网站是比较不靠谱的，这时我们可以使用本地的模拟器。

1. 下载个基于Applet的J2ME模拟器，比如MicroEmulator，Opera mini官方那个好像也是用他们的技术，
2. 下载一个真的Opera mini ，可以在http://www.operamini.com/download/pc/找到，选个新一点的手机，把jad跟jar都下下来。
3. 直接运行microemulator.jar，在菜单 file » Open JAD File … 选刚才下载的Opera mini的jad 其他的操作跟手机里是一样的。

还有个问题Opera Mini请求的页面是走Opera服务器转的，所以不能访问不在公网上的东西，不知道谁有办法处理一下。

当然，你还可以换模拟换skin，官方的skin在这里，这里还有一份有几个大size的， 当下来后通过菜单Options » Select Device… 换一下就可以。

有没有发现浏览器的地址栏里多了个奇怪的图标呢？这个东东可以解决大家满页面去找编辑按钮的问题，但同时又产生了另一个问题：浏览器不支持。=。= 如果你使用的是Firefox浏览器的话，可以装上这个插件来体验。不过我的网站是登录之后才会出现，可以到官方介绍，这里体验体验。

那它到底是什么呢？它是源于WIKI编辑滴，但是，我发现它实现原理却是可以适合任何网站，主要是在head里再加上：

<link rel="alternate" type="application/x-wiki" title="Edit" href="edit.url" />

其中的title是鼠标移上去的提示， href就是点击跳转到的地址，^_^，可以用javascript:来做坏事。不过它不像FEED那样用多条，只是第一个有效。我要是想搞个普通编辑跟高级编辑的要怎办。挖哈哈。

真希望浏览器能内置这个功能，实现技术不难，像RSS一样，但就是要看浏览器商做不做。。