| 当今移动设备这边厢风景已由WebKit独领风骚，所以，为移动设备上Web前端开发提供支持的各种工具以及基础设施都来自WebKit的Inspector。因此，我将着重讲述一下WebKit的Inspector，深入阐述它所具有的全部特性集，并说说应该在什么情况下以及如何使用WebKit的Inspector。 Google以及Chrome团队已经给出了大量关于Inspector的资料。正是由于这方面的发展变化，才使得整个一大类新的比较复杂而炫目的应用程序能够克服自身巨大的复杂性而成为现实。这当然是个好消息，但随着我不断地同越来越多的Web开发人员交谈，我逐渐发现，他们中有很多人在开发过程以及工具使用方面，并没有及时跟进这些变化，或者说，他们并没有充分利用现有的工具。为了弥补该问题，我这篇博文不仅会带领你领略Inspector的所有特性，而且还会重点介绍一些查找bug的技术以及一些我认为不可或缺的特性开发技术。写本博文就是为了要它即可看又可分享。你可以点击本文中的任何一个小标题，将指向特定技巧/技术或特性的URL分享给你的朋友们（译者注：由于翻译排版的问题，这个功能就木有了）。 写在前面 在我们开始深入探讨之前，要声明一点就是我并不认为我在开发过程以及工具使用方面的知识是绝对正确的。如果你发现其中观点有误、信息过时或者用处不大，请给我发封email告诉我你的观点，我将洗耳恭听。 如果你刚结识inspector，或者对它了解并不多，那就劳驾您边读本文边摆弄摆弄它。亲身试验是最好的学习方法！“但是宝贝啊，我可不想为了试验这些东西而不断地建一堆新文件然后载入并编辑它们！我还要喂孩子呢！”。 我听到你这么说了，而且我也赞同你的这个观点，这也正是为什么会有“data：URLScheme”的原因！ 请试验一下： 在Chrome中打开一个新标签（tab），把下列内容粘贴到地址栏并敲击回车键： data:text/html,<b>ZOMG I AM BOLD!?!!?</b> 这是在页面中弄一些HTML并查看其展示情况、试验一些新想法最简便的方法。冒号后面的所有内容都会被浏览器看作是HTML，一旦装载完成后，就可以打开Inspector进行各种试验了。
一个Inspector就够了 WebKit上现在可不止有一个Inspector。实际上任何时候你都可以使用以下所列浏览器里提供的5个Inspector：
我是按照从最旧到最新的顺序对它们进行排列的。Chrome Canary总能得到最新特性方面的更新。在最早尝鲜的人用过一段时间之后，这些新特性会逐渐并入Chromium、WebKit Nightlies以及Chrome，最后并入的是Safari。在任何时候，Safari的Inspector都落后于Chrome Canary大约一年的开发时间。也就是说，请你使用Chrome Canary进行开发吧。 设置好环境 棒极了。你已经下载并打开了Chrome Canary，启动了你的网站之后，你摩拳擦掌并挽起了袖子。 请敲击按键CMD+J打开Inspector，也可以用鼠标右键点击某一个的元素并单击“Inspect Element”菜单。 现在来设置一个舒服的环境。要做的第一件事是先熟悉一下UI。花点时间点击一下你所看到的每一个按钮，还可以在按钮上悬停一下鼠标，查看按钮的提示信息（tooltip），看看到底它们能干些什么事情。 停靠到右侧你要做的第一件事是，点击界面底端右侧的齿轮图标，调出Inspector的设置界面。先别管设置界面那极其丑陋的平视显式格式（HUD display）, 我强烈推荐选择“Dock to Right”这个选项（译者注：其实可以把Inspector拖到右侧停靠）。选择该选项后，Inspector就会停靠在窗口右侧。你要是将Inspector弹出为独立窗口，再同时打开多个Inspector，情况就会很混乱。如果停靠在底部，那么水平方向的许多空间得不到利用，反而垂直方向上能看到的内容太有限了。停靠到右侧能在双方面达到最好的效果。你所看到的应该是如下图所示的情况：  仿真触屏事件如果你正在开发的是移动应用，那么这个设置（在设置界面里）就很有必要选择了。
|
