关于chrome-devtools:chrome开发者工具-00-概述

录了段解说视频，放 b 站了
https://www.bilibili.com/vide…

1，打开方式

• F12
• ctrl shift i（command option i）
• 鼠标右键 -> 查看（inspect）
• 右上角更多按钮（三个点）-> 更多工具 -> 开发者工具

2，放大放大

• ctrl 鼠标滚轮
• ctrl +/-，
  重置 ctrl 0,

mac Command +/-，重置 command 0

3, 面板 (panel)

面板罕用的有 element(右边 dom, 左边款式)，console（个别用上面那个 drawer），source（打断点），network，application(本地存储，localstorage、sessionstorage、cookie)

关上 / 敞开 console drawer

• esc
• 右上角的更多按钮（三个点）里的 ’open console drawer’/‘hide console drawer’

查看元素

切换设施（pc 和挪动端）（挪动端：responsive、custom）

切换语言：设置 -> language，
或者：设置 ->restore defaults and reload（复原默认值并从新加载）（会把所有的设置项都重置）
禁用 javascript：设置 -> disable javascript

更多：

地位、
hide/show console drawer
search (搜寻网站资源（soucre 面板里的）)
// 其余几个面板的 search element、network
// filter console、network
run command
// 一些内置命令，比方 capture fullsize screenshot（整个页面截图），capture node screenshot(先在 elements 面板选中一个节点，而后再运行这个命令，能够截图选中的节点)
// elements 面板选中一个节点，按鼠标右键，也有一个 capture node screenshot，这个更不便
// 截图要留神有滚动条的状况，下次讲 elements 面板的时候讲