乐趣区

关于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 面板的时候讲

退出移动版