打开Developer Tools的方法:

  a. 点击F12
  b. 在浏览器中选择Tools-->F12 Develooper Tools

打开后图示:

从上图我们可以看到,Developer Tools有八个独立的选项卡:

DOM资源管理器(DOM Explorer): 显示了在浏览器中渲染网页时的结构,并使在活动页中编辑HTML和样式的操作成为可能。不必编辑或重新加载资源,即可执行操作,以便你可以快速解决显示问题或试用新思路。

控制台(Console): 提供了与运行代码交互、使用控制台命令行发送信息和使用控制台调试API获取信息的方式。

调试器(Debugger):检查代码的作用、代码执行时间及其执行方式。在执行过程中暂停代码,逐行操作代码,然后查看每个步骤中变量和对象的状态。

网络(Network): 提供了涉及加载和网页操作的任何网络请求的详细信息。

UI响应能力(UI Responsiveness): 在页面减慢时帮助我们寻找问题症结,可以使用它分析速度缓慢的特定点,也可以显示导致这些问题的操作。

探查器(Profiler):JavaScript速度的单纯计量工具,显示了在分析会话过程中调用的函数、调用次数以及完成所需的时间。

内存(Memory): 如果某个网页开始很快,但使用一会儿后就变慢,主要原因通常是内存泄漏,该工具跟踪网页的内存使用情况,帮助你标识何处的内存使用处于增长趋势,增长原因以及如何修复它。

模拟(Emulation): 帮助你测试你的网页在不同的屏幕大小和硬件功能上的运行方式,以及它们如何响应不同的用户代理字符串。

接下来的文章将详细介绍这八个工具。

IE11之F12 Developer Tools--概述篇的更多相关文章

  1. IE11之F12 Developer Tools--控制台工具(Console)

    前面我们介绍了IE11的Developer Tools中的第一个工具--DOM Explorer,这篇文章介绍第二个工具--控制台(Console),使用控制台工具查看错误和其他信息.发送调试输出.检 ...

  2. IE11之F12 Developer Tools--调试器(Debugger)

    使用调试器工具在代码运行时对其导航.设置监视点和断点,查看调用堆栈,以及提高编译/精简JavaScript的可读性. 调试器可以帮助你了解为何你的代码片段会出现未按照预期方式运行.未在预期时间运行及在 ...

  3. IE11之F12 Developer Tools--DOM Explorer

    使用DOM Explorer工具查看网页的DOM状态.检查HTML结构和CSS样式,并测试更改以解决显示问题.这可以在元素位置错误或行为异常时帮助你诊断问题,然后解决问题. DOM Explorer图 ...

  4. React Developer Tools 安装小提示

    1,在google市场里边,安装React Developer Tools之后,发现是开启的,但是按下F12后,并没有发现react选项 2,后来通过查资料,发现必须是运行react项目的时候,才出现 ...

  5. 关闭chrome浏览器的developer tools

    背景 Chrome使用过程中,很容易启动Chrome developer tools,一些误触如按到F12.CTRL+Shift+C等都会启动developer tools.对于不开发Web的人来说, ...

  6. Chrome的开发者工具(Chrome Developer Tools)

    Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...

  7. Chrome调试工具Developer Tools——前端必备神器

    本文链接:https://blog.csdn.net/u012542647/article/details/79401485 今天要给大家介绍一个神器,就是谷歌浏览器(Chorme)自带的前端调试工具 ...

  8. Spring Developer Tools 源码分析:三、重启自动配置'

    接上文 Spring Developer Tools 源码分析:二.类路径监控,接下来看看前面提到的这些类是如何配置,如何启动的. spring-boot-devtools 使用了 Spring Bo ...

  9. 你不知道的React Developer Tools,20 分钟带你掌握 9 个 React 组件调试技巧

    壹 ❀ 引 React Developer Tools 是 React 官方推出的开发者插件,可以毫不夸张的说,它在我们日常组件开发中,对于组件属性以及文件定位,props 排查等等场景都扮演者至关重 ...

随机推荐

  1. MDT 2010驱动管理新方法。

    参考:https://4sysops.com/archives/driver-deployment-with-microsoft-deployment-toolkit-mdt-part-1-os-de ...

  2. 奇怪吸引子---Russler

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  3. jackson json转实体 允许特殊字符和转义字符 单引号

    //允许出现特殊字符和转义符 mapper.configure(Feature.ALLOW_UNQUOTED_CONTROL_CHARS, true) ; //允许出现单引号 mapper.confi ...

  4. Codeforces Beta Round #62 题解【ABCD】

    Codeforces Beta Round #62 A Irrational problem 题意 f(x) = x mod p1 mod p2 mod p3 mod p4 问你[a,b]中有多少个数 ...

  5. O2O地图应用之判断用户订单地址是否在服务范围内

    O2O地图应用之判断用户订单地址是否在服务范围内 需求分析 在o2o项目中,经常要用到在用户下单时判断用户所填地址的坐标点是否在服务范围内的情况,这里参考网上的实现方式,用C#来实现,经测试后有效,特 ...

  6. 文件系统管理 之 实例解说 fdisk 使用方法

    一.fdisk 的介绍: fdisk - Partition table manipulator for Linux ,译成中文的意思是磁盘分区表操作工具:本人译的不太好,也没有看中文文档:其实就是分 ...

  7. Myeclipse设置JAVA选中高亮显示

    1.打开显示功能 选择Windows->Preferences->Java-> Editor-> Mark Occurrences ,勾选选项.这时,当你单击一个元素的时候,代 ...

  8. 【Cocos2d-Js基础教学(4)cocostudio在cocos2dx-Js中的使用】

    首先我们打开官方网站www.cocos2d-x.org,下载我们安装最新的cocostudio(cocos). 简介: Cocos Studio升级为cocos.更优秀的产品.更优质的服务.游戏开发一 ...

  9. Embeding Python & Extending Python with FFPython

    Introduction ffpython is a C++ lib, which is to simplify tasks that embed Python and extend Python. ...

  10. 批量Ping IP

    刚刚接触Python 想做点什么 听说Python 在网络方便很厉害 后来总结如下: 第一:发现公司都固定IP 每次新来同事都要猜一个没有人用的IP  很费劲 第二:我们公司有的IP可以上QQ 有的不 ...