`
darrenzhu
  • 浏览: 797559 次
  • 性别: 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.
分享到:
评论

相关推荐

    Chrome 开发者工具中文手册

    Chrome开发者工具是Google Chrome浏览器内置的一套强大的网页开发和调试工具,它为前端开发者提供了丰富的功能,包括元素检查、网络监控、源代码编辑、性能分析等。这份“Chrome开发者工具中文手册”旨在帮助用户...

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

    Chrome开发者工具包括多个面板,如网络面板、Performance面板、内存面板、Elements面板、Sources面板、Console面板等。这些面板分别服务于不同的需求,例如网络面板用于分析页面加载时的网络请求,Performance面板...

    chrome开发工具指南

    以下详细解释了Chrome开发者工具指南中提及的几个核心功能知识点。 ### Elements 面板 - **HTML 结构面板**:这一部分允许开发者查看网页的DOM结构,开发者可以通过鼠标悬停和点击来定位具体的HTML元素。当鼠标...

    轻松玩转chrome开发者模式

    ### 轻松玩转Chrome开发者模式 #### 前言 ...通过以上介绍,相信您已经对Chrome开发者工具有了较为全面的了解。希望本文能够帮助您更好地利用这一强大的工具,提升前端开发效率,解决实际工作中的问题。

    Android-Stetho例用Chrome开发者工具调试Android应用

    总的来说,Stetho是Android开发中的一个实用工具,它使我们能够利用熟悉且功能强大的Chrome开发者工具来调试Android应用,极大地提高了开发效率和问题排查能力。无论是新手还是经验丰富的开发者,都应该考虑将其纳入...

    Python-通过Chrome开发者工具调试Django应用

    而Chrome开发者工具(Chrome DevTools)是前端开发者必备的利器,它可以帮助我们调试JavaScript、CSS、网络请求等。然而,很多人可能不知道,Chrome DevTools也可以与Django结合,用于调试后端应用。下面我们将深入...

    react Chrome插件开发者工具 react-devtools

    - `panel.html` 和 `main.html` 是React DevTools扩展的界面部分,分别代表了在Chrome开发者工具的不同面板显示的内容。 - `manifest.json` 是Chrome扩展程序的重要配置文件,它定义了扩展的元数据、权限和其他设置...

    vue3开发者工具vue-devtools

    Vue3 开发者工具 Vue DevTools 是前端开发者在构建基于 Vue.js 框架的应用时不可或缺的一款神器。这款工具提供了一种直观的方式来检查、调试和调整 Vue 3 项目的状态,极大地方便了开发和调试过程。Vue DevTools ...

    Vue2,Vue3的开发者工具

    `vue_dev_tools.crx`是Vue2的开发者工具扩展,而`vue3_dev_tools.crx`是专门为Vue3设计的。这两个扩展可以分别安装在支持的浏览器上,如Chrome或Firefox,以帮助开发者调试和优化Vue项目。 Vue DevTools 提供了以下...

    chrome浏览器-vue开发者工具

    Vue 开发者工具是 Chrome 浏览器的一个扩展,专门为 Vue.js 应用程序提供调试和分析功能,极大地提升了开发者的效率。 Vue 开发者工具(Vue DevTools)主要包含以下几个核心功能: 1. **组件树**:在应用运行时,...

    Vue开发者工具,Chrome插件

    Vue DevTools则作为一个配套工具,允许开发者在浏览器的开发者工具面板中实时查看Vue应用的状态,包括组件树、组件实例数据、 vuex状态管理、Vue Router路由信息等。 Chrome插件是Chrome浏览器的一种扩展程序,可以...

    vue调试代码开发者工具

    Vue.js Devtools是一款专为Vue.js开发者设计的强大工具,它作为一个Chrome浏览器扩展,允许开发者在浏览器的开发者工具中深入地检查、调试和修改Vue应用程序。这个工具极大地提升了开发和调试Vue项目的效率,使得...

    vue 开发者工具devtools(谷歌浏览器插件),包括vue2和vue3

    Vue Devtools 是一个强大的开发者工具,专为Vue应用程序而设计,可帮助开发者深入理解应用的状态和生命周期。它是作为一个谷歌浏览器的扩展程序存在,提供了对Vue组件、数据、事件、生命周期钩子等的实时查看和调试...

    Brackets-InspectEditor:在 Chrome 开发者工具中启用或禁用检查编辑器 DOM 的功能

    Chrome开发者工具是Web开发者的强大武器,它包含了丰富的调试工具,如元素面板(Elements)、源代码面板(Sources)、网络面板(Network)、性能面板(Performance)等。在元素面板中,开发者可以查看和修改页面的...

    压缩包,使用与vue2,和vue3开发者工具安装

    如果页面中包含 Vue 应用,你将在工具栏看到一个 Vue 图标,点击即可激活 Vue 开发者工具面板。 **Vue DevTools 功能** 1. **组件树**:展示当前 Vue 应用的组件结构,可以查看每个组件的状态、属性、方法等。 2....

    Android-DreamCatcher在Chrome开发人员工具中检查AndroidHTTPS流量

    在Chrome开发者工具的网络面板中,你可以看到所有的HTTP和HTTPS请求,包括请求方法、URL、状态码、响应头和响应体。这对于检查API调用、验证数据传输的正确性以及分析性能问题非常有帮助。 DreamCatcher的使用不仅...

    mastering-chrome-developer-tools:Chrome开发者工具全天研讨会的资料

    Chrome开发者工具是Web开发人员和前端工程师不可或缺的利器,它提供了强大的功能,帮助我们调试、优化和理解网页的运行机制。在"mastering-chrome-developer-tools: Chrome开发者工具全天研讨会的资料"中,我们可以...

    react-ApolloClient开发者工具的Chrome扩展和React组件

    通过安装这个扩展,开发者可以在Chrome的开发者工具面板中查看所有的GraphQL查询和突变,以及它们返回的数据。这包括实时更新、性能分析、错误追踪等功能,极大地简化了调试过程。 1. **安装与集成**: - 要安装...

    vue开发者工具.zip

    在谷歌浏览器(Chrome)中安装Vue DevTools,可以让开发者在浏览器的开发者工具中查看并操作Vue组件状态,进行实时调试。 安装Vue DevTools的步骤如下: 1. 打开谷歌浏览器:首先确保您正在使用的浏览器是Google ...

    Chrome开发工具里的Accessibility(无障碍)工具简介 -By Esri Esri北京研发中心1

    要使用Lighthouse进行无障碍审查,首先需要打开目标网页,然后在开发者工具中选择Lighthouse面板,勾选无障碍选项,根据需要选择审查的设备类型(移动或桌面),最后点击生成报告按钮。报告会列出所有发现的问题,...

Global site tag (gtag.js) - Google Analytics