Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。

Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。

Sources:断点调试JS。

Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。

Timeline:记录并分析在网站的生命周期内所发生的各类事件,以此可以提高网页的运行时间的性能。

Application:记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。

Security:判断当前网页是否安全。

Audits:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

chrome开发者工具那点事的更多相关文章

  1. Chrome开发者工具不完全指南:(三、性能篇)

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  2. Chrome开发者工具不完全指南(六、插件篇)

    本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...

  3. Chrome开发者工具使用指南

    前言 工欲善其事,必先利其器. 在前端工作中,我们常常使用到Chrome开发者工具去做各种各样的事情. 但是您真的了解这些开发者工具吗? 官方文档还是挺详细的:chrome-devtools文档. 但 ...

  4. Chrome开发者工具不完全指南(四、性能进阶篇)

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  5. Chrome开发者工具不完全指南(五、移动篇)

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

  6. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  7. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  8. Chrome开发者工具详解(3)-Timeline面板

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

  9. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

随机推荐

  1. Shell脚本编写2------有关变量

    shell脚本中变量定义方式十分简单,直接将值赋值给变量较好例如 :name="tuanzhang"注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编程语言都不一样.变量命名 ...

  2. 结束回调事件(开头必须cp开头,JSProperties传参)

    <dx:ASPxComboBox ID="comBrand" CssClass="case" ClientInstanceName="comBr ...

  3. Jprofiler注册码

    L-Larry_Lau@163.com#23874-hrwpdp1sh1wrn#0620 L-Larry_Lau@163.com#36573-fdkscp15axjj6#25257 L-Larry_L ...

  4. fzu 2155 盟国

    Problem 2155 盟国 Accept: 39    Submit: 129Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem De ...

  5. python可变对象与不可变对象

    可变/不可变对象定义 不可变对象 该对象所指向的内存中的值不能被改变.当改变某个变量时候,由于其所指的值不能被改变,相当于把原来的值复制一份后再改变,这会开辟一个新的地址,变量再指向这个新的地址. 可 ...

  6. js-权威指南学习笔记10

    第十章 正则表达式的模式匹配 1.正则表达式是一个描述字符模式的对象. 2.可以使用RegExp()构造函数来创建RegExp对象,不过RegExp对象更多是通过一种特殊的直接量语法来创建. 3.程序 ...

  7. 关于CSS的知识

    这两天在学习关于HTML的知识,今天学习到CSS的知识,将自己所收获的知识点归纳一下: 首先, CSS声明学习:                 1.在head标签中使用style标签声明:      ...

  8. 【代码笔记】iOS-iOS的目录

    一.iOS中的沙盒机制 · iOS应用程序只能对自己创建的文件系统读取文件,这个独立.封闭.安全的空间,叫做沙盒.它一般存放着程序包文件(可执行文件).图片.音频.视频.plist文件.sqlite数 ...

  9. java多线程3种方式

    Java多线程实现方式主要有三种:继承Thread类.实现Runnable接口.使用ExecutorService.Callable.Future实现有返回结果的多线程.其中前两种方式线程执行完后都没 ...

  10. 查看组成一个Index的column有哪些

    下面是创建一个表,并在上面建立一些index的SQL.我们会新建一个用户,然后再那个schema下运行下面的SQL. create table indtest (f1_num number(10)  ...