命令
- mac
command + shift + p
- window
ctrl + shift + p
截图 DOM 元素
- 截图某个 DOM 元素
-
打开控制台， 在 Element 选中需要 "截图" 的 DOM 元素，然后使用上面命令 ，选择 Capture node screenshot ，具体操作如下
select.png
image.png
image.png
- 可以截图当前网页，保存一张长图
-
还是先打开控制台，操作命令，选择Capture full size screenshot 会自动下载一张网页的长图
image.png
使用控制台，操作上一次的返回结果
- 使用
_ 可以直接拿到上一次的结果
function test() { return 'HelloWorld' }
test()
"HelloWorld"
$_
"HelloWorld"
重新发起某个XHR请求
- 当我们在 network 调试的时候，有事需要从新对某个请求重新获取一遍，这是不需要刷新全部，只需在触发一个请求即可
- 在 network 选择某个 XHR 请求，右键 选择 Replay XHR
编辑网页面上的内容
- 在控制台输入
document.body.contentEditable = "true"或者document.designMode = ‘on’即可 -
例如： 我把简书上文章 的 “章” 删掉
image.png
network 使用幻灯片模式
- 点击 network ，点击右上角设置，选择 capture screenshots， 然后 刷新页面。
-
设置
set -
效果
image.png
调整 css 属性值
- 每次写页面时，在浏览器调试 css 间距大小，我都是使用 上下 箭头 进行数字的 加减，但有时遇到小数或者较大数字，都要手动修改，其实这也有快捷方式的：
- 每次加减 0.1
option + ↑ or option + ↓ （mac）
alt + ↑ or option + ↓ (window)
- 每次加减 1 直接使用
↑ 或 ↓ - 每次加减 10 使用
shift + 上 或 shift + 下 - 每次加减 100
command + 上 或 下 (mac)
ctrl + 上 或 下 (window)
自定义 devtools 颜色
- 一般我们都是使用默认的 黑色 或者 白色
- 有种插件可以让我们选择更多的颜色
- 打开 devtools
-
打开设置，选择
image.png - 在 Chrome 商店 安装 aterial DevTools Theme Collection 即可
自定义代码片段
-
在 source 下 选择 snippets 添加代码片段
image.png
