DevTools

[anjia]

目录

1. Elements 面板
   • DOM 和 CSS：查看、实时编辑
2. Console 面板
   • Console API
   • Console Utilities API / Command Line API
   • 调试 JS
3. DevTools
   • 打开方式, UI设置
   • CSS, Color Picker
4. Network 面板
5. Storage 和 Resources

---

https://developers.google.com/web/tools/chrome-devtools/

[anjia]

Elements 面板

Inspect（检查）、实时编辑：HTML 和 CSS

DOM 和 CSS

内容：

• DOM：查看+更改，在 Elements 面板里
  • 源码，HTML
  • DOM 树
  • Render 树
• CSS：查看+更改
  • Styles 窗格：查
  • Computed 窗格：盒模型
• 查看本地修改
  • Sources 面板

说明：

• Styles 里样式级别
  • 内联的
  • 元素自定义的
  • 继承的：灰色的，不可编辑（父、UA）
• Styles 的外链内容
  • 点击外链，到 sources 面板。可在这里实时修改
  • 查看实时编辑的历史：点击右键，选择 Local modifications
    • 粉色背景，移除的
    • 绿色背景，添加的
  • {} 格式化
• Styles 撤销修改
  • 若临时的，重刷页面，即可
  • 若永久的
    • Elements 面板下：cmd+z
    • Sources 面板下：revert
• Computed 盒模型，也能修改
  • width,height, padding, border, margin
  • position 矩形框: top right bottom left
    • 当 position 不是 static 时：fixed 和 absolute
    • 不过，无法保证这些更改能够生效，因为这要取决于具体的元素定位详情

其它：

• 按 Tab/Enter 均可保存
• 修改均是一次性的，刷新页面后就丢失

相关：

• 使用 DevTools 的工作区设置持久化
  • 会将更改实时同步到磁盘中
  • 可自动保存：
    • Elements 面板下的 style 更改
    • 外部 CSS 文件中定义的样式
    • Sources 面板中的更改
      • 内嵌样式，这里修改的，可保留
  • 不能保留的
    • Elements 面板下的 DOM 更改不会保存
    • 对 element.style 或内嵌样式的更改

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

[anjia]

编辑 DOM

无法改到源文件，重刷页面会消失

• 查看元素
  • 页面，右键，Inspect
  • 快捷键
  • Inspect Element 模式，可以箭头吸元素
  • 用脚本吸元素
    • eg.inspect(document.getElementsByClassName('mine')[0])
    • eg.inspect(document.body)
• 导航
  • 鼠标
  • 键盘：上下箭头-上下，左右箭头-展开收起
  • 面包屑导航：Elements 底部
• 编辑：名称、属性
  • 双击：节点名称、属性
  • 选中节点，按 Enter 选中第一个，再 Tab 依次切换
  • 菜单：右键/最左边的 ...
    • Add Attribute, Edit Attribute
    • Edit as HTML
      • 保存：Enter
      • 不保存-退出编辑器：Esc
• 移动：点击，拖拽
• 删除
  • 右键：delete Node
  • 选择节点，直接 Delete 键
• 滚动到视图
  • 当选中到某个元素，但是它在视口之外时
  • 提示元素位置：下方，上方。iScroll 的也可以
• DOM Breakpoints：断点设置/管理
  • 设置DOM断点
    • 子树修改：添加、移除或移动子元素
    • 属性修改：动态更改元素的属性 (class, id, name)
    • 节点移除：从 DOM 中移除有问题的节点
  • 与之交互
    • 操作：hover、点击、启用/停用
    • Elements 和 Sources 面板均有
• Event Listeners：与 DOM 节点关联的 JavaScript 事件侦听器
  • addEventListener：passive, once, useCapture
  • handler: 右键 Show Function Definition
  • 设置
    • 查看祖先/只看自己
    • 查看框架侦听器

Event Listeners：建议隐身模式下打开，因为扩展也会将自己的事件添加到 DOM 上

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom

[anjia]

编辑 Styles

最基础的：

• 优先级：从高到低
  • 内联样式 / 在 DevTools 里设置
  • 与元素匹配的所有 CSS 规则
  • 继承来的
• 级联+继承：可查看 W3C 的相关标准
  • Cascade：级联 -> CSS 声明的权重 -> 优先级
  • Inherit
• 其它
  • 分块、标题、来源；高亮、灰色、被删除的
  • 鼠标 hover 在选择器上，可看受影响的所有元素
    • 仅突出显示视口中的元素

挺好玩的：

• 类：特别方便的添加、启用和停用
  • .cls 点它，查看与当前选定元素关联的所有 CSS 类
• 当属性值是数字式值时, 增减量
  • 1     向上/下键
  • 0.1   Alt+向上/下键
  • 10   Shift+向上/下键
  • 100 Shift+Function+向上/下键
    • Shift+向上/下键，Windows,Linux
• 颜色相关：
  • 随便找个定义颜色的 CSS 声明，点击左侧小方块 -> Color Picker
  • 与 Color Picker 的交互
    • 取色器
    • 调色板
      • Page Colors
      • Material Design：一组符合 Material Design 规范的颜色
      • Custom 可以自定义，且一直保留

新增系列：

• 新增颜色+阴影：非常便捷了
  • 三个点，hover，点击
  • 可快捷添加：background-color, color, box-shadow, text-shadow
• 新增声明
  • 点击规则中的任何空白处，即可创建一个新声明
  • 键入/直接粘贴 CSS
• 新增样式规则
  • New Style Rule：当复杂的类时，可以点击它，就不用敲了
• 添加和移除伪类
  • :hov / 右键菜单

其它：

• CSS 变量的颜色值
• 编辑 Sass/Less/Stylus：CSS 源映射

---

粒度从小到大：

• 属性
• 属性值
• 声明：属性+属性值
• 声明块：{声明1; 声明2; 声明3;}
• 选择器
• CSS 规则：选择器+声明块

[anjia]

Console 面板

用途：

• 显示页面的诊断信息，eg.报错，来自JS/浏览器
• 运行JS，eg.查看+更改DOM，实验场所

界面：

• 历史记录
  • 清除
    • 右键
    • clear() 控制台输入
    • console.clear() 代码里执行
    • Ctrl+L
  • 保留：Preserve
  • 保存：右键，Save as
• 执行上下文
  • top 页面的顶部框架
  • iframe 的 name
• 过滤控制台输出
  • 严重性等级
    • All
    • Errors console.error()
    • Warnings console.warn()
    • Info console.info()
    • Logs console.log()
    • Debug console.timeEnd() console.debug()
  • 正则
  • 隐藏网格消息
• 设置项
  • 点击齿轮
  • 三个点，Preferences / Console

其它：

• Filter
• Elements 和 Console 同时打开，esc
• Console 里的上下箭头

[anjia]

Console API

向控制台打印消息，控制台日志

1. 最基本的
   • console.log()
     • 单个'%s'
     • 单个 +
     • 多个参数-以,分隔 则会在同行输出-以空格
   • console.info()
   • console.warn()
   • console.error()
2. 更多格式，方便看
   • console.group()和console.groupEnd()
     • eg.单个函数
     • eg.亦可嵌套
   • console.groupCollapsed()和console.groupEnd() 自动折叠
   • console.count(msg)和console.countReset()
   • console.trace() 调用此方法的堆栈信息
3. 更快捷的
   • console.time(sameName)和console.timeEnd(sameName) 快速计时，亚ms
   • console.assert(expression, object) 省了 if-else，仅当条件是false时，显示错误信息
4. 输出特定对象的
   • console.dir() 输出 JS 表示形式
   • console.dirxml() 输出XML表示 || JS表示
5. 其它
   • 录制回话
     • console.profile()和console.profileEnd()
     • console.timeStamp() 录制会话期间，插入一个
   • console.clear()
     • 当启用 Preserve log 时，它将被停用
     • 但是其它清空方式依然有效。eg.按钮、快捷键 ctrl+L

格式说明符

• %s 字符串
• %d/%i 整型
• %f 浮点值
• %o 可扩展 DOM 元素，同在 Elements 面板中显示的
• %O 可扩展 JavaScript 对象
• %c 用CSS设置控制台样式

所以，可以这么玩~

1. DOM 元素 -> JS 对象的格式
   • 常规，DOM 元素是以 HTML 的形式输出到 console 中的
   • 那么，以 JS 对象的形式输出
     • console.dir(document.body) 用快捷方式
     • console.log('%O', document.body) 用格式说明符%O
2. 自定义控制台样式
   • console.log('%cHello World', 'color:green; font-weight:bold;') 用CSS格式说明符%c

---

https://developers.google.com/web/tools/chrome-devtools/console/console-reference https://developers.google.com/web/tools/chrome-devtools/console/console-write

[anjia]

Console Utilities API

便捷函数

• $_ 最近一次的表达式的值
• $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
• 挺有意思的
  • monitor(function)和unmonitor(function)
  • monitorEvents(object, event) 监视特定事件
  • table() 在控制台中显示表格
  • inspect()
    • DOM 元素 -> Elements 面板
    • JS 对象 -> Profiles 面板
    • 函数 -> Source 面板
  • profile([name])和profileEnd([name])
  • keys()和values()
• 其它
  • dir() ~ console.dir()
  • dirxml() ~ console.dirxml()
  • clear()

另外，复制一段 HTML

1. 右键，Edit as HTML，复制
2. 右键，Copy - Copy Element
3. 选中，在 console 面板，copy($0)

https://developers.google.com/web/tools/chrome-devtools/console/utilities

[anjia]

调试 JS

设置断点，暂停正在执行的代码

设置断点的几种方法：

1. 代码行断点。Sources 面板
   • 效果等同于 debugger;
2. 条件行代码断点。
   • 右键，Edit breakpoint
3. DOM：更改/删除特定DOM节点或其子节点时
   • Subtree Modifications（子树修改）：当前选中节点的
     • child 被 removed/added 时
     • child 的 contents 被 changed 时
     • 注意：
       • child 的 attribute changes / 当前选中节点的 changes 都不会触发
   • Attribute Modifications（属性修改）：当前选中节点的
     • attribute 被 added/removed 时
     • attribute 的 value 有 changes 时
   • Node Removal（节点删除）：当前选中节点，被 removed 时
4. XHR：Sources 页签，XHR Breakpoints
   • 当 XHR URL 包含字符串 pattern 时
   • eg.当发现页面里有一个 incorrect URL 时，想快速定位是谁发送的
5. 事件监听器：Sources / Event Listener Breakpoints
   • eg. Mouse / click 选中，则设置断点
6. 异常：Sources / Pause on exceptions
   • 在抛出 caught / uncaught exception （捕获/未捕获的异常）
     • 未捕获的：点击按钮，变蓝色-启用
     • 捕获的异常：勾选
   • 适用场景：当怀疑是未捕获的异常引发了问题，但不知道异常在哪里时
7. 函数：当指定函数被调用时
   • 在控制台输入debug(functionName)
   • 常常作为辅助手段，因为需要保证functionName在作用域内

调试小操作：

• resume 恢复，重新开始。到下一个断点
• step over 执行这行，但不进入函数
• step into 一次一行，单步调试
• step out of
• step

调试过程中，才会显示的：

• Scope：定义的属性，有 local, closure, global
• Call Stack：将代码带到该断点的执行路径
  • 启用 Async：异步调用堆栈
    • 会显示第三方库调用、onClick 调用
    • 可提高完整的异步函数调用堆栈的可视性
• Blackbox Script
  • 将第三方代码设置为黑箱，可以忽略来自调用堆栈的第三方文件

JS Debugging

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

https://developers.google.com/web/tools/chrome-devtools/javascript

[anjia]

DevTools

Chrome DevTools, a set of web developer tools

open Elements panel to inspect the DOM or CSS Get Started with HTML and the DOM

打开 DevTools 的四种方式：

1. right-click 元素，然后选中 Inspect
2. 快捷键
   • cmd+option+I 打开上次开的面板 就够了
   • cmd+option+C 打开 Elements
   • cmd+option+J 打开 Console
   • 其它
     • Control+Shift (Windows,Linux,Chrome OS)
3. 浏览器菜单三个点，更多工具 - 开发者工具
4. 从命令行打开

命令菜单，支持模糊搜索：

• cmd+shift+p
• ctrl+shift+p

选择元素的四种方式：

1. 视口中，右键，选择“检查”
2. Elements，选中吸取模式，单击视口中的元素
3. Elements，单击 DOM 树中的元素
4. Console，用API查询document.querySelector('p')，然后右键单击结果，在元素中显示

查看 CSS

1. Styles 里，显示适用于元素的所有规则。包括已被覆盖的声明
2. Computed 里，可以过滤，只看实际应用到元素的 CSS
   • 继承的，灰色显示
3. Filter，可搜索特定的属性/值，很好用
4. 以打印模式查看页面
   • 命令菜单 > Drawer Showing Rendering
   • 两种媒体查询：print + screen styles
5. Coverage 选项卡：查看已使用/未使用的 CSS
   • 命令菜单 > Drawer Show Coverage
   • 浏览器加载的每个文件使用的 CSS 情况：绿色-使用，红色-未使用
     • 单击，Sources 面板可看每行
6. 添加样式表规则
   • 还可以选择文件~，单击+按住
   • 到特定位置
7. hover到规则上，更多操作，很方便

Color Picker 拾色器

1. 点击预览的小色块，即可打开
2. UI上的每个元素
   • Shades
   • Eyedropper 滴管/吸管
   • Copy To Clipboard 取决于4里的值
   • 颜色值，RGBA, HSLA, Hex
   • Color Palette，调色板
   • Hue 色调, 色彩, 颜色
   • Opacity 不透明度
   • Display Value Switcher
   • Color Palette Switcher
3. 颜色的
   • Hue 色相
   • Saturation 饱和度
   • lightness/Brightness 亮度/明度
   • Shade 色度（颜色/色彩等的渐变）
   • Tone 色调
   • Tint 色彩

其它

DevTools 的 UI

• 可设置：开发者工具的 Main Menu, 最右侧竖着的三个点
• 面板的选项卡，可拖动排序
• DevTools 的位置
• 主题：Dark/Light
• 开启实验功能：chrome://flags/#enable-devtools-experiments
  • 更改后，立即重启

chrome://chrome-urls

Sources Panel

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

[anjia]

Network 面板

1. 最常用的设置
   • 禁用缓存，模拟用户首次查看页面
   • 节流，选不同的网络环境
   • 保留log，跨页面加载保存请求
2. 其它
   • 捕获屏幕截图，摄像机 ico
     • 单击，查看在截图时间之前发生的请求
     • 双击，放大图片，可预览。左右方向键可以翻页
   • 网络概况，Overview。两条线
     • DOMContentLoaded
     • Load
   • Waterfall，可 hover
3. 常见的网络问题
   • 单个域上同时发送的请求太多
     • HTTP 1.0/1.1 则域分片
     • HTTP2 则域不分片
     • 关键请求提前下载
   • TTFB 慢
   • 内容下载慢
4. 其它
   • 重播 XHR 请求
   • 右键，清除浏览器 Cache/Cookies
   • Filter Request
     • Data URLs
       • 内嵌在 documents 中的 files

Requests Table

可查看更多信息：

• 表格的列
  • Type：request resource 的 MIME type
  • Initiator（启动程序，发起人）：以下 objects/process 可以 initiate requests
    • Parser：Chrome 的 HTML parser
    • Redirect：HTTP redirect
    • Script：一个 JavaScript function
    • Other：process/action, 比如通过link导航到一个页面的、在地址栏输入url的
  • Size：response headers + response body，由 Server 给的
  • Waterfall：每个 request activity 的 visual breakdown（视觉细分）
• 操作
  • 显示列：增加、删除
  • 单击，右侧会显示 Header, Preview, Response, Timing
    • 当有 Cookie 时，也会显示。HTTP Request Header 里
  • Hover
• 排序
  • 默认 initiation time
  • column 单击
  • activity phase, 表头-右键，WaterFall
    • Start Time 按请求的启动时机
    • Response Time 开始下载的顺序
    • End Time 最先完成的请求
    • Total Duration 最短的 connection setup + request / response 时间
    • Latency 等待响应的第一帧
• 查看 resource 的 uncompressed size：浏览器解压之后的资源大小
  • Use Small Request Rows
  • Use Large Request Rows
  • 压缩过的，未压缩的
    • content 是资源的实际大小（客户端会解压-Content）
    • size 传输时的大小（服务器会对资源进行压缩处理-Size）
    • Size vs Content 理解举例
      • 如果是从 Cache 来的，size 可能是 0
      • 如果 Response headers 包括 cookies，那 size 可能大于 content
      • Redirects 或者 authentication requests
      • gzip compression，那么通常 size < content
• 其它
  • 查看 request 的 stack trace
    • hover 到 Initiator 列
  • 导出 request data
  • 将 requests 复制到剪切板

查看 WebSocket Connection：

• 点击它的 Name，右侧会出现 Frames 页签
  • 会显示最新的 100 frames
  • 要刷新，再点击下 Name
  • 三列数据
    • Data: message payload（有效负载）
      • 若是 plain text，则会直接显示文本
      • 若是 binary opcodes, 则会显示 opcode 的 name 和 code
      • 支持这五种 opcodes（操作码）
        • Continuation Frame
        • Binary Frame
        • Connection Close Frame
        • Ping Frame
        • Pong Frame.
    • Length
    • Time：received/sent 的 time
• 不同的消息 type 会有不同的颜色
  • light-green：传出去的消息（Outgoing text messages）
  • white：传入的消息（Incoming text messages）
  • light-yellow：WebSocket opcodes
  • light-red：Errors

[anjia]

Storage 和 Resources

• Local Storage: 键值对
• Session Storage
• Cookies
  • 左侧：按 origin 列出
  • 右侧表格
    • key, value, size
    • domain, path
    • expires/max-age：Cookie 的过期时间/最长寿命
      • 若是 Session Cookie，该字段始终为 Session
    • HTTP：若有对勾，则说明仅在 HTTP 上使用 Cookie，且不允许 JS 修改
    • Secure：若有对勾，说明此 Cookie 的通信必须通过加密才能传输

查看站点的资源情况

• 哪些域名的：Sources 面板
• 类别：Application/Frames，有 Images,Scripts,主文档

其它

• Security 面板，确保在网站上恰当的实现 HTTPs

cookie, localStorage, sessionStorage #43