浏览器开发者工具详解

浏览器开发者工具详解

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协议安全。

1、若是网页是安全的

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

2、若是网页是不安全的

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

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

Audits 审计

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

将生成如图所示的东西

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

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

参考：blog.csdn.net/m0_37438418…