blog DevTools

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 均可保存
修改均是一次性的，刷新页面后就丢失

编辑 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

Dec 19 '18 15:12 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 规则：选择器+声明块

1 css syntax - declaration 2 css syntax - declarations block 3 css syntax - ruleset

Dec 21 '18 13:12 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 里的上下箭头

Dec 22 '18 08:12 anjia

Console API

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

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

格式说明符

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

所以，可以这么玩~

DOM 元素 -> JS 对象的格式
- 常规，DOM 元素是以 HTML 的形式输出到 console 中的
- 那么，以 JS 对象的形式输出
  - console.dir(document.body) 用快捷方式
  - console.log('%O', document.body) 用格式说明符%O
自定义控制台样式
- 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

Dec 22 '18 08:12 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

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

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

Dec 22 '18 09:12 anjia

调试 JS

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

设置断点的几种方法：

代码行断点。Sources 面板
- 效果等同于 debugger;
条件行代码断点。
- 右键，Edit breakpoint
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 时
XHR：Sources 页签，XHR Breakpoints
- 当 XHR URL 包含字符串 pattern 时
- eg.当发现页面里有一个 incorrect URL 时，想快速定位是谁发送的
事件监听器：Sources / Event Listener Breakpoints
- eg. Mouse / click 选中，则设置断点
异常：Sources / Pause on exceptions
- 在抛出 caught / uncaught exception （捕获/未捕获的异常）
  - 未捕获的：点击按钮，变蓝色-启用
  - 捕获的异常：勾选
- 适用场景：当怀疑是未捕获的异常引发了问题，但不知道异常在哪里时
函数：当指定函数被调用时
- 在控制台输入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

Dec 22 '18 15:12 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 的四种方式：

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

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

cmd+shift+p
ctrl+shift+p

选择元素的四种方式：

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

查看 CSS

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

Color Picker 拾色器

点击预览的小色块，即可打开
UI上的每个元素
- Shades
- Eyedropper 滴管/吸管
- Copy To Clipboard 取决于4里的值
- 颜色值，RGBA, HSLA, Hex
- Color Palette，调色板
- Hue 色调, 色彩, 颜色
- Opacity 不透明度
- Display Value Switcher
- Color Palette Switcher
颜色的
- 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。重新触发，执行下
- 刷新就都没了，除非用了工作区映射到本地

Dec 23 '18 04:12 anjia

Network 面板

最常用的设置
- 禁用缓存，模拟用户首次查看页面
- 节流，选不同的网络环境
- 保留log，跨页面加载保存请求
其它
- 捕获屏幕截图，摄像机 ico
  - 单击，查看在截图时间之前发生的请求
  - 双击，放大图片，可预览。左右方向键可以翻页
- 网络概况，Overview。两条线
  - DOMContentLoaded
  - Load
- Waterfall，可 hover
常见的网络问题
- 单个域上同时发送的请求太多
  - HTTP 1.0/1.1 则域分片
  - HTTP2 则域不分片
  - 关键请求提前下载
- TTFB 慢
- 内容下载慢
其它
- 重播 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

Dec 23 '18 11:12 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

Dec 23 '18 11:12 anjia

blog
blog copied to clipboard

DevTools

目录

Elements 面板

DOM 和 CSS

编辑 DOM

编辑 Styles

Console 面板

Console API

格式说明符

Console Utilities API

调试 JS

DevTools

查看 CSS

Color Picker 拾色器

其它

Network 面板

Requests Table

Storage 和 Resources

blog blog copied to clipboard

DevTools

目录

Elements 面板

DOM 和 CSS

编辑 DOM

编辑 Styles

Console 面板

Console API

格式说明符

Console Utilities API

调试 JS

DevTools

查看 CSS

Color Picker 拾色器

其它

Network 面板

Requests Table

Storage 和 Resources

blog
blog copied to clipboard