`
darrenzhu
  • 浏览: 783572 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Chrome开发者工具面板介绍

阅读更多
1.网络面板 Network
另外提供一篇介绍更全面的文档:
http://net.tutsplus.com/tutorials/chrome-dev-tools-networking-and-the-console/
Sending is time spent uploading the data/request to the server. It occurs between blocking and waiting. For example, if I post back an ASPX page this would indicate the amount of time it took to upload the request (including the values of the forms and the session state) back to the ASP server.

Waiting is the time after the request has been sent, but before a response from the server has been received. Basically this is the time spent waiting for a response from the server.

Receiving is the time spent downloading the response from the server.

Blocking is the amount of time between the UI thread starting the request and the HTTP GET request getting onto the wire.

The order these occur in is:

    Blocking*
    DNS Lookup
    Connecting
    Sending
    Waiting
    Receiving

*Blocking and DNS Lookup might be swapped.

The network tab does not indicate time spent processing.

If you have long blocking times then the machine running the browser is running slowly. You can fix this by upgrading the machine (more RAM, faster processor, etc.) or by reducing its work load (turn off services you do not need, closing programs, etc.).

Long wait times indicate that your server is taking a long time to respond to requests. This either means:

    The request takes a long time to process (like if you are pulling a large amount of data from the database, large amounts of data need to be sorted, or a file has to be found on an HDD which needs to spin up).
    Your server is receiving too many requests to handle all requests in a reasonable amount of time (it might take .02 seconds to process a request, but when you have 1000 requests there will be a noticeable delay).

The two issues are related. If you can reduce the work load on the server by caching, adding new server, and reducing the work required for active pages then you should see improvements in both areas.
分享到:
评论

相关推荐

    21-Chrome开发者工具:利用网络面板做性能分析_For_vip_user_0011

    作为这模块的第篇章,我们主要聚焦的源头的源头和络数据的接收络数据的接收,这些发送和接收的数据都能体现在开发者具的络板上。不过为了你能更好地理解和掌握,我们会先对

    React-Chrome浏览器开发着工具

    React Chrome浏览器开发者工具是一款专为React应用设计的调试和性能分析扩展插件。 检查React组件结构:可以显示当前页面的React组件树,允许开发者快速查看和定位特定的组件。 查看组件属性:可以查看每个组件的...

    AEM Chrome Plug-in-0.8.0.zip

    1)LogTracer将每个请求的服务器端数据快速方便地显示到您的Chrome开发工具面板中。AEMChrome插件利用ApacheSlingLogTracer收集: a)日志(可定制的包/日志级别) b)请求进度 c)查询 2)AdaptiveForms:一套强大的...

    Bookmarks, History, Website DevTools Sidebar-crx插件

    此扩展程序将书签,历史记录,任何网站或Google搜索结果显示为Chrome开发者工具面板。 它可以停靠在右侧,形成一个真正的侧边栏。 要打开它,请右键单击网页上的任意位置,然后选择“检查元素”,或单击Ctrl-Shift-I...

    Audion-3.0.9.zip

    2.打开Chrome开发者工具。您应该能够在顶部找到“网络音频”面板。选择面板。 3.访问或重新加载使用WebAudioAPI的页面。如果在打开开发人员工具之前加载页面,则需要重新加载页面才能使扩展正常工作。 4....

    Angular state inspector-1.4.6.zip

    为Angular网络应用扩展Chrome开发者工具。 将新面板“状态”添加到元素选项卡,显示所选元素的状态。 通过调用“$state”变量在控制台中打印所选元素的状态。 根据角度版本,它可以显示: -...

    Performance面板进行性能分析调优分析文件

    谷歌开发者工具性能分析文件,博客《利用chromeDevTools的Performance面板进行性能分析调优》配套文件。帮助你更好的学习使用谷歌开发者工具。

    BigConsole-crx插件

    将面板添加到Chrome开发者工具中,以提供多行拆分控制台,例如Firefox中的控制台。 包括:-垂直拆分样式多行REPL-多亏了Ace Editor,语法高亮显示,并具有出色的编辑器功能-漂亮打印输出-“运行”按钮或CTRL + Enter...

    振幅调试「Amplitude Debug」-crx插件

    在chrome开发工具中调试振幅事件。 Chrome开发者工具面板,提供了一种简单的机制来查看发送到Amplitude的json有效负载。 * JSON语法突出显示*搜索和突出显示关键字 支持语言:English

    kendo-mvvm-inspector:用于检查剑道 mvvm 绑定的 Chrome 开发工具

    剑道-mvvm-检查员 ...当您在 chrome 上打开开发人员工具时,寻找一个名为 Kendo MVVM 的额外面板。 每当您检查一个元素时,如果该元素包含绑定对象,则该元素将显示在该面板上。 想使用剑道 访问网站

    Backbone-Debugger:Chrome开发人员工具扩展程序,用于调试Backbone.js应用程序

    产品特点在Chrome开发者工具下添加一个面板,该面板可实时显示所有应用程序视图,模型,集合和路由器。 显示的数据包括: 视图:呈现状态,html元素,关联的模型和/或集合,已处理的页面事件,触发的事件型号:上次...

    XHR JSON面板「XHR JSON Panel」-crx插件

    这个扩展添加到Chrome Dev工具,一个新的XHR JSON面板,它显示了在Ajax过程中发送/接收的最重要的数据。...在“ Chrome开发者工具”的“网络”面板中,一次只能看到一个请求的数据。 支持语言:English (UK)

    Amplitude Debug-crx插件

    语言:English 在Chrome开发人员工具中调试振幅事件 Chrome开发者工具面板,提供了一种简单的机制来查看发送到Amplitude的json有效负载。 * JSON语法突出显示*搜索和突出显示关键字

    SAML Chrome Panel-crx插件

    它作为“ Chrome开发者工具”部分中的另一个面板进行操作,该面板监视当前活动标签中的流量。 该小组正在尝试复制Firefox版本的SAML Tracer的功能,因为在编写本文时,Chrome的功能不够好(或没有)。 GitHub Repo:...

    GraphQL开发工具「GraphQL developer tools」-crx插件

    GraphQL开发的Devtools面板。 在Chrome开发者工具中添加新标签,并允许检查GraphQL查询和响应。 支持语言:English

    iOS 真机调试微信小程序

    平时开发小程序可以在开发者工具中进行调试,开发者工具提供了类似 Chrome DevTools 的调试面板,对于前端开发者来说入门门槛比较低。 小程序开发完成之后,我们需要在真机上进行测试,真机调试方面小程序开发者工具...

    React 开发工具「React Developer Tools」-crx插件

    它使您可以检查Chrome开发者工具中的React组件层次结构。 您将在Chrome DevTools中获得两个新标签:“:atom_symbol:组件”和“:atom_symbol:Profiler”。 组件选项卡显示了在页面上渲染的根React组件,以及最终渲染...

    Xpath Finder - xpath查找助手-crx插件

    在chrome开发者工具里增加一个面板,帮助你快速查找匹配XPATH表达式的元素。1. 匹配的节点会用红色边框突出显示。2. 在结果列表里可以直接inspect对应节点。3. 记录XPATH查找历史,方便查看历史。代码库: ...

    CSS-Diff:Chrome扩展程序,可轻松比较两个HTML元素CSS

    要比较元素,请激活Chrome开发者工具(F12)并打开“元素”模块右侧面板中的“ CSS Diff”选项卡(请参阅屏幕截图)。 接下来,首先检查(例如使用放大镜按钮)您要比较的元素。 选中后,CSS Diff将在“最后检查”...

Global site tag (gtag.js) - Google Analytics