1. Elements + Console + Debugger

DOM

PC+移动，q=刘德华

增删改查

查看.导航
- 展开收起：鼠标点击、箭头操作
- 左侧... ~ 点击右键：递归展开收起。eg.body
- 面包屑导航：位于底部，亦可点击
查看.选中
- Inspect Element 模式，启用箭头-吸元素
- 页面，右键，Inspect
- 脚本吸
  - inspect(document.body)
  - inspect(document.getElementById('side'))
查看.滚动到视图
- 当选中某个元素，但它在视口之外时
- 提示元素位置：下方，上方
  - iscroll 也可以，eg. 电影-左右滑动、再回到头部
  - eg.移动端，模拟 touch。用它挺方便
查看.复制一段 HTML
- 右键，Edit as HTML，复制
- 右键，Copy - Copy Element
- 脚本选 copy($0)
改.标签、属性名+值
- 点击
  - 双击：节点名称、属性。eg.顶部导航
  - 按 Enter 选中第一个，再 Tab 依次切换
- 菜单：右键/左侧...
  - Add Attribute, Edit Attribute
- Edit as HTML
  - 保存：Enter
  - 不保存，退出编辑器：Esc
改.移动元素
- 点击，拖拽。eg.导航
改.删除元素
- 删除，选中节点
  - 直接 Delete 键
  - 右键：delete Node
- 快速不可见：右键，hide
选择器：右键
- Copy Selector
- Copy XPath

CSS

移动.q=刘德华，百科.作品."无间道"

Styles 窗格

选择器的优先级
- 内联样式 / 在 DevTools 里设置
- 与元素匹配的所有 CSS 规则
- 继承的：分块
  - 删除线，被继承覆盖的
  - “重复”的选择器：继承的每层
  - 灰色的，不可继承的
点击右侧，可查看来源
- 跳至 Sources 面板，{}
  - 初始 HTML 内联
  - 外链 CSS
- <style>跳至 DOM
  - 通过 JS 插入到页面里的
  - 性能优化，可清空缓存
- user agent stylesheet
  - 层叠
鼠标 hover 在选择器上，可查看受影响的所有元素
- 仅突出显示视口中的元素

Computed 窗格

亮色的：用户设置的，包括继承的
- 点开可看到，被谁覆盖了 eg.color
暗色的：默认值
方便垂直查看，特定属性
- 可搜索
- 默认值

Styles + Computed -> CSS 的 Cascading 和 Inherit

Cascade：级联 -> CSS 声明的权重 -> 优先级

Inherit

增删改查

改.computed 盒模型
- 盒模型
- 定位的，eg.音乐播放图标
改.当属性值是数字时, 增减量
- 1 向上/下键
- 0.1 Alt+向上/下键
- 10 Shift+向上/下键
- 100 Shift+Function+向上/下键
  - Shift+向上/下键，Windows,Linux
属性:值
- 增.任意空白，点击
  - 可键入
  - 也可直接粘贴 CSS
- 增.hover，右侧**...**
  - color picker 的
- 删.取消复选框
- 改
- 查.Computed
选择器:声明块
- 点击“加号”
  - 选择器，hover，右侧
  - 顶部，右侧
类.cls
- 复选框。特别方便的添加、启用和停用
- eg.PC-宽窄屏，新闻热词
:hov
- 也可以 DOM 区，右键菜单
- 注：伪类和伪元素的区别, : ::

本地修改

CSS.外链，修改的
- 在 Styles 窗格，即时修改
- 在 Sources 面板，实时修改。从来源点过去
查看.实时编辑的历史：点击右键，选择 Local modifications
- 粉色背景，移除的
- 绿色背景，添加的
撤销本地修改
- 若临时的，重刷页面，即可
- 若永久的
  - Elements 面板下：cmd+z
  - Sources 面板下：cmd+z 或文件名旁的 revert（与本地绑定时）

使用 DevTools 的工作区设置持久化

Sources 面板：

左侧菜单
- 顶级是 HTML frame。top 代表 main document frame
- 第2级是 origin
- 第3+级是 directory 和 resources
更改
- CSS 的更改，立即生效
- JS 更改，要生效，需按 cmd+S。重新触发，执行下
- 刷新就都没了，除非用了工作区映射到本地

Debugger

console 输出

var name = 'anjia'
console.log('名字 ' + name)
console.log('名字', name)
console.log('名字 %s', name)

格式说明符：

%s 字符串
%d/%i 整型
%f 浮点值
%O 可扩展 JavaScript 对象
%c CSS 格式说明符

DOM 元素 -> JS 对象的格式：

console.log(document.body)

console.log('%O', document.body)
console.dir(document.body)

不同类型：

console.log('我是一条日志.log')
console.info('我是一条日志.info')
console.warn('我是一条日志.warn')
console.error('我是一条日志.error')

有用的：

console.group() 和 console.groupEnd()
console.groupCollapsed() 和 console.groupEnd()
console.time('[name]') 和 console.timeEnd('[name]')

示例可查看：devtools/console.html

更多可查看：

设置断点

源码，debugger
Sources 面板，找到资源，源码-行号：添加断点
- 效果等同于，在代码里 debugger

如果不清楚详细逻辑

场景：接手代码/学习库
- 可以不需要知道源码详情
- 单步调试，再设断点
方法：取决于调试对象，Sources 面板
- XHR/fetch eg.翻译按钮
  - 网络相关
  - 找到相关代码，再加断点
  - 也可定位到，文件位置
- Event Listener
  - 纯点击，eg.语言交换、复制、翻译
- DOM
  - 子树修改，eg.换一换
    - child 被 removed/added 时
    - child 的 contents 被 changed 时
    - 注意：child 的 attribute changes / 当前选中节点的 changes 都不会触发
  - 属性修改，eg.PC-宽度
    - attribute 被 added/removed 时
    - attribute 的 value 有 changes 时
  - 被移除，eg.().remove()
    - 当前选中节点，被 removed 时

debug(functionName)，在控制台输入，当指定函数被调用时调试时的辅助手段，因为需保证functionName在作用域内

修复错误时，可直接先在 Source 里修改验证下，cmd+s -> 会修补到 Chrome 的 JS 引擎里

Jan 05 '19 15:01 anjia

3. Console 的补充

日常使用：

过滤控制台的输出
- 严重性等级
- Filter
清除
- 右键
- clear() 控制台输入
- console.clear() 代码里执行
- Ctrl+L
执行上下文
- top 页面的顶部框架
- iframe 的 name
设置项：齿轮、Preferences/Console
- Preserve log
- Log XMLHttpRequests
- Hide network

更精细化控制台：

输出表格 table()
设置控制台样式 %c
inspect()
- DOM 元素 -> Elements 面板
- JS 对象 -> Profiles 面板
- 函数 -> Source 面板

快捷方式：

上下箭头
$_ 最近一次的表达式的值
$0 $1 $2 $3 $4 最近几次的 DOM 元素 / JS 对象。$0最近的
$() ~ document.querySelector()
- 右键，Reveal in Elements Panel
- 右键，Scroll into view
- 第二个参数 startNode，默认是 document
- 注意：当页面有 jQuery 时，则以库为主
$$()~ document.querySelectorAll()
- 第二个参数 startNode，默认是 document
$x(path) 支持 XPath，返回 DOM 数组
- xpath, 右键 Copy XPath

其它：

保存日志，右键，Save as

Jan 09 '19 15:01 anjia

4. DevTools 的相关

cmd+option+I / control+shift+I 打开上次开的面板
面板，可拖动排序
命令菜单 cmd+shift+p / ctrl+shift+p
- 支持模糊搜索
- > capture
- > render
  - print / screen
Filter，无处不在
Learn More，贴心的
- Performance
- Network / Table / Timing
- Audits：本身+结果
- What's New 里
开启实验功能：chrome://flags/#enable-devtools-experiments
- 更改后，需重启
- chrome://chrome-urls

Jan 09 '19 15:01 anjia

5. Network 面板的使用

最常用的：

设置
- 禁用缓存，模拟用户首次查看页面
- 保留log，跨页面加载保存请求
- 节流，选不同的网络环境
过滤：Web 资源的种类

请求表格：

表头.自定义
- Type：请求资源的 MIME type
- Initiator
- Size：response headers + response body
  - size 传输时的大小（服务器会对资源进行压缩处理-Size）
  - content 是资源的实际大小（客户端会解压-Content）
- Waterfall：相信的请求活动，hover 可放大
详情
- Headers 页签
  - Response
    - Access-Control-*
    - Content-Type
  - Request
    - Cookie Host Origin Referer User-Agent
  - 参数
    - GET
    - POST Content-Type + 数据编码，详见 POST 提交数据
- Preview
- Cookies
- Frames：WebSocket Connection
  - 三列数据
    - Data
      - 若是 plain text，则会直接显示文本
      - 若是 binary opcodes, 则会显示 opcode 的 name 和 code
      - 支持这五种 opcodes（操作码）
        
        Continuation Frame
        
        Binary Frame
        
        Connection Close Frame
        
        Ping Frame
        
        Pong Frame.
    - Length
    - Time：received/sent 的 time
  - 不同消息.不同颜色
    - light-green：发送的
    - white：推送的
    - light-yellow：WebSocket opcodes
    - light-red：Errors

分析：

摄像机 ico，捕获屏幕截图
- 此处截图：像幻灯片一样播放
- Performance 里的截图：精准的时间维度
Overview 概况
- 两条线：DOMContentLoaded、Load
请求活动细分：Waterfall、Timing
排序
- 默认 initiation time
- column 单击
- activity phase, 表头-右键，WaterFall
  - Start Time 按请求的启动时机
  - Response Time 开始下载的顺序
  - End Time 最先完成的请求
  - Total Duration 最短的 connection setup + request / response 时间
  - Latency 等待响应的第一帧

其它：

请求表，右键，copy

Jan 10 '19 06:01 anjia

blog
blog copied to clipboard

Chrome DevTools 的使用

目录

1. Elements + Console + Debugger

DOM

CSS

Debugger

console 输出

设置断点

3. Console 的补充

4. DevTools 的相关

5. Network 面板的使用

blog blog copied to clipboard

Chrome DevTools 的使用

目录

1. Elements + Console + Debugger

DOM

CSS

Debugger

console 输出

设置断点

3. Console 的补充

4. DevTools 的相关

5. Network 面板的使用

blog
blog copied to clipboard