设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

快译:使用WebKit的Inspector工具

2013-4-10 12:14| 发布者: joejoe0332| 查看: 7747| 评论: 0|原作者: fbm, Lax|来自: oschina

摘要:   当今移动设备这边厢风景已由WebKit独领风骚,所以,为移动设备上Web前端开发提供支持的各种工具以及基础设施都来自WebKit的Inspector。因此,我将着重讲述一下WebKit的Inspector,深入阐述它所具有的全部特性集 ...

  瀑布

  有位客官问了,为什么我老把右边那部分内容叫做瀑布呢?噢,因为它的样子看上去和瀑布很像,但更重要的是,很像瀑布的原因在于,每次网络交互所花的时间包括网络延迟和文件下载所花的时间这个两个部分,而且在文件下载时,浏览器只能够并行下载一小部分文件。如果你的瀑布看上去很宽,那么你就需要改变一下方式,缩减HTML中HTTP请求的总数了。

  还有,你可以通过点击“Timeline(时间线)”的标题栏得到一个下拉选择框来改变时间线的排序方式。特别值得关注的是按照“Latency(时延)”进行排序,就能够看到在所有请求中,建立连接所花的时间最长的是哪个请求。

  横条左侧半透明的部分显示的是时延,深色部分是文件下载所花的时间。

  网络请求的细节

  在网络面板的底部, 单击“XHR”可以只显示XMLHttpRequest所涉及的网络连接。随后再点击其中的一项,界面右侧显得的就变成了刚才点击的那个网络请求的细节性信息了。第一个标签下显示的是该网络请求过程中所发送的全部HTTP头部(header)以及响应信息。这些信息在调试服务器或者CORS的bug时非常有用。

  Preview(预览)下显示的是格式化之后的响应信息。如果你获得的是大量JSON数据, 预览标签下它们就会以可折叠方式进行显示,而在响应标签下它们只是以普通文本的方式显示的。

  Cookies显示的是网络请求过程中发送的所有cookies,时序信息(Timing)显示的是网络请求处理过程中的时间信息。时序信息在网络请求所花时间过长时同样也是很有用的。

  Scripts面板

  我是一名专职的JavaScript开发人员,也就是说,在我工作当中的大部分时间我都花在这个面板上了。这个也是最近变化最大的面板之一。 

  环顾四周,这里有两个按钮有必要说一下。 “Pretty Print”按钮(看上去象一对花括号)用来对最小化(minified)的文件内容进行恰当的排版。如果你发现在第三方最小化的代码包中发现有一个bug而且还想搞清除bug的来龙去脉时,这个按钮将会非常有用。

  另一个要说一下的是“Break on Exception”按钮(看上去象个暂停按钮)。如果它是灰色的,那么它就是处于禁用状态。单击该按钮就会让你的脚本在抛出任何异常时暂停执行。再单击一次该按钮,它就会处于 “Break on Uncaught Exception”模式,这时只有在脚本抛出的异常没有被捕获时才会暂停执行。这个按钮不可或缺,当你想要跟踪脚本抛出的异常时,它能保留住异常抛出时的调用栈以及应用当时的所有状态。

  文件导航区

  主要工作区中标签外带了一个完整的文件浏览器,以文件的来源对所有文件进行划分,这大大改善了到处胡乱文件的效率。

  要打开文件浏览器,单击左上角那个奇怪的图标(用一个带直角拐弯的线连接起来的两个文件夹)。缺省情况下,文件浏览器会“漂浮”在工作区之上, 所以,你要单击一下文件浏览器右上角那个奇怪的图标(半白半黑的矩形),将文件浏览器停靠在工作区中。你可以试着在文件浏览器中敲几个键,它就能通过模糊匹配的方式定位到其中的文件!

  既然说到在很多文件中查找想要的文件了,不得不再说一下,敲击“CMD+O”键会弹出一个TextMate风格的“Go-to-File”弹出式文件定位器,可以让你快速定位都一个文件。“CMD + Shift+ O”会弹出一个“Go-to-Symbol”弹出式符号定位器,可以让你快速地定位到当前文件中的一个符号。,“CMD + L”可以让你快速定位都某一行。

Google啊,如果你在听我说的话:在Go-to-File文件定位器中添加上文件的路径吧,因为可能会出现文件名重复的情况。


酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部