Chrome开发者工具功能详解_chrome开发者工具 性能

Chrome开发者工具

• 官网：https://developer.chrome.com/

简介

• Chrome 开发者工具 (Chrome DevTools) 是一套内置于 Google Chrome 中的 Web 开发和调试工具，可用来对网站进行迭代、调试和分析。

• Chrome DevTools 是辅助开发者进行 Web 开发的重要调试工具，DevTools 是 Chromium 的一部分，可以作为独立项目被 Electron 等容器集成。DevTools 主要分为四部分

  • Frontend：调试器前端，默认由 Chromium 内核层集成
  • Backend：调试器后端，Chromium、V8 或 Node.js
  • Protocol：调试协议
  • Message Channels：消息通道，包括：Embedder Channel、WebSocket Channel、Chrome Extensions Channel、USB/ADB Channel

主要功能

• 除了这些主要的面板，还有几个功能
  • 设备切换：使用设备模式可以模拟移动设备视口、限制网络流量、限制 CPU 占用率、模拟地理定位、设置屏幕方向
  • 元素检查：定位到元素，显示其css表达式及样式
  • 设置：通过?打开

快捷键 shortcut

个人觉得最重要的是

命令行 command line

• ctrl+shift+p 快捷打开

• 出现run >才可以输入命令

• 如果是删除了>就会出现open，那可以手工补>

• 所有命令都可以认为是替代操作的方式而已，换言之就是所有的操作都可以用命令来替代

• 很多show命令用了之后就会对应出现一个hide的命令

• 很多命令都很长，只需输入关键字即可

常用命令

• 截图

  • capture area screenshot：区域截图
  • capture full size screenshot：长截图
  • capture node screenshot：节点截图
  • capture screenshot：当前页截图

• 工具打开视图：当你在某个视图的时候对应命令无法显示

  • dock to bottom
  • dock to left
  • dock to right
  • undock into separate window

Panel

Drawer

Appearance

• 关注中英文切换即可
• 中文下输入english
• 英文下输入中文即可

console控制台

debugger调试程序

elements

global

grid

help

mobile

navigation

network

performance

resources

持久性

rendering渲染

screenshot

sensors

settings

sources来源

切换设备

• 切换设备
• 实时响应
• 分辨率调整
• 限速
• 旋转设备

元素面板 element

• 探针

控制台面板console

菜单栏

• 点击菜单栏的按钮
  ，或者ctrl+l可以清空console界面显示的内容（但你仍然可以找到历史记录）

  • 还可以执行clear()、console.clear()来清空

• 可以发现当前页有哪些frame
  

• 
  创建一个实时的表达式

• 
  ，过滤日志用

• 显示的日志级别

调试js

• 支持任何js代码，回车执行，tab自动补齐，通过↑↓箭头来翻阅历史命令

console.log()

• console还支持error，warn，

inspect

• 在 Console 中输入 inspect() 参数是 DOM 元素或者 JS 引用，可以跳转到 Elements 面板并且定位到你选择的那个 DOM 节点那。

dir

• 得到对象的所有方法（及值）
• 如dir(document)
• 如dir(window)

document

• document.designMode = ‘on’ 或者document.body.contentEditable=“true” 可以让你实时的编辑网页

特殊符号

• $(selector)：document.querySelector()的简写
  • 实测：论坛输入KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲ls_username')无法…$()跟css selecotr的语法是符合的
• $$(selectors)：document.querySelectorAll()的简写
• $x(xpath-expression)：通过 XPath 的方式查看元素
• $0是最近一次访问的DOM或堆对象
  • 先在elements面板中定位一个元素
  • 再到console中输入$0就能得到这个对象
• $_是你上个表达式的结果
  • 先输入2+2得到4
  • $_就是4

网络面板 network

过滤

• -表达式，意思是去除，比如-png就是不显示png文件
• 如果要去掉多种，就加空格，-png -gif
• 常见的表达式（可以通过-来得到），支持自动补齐
  • domain:仅显示来自指定域的资源。您可以使用通配符字符（*）纳入多个域
  • has-response-header：显示包含指定HTTP响应标头的资源
  • response-header-set-cookie：
  • is：
    • 如 is:running 可以查找 WebSocket 资源
    • 如is:from-cache 可查找缓存读出的资源
  • Larget-than：显示大于指定大小的资源（以字节为单位）。将值设为1000等同于设置为1k
  • method：显示通过指定 HTTP 方法类型检索的资源
    • 如method:GET
  • mime-type：显示指定 MIME 类型的资源
  • mixed-content：
    • 显示所有混合内容资源（mixed-content:all）,
    • 显示当前显示的资源（mixed-content:displayed）
  • scheme：
    • 显示通过未保护HTTP（scheme:http）
    • 受保护 HTTPS（scheme:https）检索的资源。
  • set-cookie-domain：显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。
  • set-cookie-name：显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。
  • set-cookie-value：显示具有 Set-Cookie 标头并且值与指定值匹配的资源。
  • resource-type：
  • cookie-domain：
  • cookie-name：
  • cooKie-path：
  • cookie-value：
  • status-code：仅显示 HTTP 状态代码与指定代码匹配的资源
  • url：

附录1：名词解释

• 同源

  https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
  浏览器安全的基石是"同源政策"（same-origin policy）
  同源是指：
      协议相同
      域名相同
      端口相同
  示例:
      http://www.example.com/dir2/other.html：同源
      http://example.com/dir/other.html：不同源（域名不同）
      http://v2.www.example.com/dir/other.html：不同源（域名不同）
      http://www.example.com:81/dir/other.html：不同源（端口不同）
  限制范围:
      （1） Cookie、LocalStorage 和 IndexDB 无法读取。
      （2） DOM 无法获得。
      （3） AJAX 请求不能发送
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

附录2：快捷键

常规

所有面板

Elements面板

右键点击元素你可以：

• 更改元素状态(:active, :hover, :focus, :visited)；
• 元素上设置断点(更改子元素、更改属性及删除节点)；
• 清空控制台

样式侧边栏(Style Sidebar)

模仿元素伪状态(:active, :hover, :focus, :visited)

添加新的样式选择器

Sources 面板

Don’t pause on exceptions

Pause on All exceptions (including those caught within try/catch blocks)

Pause on uncaught exceptions (usually the one you want)

代码编辑快捷键

TimeLine 面板

Profiles 面板

Console 控制台

右键点击控制台：

• XMLHttpRequest记录：打开查看XHR的日志
• 导航处切换保存日志
• 过滤：隐藏与显示脚本文件的信息
• 清空控制台：清空控制台所有信息

Screencasting

Emulation

其他Chrome快捷方式

下面是一些浏览器中非常有用的额外的快捷方式(附：所有Windows/Linux/Mac快捷方式)