likes
comments
collection
share

chrome开发者工具 - 00 概述

作者站长头像
站长
· 阅读数 42

录了段讲解视频,放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)

chrome开发者工具 - 00  概述

面板常用的有element(左边dom,右边样式),console(一般用下面那个drawer),source(打断点),network,application(本地存储,localstorage、 sessionstorage、cookie)

打开/关闭console drawer

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

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

切换设备(pc和移动端)(移动端:responsive、custom)chrome开发者工具 - 00  概述

切换语言:设置 -> language,或者:设置 ->restore defaults and reload(恢复默认值并重新加载)(会把所有的设置项都重置)禁用javascript:设置 -> disable javascript

更多:chrome开发者工具 - 00  概述位置、hide/show console drawersearch (搜索网站资源 (soucre面板里的))// 其他几个面板的search element、network// filter console、networkrun command // 一些内置命令,比如 capture fullsize screenshot(整个页面截图), capture node screenshot(先在elements面板选中一个节点,然后再运行这个命令,可以截图选中的节点)// elements面板选中一个节点,按鼠标右键,也有一个capture node screenshot,这个更方便// 截图要注意有滚动条的情况,下次讲elements面板的时候讲

转载自:https://segmentfault.com/a/1190000041232430
评论
请登录