chrome浏览器开发者工具(一)
一、Elements
在Element中主要分两块大的部分:HTML结构面板和操作dom样式、结构、时间的显示面板
二、Network
Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态,Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。
案例:
有时候我们的网页加载的很慢,而相同网速下,其他网页加载速度并不慢。这时候就得考虑优化网页,优化前我们必须知道加载速度的瓶颈在哪里,这个时候可以考虑使用Network工具
点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求, 这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息
面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。
我把Google官方网站上介绍Network面板的图贴到这里,该面板主要包括5大块窗格(Pane):
l Controls 控制Network的外观和功能。
l Filters 控制Requests Table具体显示哪些内容。
l Overview 显示获取到资源的时间轴信息。
l Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
l Summary 显示总的请求数、数据传输量、加载时间信息。
三、Timeline(和network的区别)
注意这个Timeline的标签页不是指网络请求的时间响应情况哦(这个在Network标签页里查看),这个Timeline指的JS执行时间、页面元素渲染时间
四、Resources(Application)
Resources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容,同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除
五、Profiles标签页
这个主要是做性能优化的,包括查看CPU执行时间与内存占用
六、Console标签页
就是Javascript控制台了,这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用
七、Sources面板
你可以在这个面板里面调试你的JS代码,也可以在工作区打开你的本地文件
chrome浏览器开发者工具(一)的更多相关文章
- 谷歌Chrome浏览器开发者工具的基础功能
上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要 ...
- 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,loads,dump,load方法介绍
爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,load ...
- [转]谷歌Chrome浏览器开发者工具教程—JS调试篇
来源:http://blog.csdn.net/cyyax/article/details/51242720 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工 ...
- chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存?
目录 chrome浏览器 开发者工具F12中某网站的sources下的源码如何批量保存 1. 常用保存Sources源码的两种方法 1.1单个文件 1.2 单个页面 2. 问题 3.解决方案 chro ...
- chrome浏览器开发者工具使用教程[转]
转自:http://www.cr173.com/html/16930_1.html 更多资源:https://developers.google.com/chrome-developer-tools/ ...
- [转]谷歌Chrome浏览器开发者工具教程—基础功能篇
来源:http://www.xiazaiba.com/jiaocheng/5557.html Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英 ...
- chrome浏览器 开发者工具简介
Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀. 掌握了Chrome工具可提高学习效率和开发效率. 有如下功能面板,可以使用Ctrl+[和Ctrl+] ...
- chrome浏览器开发者工具之同步修改至本地
相信好多小伙伴喜爱webpack的热加载技术,省时而又不繁琐,讨厌F5或者Ctrl+F5. 嘿嘿,现在介绍大家一个在浏览器中修改直接同步到本地代码修改的方法--- (程序员都是从0开始数数的!) 第0 ...
- chrome 浏览器 开发者工具 性能检测 参数解释
Sending is time spent uploading the data/request to the server. It occurs between blocking and waiti ...
随机推荐
- iTerm2 + Oh My Zsh 打造舒适终端体验
iTerm2 + Oh My Zsh 打造舒适终端体验 写在前面 最终效果图: 因为powerline以及homebrew均需要安装command line tool,网络条件优越的同学在执行本文下面 ...
- 修改TomCat端口实现多实例
TomCat默认的端口是8080,还会占用8005,8009和8443端口.如果已经启动了tomcat,再启动一个tomcat会发现这些端口已经被占用了,这个时候就需要修改端口号. 以apac ...
- Android开发环境包下载地址
Android SDK Android NDK Android Studio 官方下载地址 (网上转来的) 如果下载速度很慢或者无法下载,有三种解决方法 1.忍耐. 2.使用P2SP下载工具,比如 ...
- [LeetCode 题解]: Container With Most Water
Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai). ...
- python版本selenium定位方式(不止八种哦)
除了大家熟知的8种定位方式之外 1.id定位:find_element_by_id(self, id_)2.name定位:find_element_by_name(self, name)3.class ...
- 「HNOI 2014」米特运输
题目链接 戳我 \(Describe\) 谁出的题目啊?这么长的题面,看完就滚粗了.强烈谴责 给一棵树,每个点有一个权值,要求修改一些权值,使: 一个点的权值必须是其所有儿子的权值之和 一个点的儿子权 ...
- sql指定值排在前面
示例: SELECT COL1 FROM TABLE1 ORDER BY CASE WHEN COL1 = 'A' THEN 1 ELSE 2 END,COL1;//COL1为A的排在最前面,剩下的按 ...
- jquery源码解析:jQuery工具方法when详解
我们先来看when方法是如何使用的: var cb = $.when(); //when方法也是返回一个延迟对象,源码是return deferred.promise();返回的延迟对象不能修改状 ...
- 【spring】SpringBoot之Servlet、Filter、Listener配置
转载自 http://blog.csdn.net/king_is_everyone/article/details/53116744 1.介绍 通过之前的文章来看,SpringBoot涵盖了很多配置, ...
- docker部署sftp
一. 按照我博客中搭建sftp的方法做一个docker镜像 这种方法可用,但不是最好的,待改进.可参照另一篇博客:设置多用户不同权限的sftp服务器搭建 1. dockerfile文件如下,当前目录假 ...