chrome开发者工具|chrome开发者工具 - 00 概述 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’

【chrome开发者工具|chrome开发者工具 - 00 概述】检查元素

文章图片

切换设备（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面板的时候讲