浏览器开发者工具详解

浏览器开发者工具详解

Elements 标签

• DOM
  • Add attribute 添加属性
  • Edit attribute 修改属性
  • Edit as HTML 编辑 html
  • Delete element 删除节点
  • Copy
    • Cut element 剪切节点（仅能在内部 paste）
    • Copy element 复制节点
    • Paste element 粘贴在选中节点内部的最后位置
    • Copy outerHTML 复制节点（暂不了解区别）
    • Copy selecter 复制 CSS 选择器
    • Copy XPath 复制 XPath 选择器

      css 个 xPath 区别 点击查看
      简单来说：
      

      • Xpath 则更加强大，定位更加准确，可以匹配文本，可以寻找父级。
        例： //*[@id="select"]/div[3]/div[2]/div[1]/div[2]
      • css 选择器更加快速，但是不能选择父级（据说 css4 将增加此功能）
        例： #select > div:nth-child(3) > div:nth-child(2) > div:nth-child(1) > div.lf.select_title

  • Hide element 隐藏节点
  • Force state 添加鼠标状态
  • Break on 为 DOM 结构打断点，当其改变状态时，会顿住
  • Expand recursively 展开所有节点
  • Collapse children 收缩子节点
  • Scroll into view 使页面滚动到选中节点位置
  • Focus
• Styles 查看页面当前样式、此处可临时修改样式
  此处会同时会显示当前样式的来源 xxx.css 以及行数 line，还有当前结构的盒模型。
  点击 Show all 则会显示所有的默认样式
• Event Listeners 注册的事件 通过选择切换，可以查看当前结构绑定事件，以及父级绑定的事件,备注：悬浮可临时 remove 此事件
  • Ancestors
  • All、Passive、Blocking
  • Framework listeners
• DOM Breakpoints 所添加的 DOM 结构断点
• Properties 选中节点所有的方法与属性
• Accessibility （暂不了解）
• 查看 DOM 结构、临时修改 DOM 内容
• 查看页面 Styles、临时修改页面 Styles
• 查看 DOM 结构的 Computed(计算后的属性)
• 查找节点绑定的事件 Even Listeners

console 控制台

这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作 Javascript API 查看用。例如我想查看 console 都有哪些方法和属性，我可以直接在 console 中输入"console"并执行

• console.assert()

  判断第一个参数是否为真，false 的话抛出异常并且在控制台输出相应信息。

• console.clear()

  清空控制台。

• console.count()

  以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。

• console.countReset()

  与 console.count()配合，清除调用次数。

• console.error()

  打印一条错误信息，使用方法可以参考 string substitution。

• console.group()

  打印树状结构，配合 groupCollapsed 以及 groupEnd 方法;

• console.groupCollapsed()

  创建一个新的内联 group。使用方法和 group 相同，不同的是 groupCollapsed 打印出来的内容默认是折叠的。

• console.groupEnd()

  与 console.group()配合使用，结束当前 Tree

• console.info()

  打印以感叹号字符开始的信息，使用方法和 log 相同

• console.log()

  打印字符串，可以使用 printf 风格的占位符。支持字符（%s）、整数（%d 或%i）、浮点数（%f）和对象（%o）四种。

  例如：console.log("%d 年%d 月%d 日",2011,3,26);

• console.profile()

  可以以第一个参数为标识，开始 javascript 执行过程的数据收集。和 chrome 控制台选项开 Profiles 比较类似，具体可参考 chrome profiles

• console.profileEnd()

  配合 profile 方法，作为数据收集的结束。（暂时未发现结果）

• console.table()

  将数据打印成表格。console.table [en-US]

• console.time()

  计时器，接受一个参数作为标识。

• console.timeEnd()

  与 console.time()配合使用，接受一个参数作为标识，结束特定的计时器。

• console.trace()

  打印 stack trace.

• console.warn()

  打印一个警告信息，使用方法可以参考 string substitution。

左侧有用筛选项，可分类显示

常用的方法

方法	描述
$()	返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector()
$$()	返回与指定的CSS选择器相匹配的所有元素的数组，等同于document.querySelectorAll()
$x()	返回与指定的XPath相匹配的所有元素的数组
$_	关联上次执行的结果
$0	关联到当前我们选中的html节点，此方法最多五次记录（$0 , $1 , $2 , $3 , $4）
copy()	你可以通过全局的方法copy()在console里copy任何你能拿到的资源，包括我们在上一篇中提及的那些变量。例如 copy($_) or copy($0)

实际操作过程中发现 $()并没有按预期返回相匹配的第一个元素，而是返回了所有匹配的元素数组

Sources 源码

主要用来查看源代码以及调试 js

断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发

Network 网络

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

此面板包括5块:

• 区域① --> Controls 控制Network的外观和功能。
• 区域② --> Filters 控制Requests Table具体显示哪些内容。
• 区域③ --> Overview 显示获取到资源的时间轴信息。
• 区域④ --> Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
• 区域⑤ --> Summary 显示总的请求数、数据传输量、加载时间信息。

区域① Controls信息如下

• 网络日志录制
• 日志清理
• 捕获屏幕
• 过滤器
• 视图切换
• 保留日志开关
• Cache开关
• 网络连接开关
• 网速阀值

区域④ Requests Table 信息如下

未列出部分，可在区域④的表头部分右击点出

• Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
• Method 请求的方法类型
• Status HTTP状态码。
• Remote Address 远程地址
• Type 请求的资源MIME类型。
• Initiator 标记请求是由哪个对象或进程发起的（请求源）。
  • 鼠标移入可显示详情
• Cookie 当前请求附带的cookie数量
• Priority 优先级
• Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from disk cache)
• Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
• Waterfull 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息

区域⑤ Summary 信息如下

• DOMContentLoaded 从开始到页面上DOM完全加载并解析完毕所花费的时间（不会等待CSS、图片、子框架加载完成），在 Waterfull 以一条 浅蓝色的线 标注。
• Load 从开始到页面上所有DOM、CSS、JS、图片完全加载完毕所花费的时间，在 Waterfull 以一条 浅红色的线 标注。
• requests 成功的请求数量/总的请求数量
• transferred 所有资源的大小
• Finish 从页面开始到最后一次服务器交互完成，所花费的时间

查看具体资源的详情

通过点击某个资源的 Name可以查看该资源的详细信息，显示信息如下

• Headers 该资源的HTTP头信息。
• Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
• Response 显示HTTP的Response信息。
• Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
• Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

Performance 性能

查看页面性能的，较为复杂~~~暂不讨论

Memory 记忆

查看页面性能的，较为复杂~~~暂不讨论

Application 应用

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

Security 安全性

判断当前网页是否安全，通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。

HTTPS和HTTP的区别主要为以下四点：

• ① https协议需要到CA申请证书，一般免费证书很少，需要交费。
• ② http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
• ③ http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
• ④ http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

一、如果网页是安全的

会显示如下信息
通过点击View certificate可以查看main origin的服务器证书信息。
点击左侧可以查看指定源的连接和证书详情。

二、如果网页是不安全的

则会显示如下消息：
该面板可以区分两种类型的不安全的页面：

• 如果被请求的页面通过HTTP提供服务，那么这个主源就会被标记为不安全。
• 如果被请求的页面是通过HTTPS获取的，但这个页面接着通过HTTP继续从其他来源检索内容，那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击。

Audits 审计

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

将生成如图所示的东西

圆环为评分，分数肯定是越高越好。

• performance 性能
• progressive Web App 渐进式Web应用程序
• Best practices 最佳实践
• Accessiblity 可达性
• SEO

参考：blog.csdn.net/m0_37438418…

转载于:https://juejin.im/post/5c08b1826fb9a049a81f1d49