Google Chrome一共提供了8大组工具：

  1. Elements: 允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果；
  2. Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；
  3. Sources: 主要用来调试js；
  4. Timeline: 提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中；
  5. Profiles: 分析web应用或者页面的执行时间以及内存使用情况；
  6. Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；
  7. Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；
  8. Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。

Tips:

　　想要查看元素：hover 等样式时 可如图选中对应状态

chrome 开发者工具详解的更多相关文章

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

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

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

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

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

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

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

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

  5. Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...

  6. 【转】Chrome开发者工具详解

    https://www.jianshu.com/p/7c8552f08e7a Chrome开发者工具详解(1)-Elements.Console.Sources面 Chrome开发者工具详解(2)-N ...

  7. Chrome开发者工具详解(1)

    Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...

  8. Chrome开发者工具详解(2)

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...

  9. 【Tools】Chrome开发者工具详解

    作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝 ...

  10. Chrome开发者工具详解(1)：Elements、Console、Sources面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

随机推荐

  1. ngrok访问外网

    1. 外网映射工具介绍 windows用户: 1,下载windows版本的客户端,解压到你喜欢的目录2,在命令行下进入到path/to/windows_386/下3,执行 ngrok -config= ...

  2. //sql过滤关键字

    //sql过滤关键字 public static bool CheckKeyWord(string sWord) { //过滤关键字 string StrKeyWord = @"select ...

  3. 【iCore3 双核心板_FPGA】实验十八：基于单口RAM的ARM+FPGA数据存取实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1i58Ssvz iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  4. 故障处理-ORA-00376/ORA-01110

    数据库实例启动之后发现,9号数据文件发生故障,file 9 cannot be read at this time, ORACLE Instance ilndb2 (pid = 16) - Error ...

  5. php吧字符串直接转换成数组处理

    $str ='123456'; echo strlen($str) - 1; echo '<br>'; echo $str{strlen($str) - 1}; echo '<br& ...

  6. Yii源码阅读笔记（二十二）

    Module类,属性的注释和构造函数的注释: <?php /** * @link http://www.yiiframework.com/ * @copyright Copyright (c) ...

  7. java发布web项目

    Java Web 项目发布流程 一.基本条件 jdk tomcat 二.操作步骤 4.生成war包:Eclipse:右键项目->Export->WAR file,如:hello.war 4 ...

  8. 小吐槽Toolbar

    最近弄界面 要吧全部图标改成PNG格式 虽说从2010以后Delphi默认支持PNG格式图片, 但是想应用到按钮上, 似乎除了TButton意外, 也只能ToolBar可以正常显示了, 其他的, 比如 ...

  9. JS 的trim()

    去除字符串左右两端的空格,在vbscript里 可  用 trim.ltrim 或 rtrim,但 js 却没有这 3个 内置方法,需 手工编写.下面的实现方法  用到 正则表达式,效率不错, 把 三 ...

  10. java中类的创建及初始化过程

    java中类的创建及初始化过程无外乎两种情况,其一为单类的创建及初始化,其二具有继承关系的父子类创建及初始化过程.     首先说简单的,单类的创建及初始化过程.在java中我们都知道绝大部分对象的创 ...