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 drawersearch (搜索网站资源 （soucre面板里的）)// 其他几个面板的search element、network// filter console、networkrun command // 一些内置命令，比如 capture fullsize screenshot（整个页面截图）， capture node screenshot(先在elements面板选中一个节点，然后再运行这个命令，可以截图选中的节点)// elements面板选中一个节点，按鼠标右键，也有一个capture node screenshot，这个更方便// 截图要注意有滚动条的情况，下次讲elements面板的时候讲