前端谷歌浏览器调试

【浏览器调试工具精讲】Chrome Dev Tools精讲,前端必看!

在这里插入图片描述

命令菜单

主题切换

Command shift P 输入主题关键字:可以切主题
在这里插入图片描述

截屏

screen shot 部分截屏
full size screenshot 全截屏(包含滚动条下的内容)
node screen shot截取node
在这里插入图片描述
node screen shot截取node: 1选择元素, 2node screen shot进行截取
在这里插入图片描述

窗口停放位置

依次为:底部、左侧、独立窗口、
在这里插入图片描述

常用Tab

element

检查元素: 选中元素,右键检查
在这里插入图片描述
把鼠标放在element上的网盘元素上,左侧页面出现两种颜色:蓝色是本我的大小,橘色是magin。可以尝试element的其他元素,如更多会出现绿色padding

在这里插入图片描述
查找DOM元素,
快捷键:command + F
查询方式: 文本查询、css选择器、Xpath
文本查询
输入关键词即可
css选择器
查找session, : session
查找ID为head的div: div#head
在这里插入图片描述

Xpath
//div/div/a 意思://不指定某个元素,即在全局内查找。A/B指定在元素A下查找元素B
整体意思:

在这里插入图片描述

查找ID

在这里插入图片描述

在这里插入图片描述

修改样式、样式文件定位

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

样式的来源如继承、自定义等

user agent 浏览器内置的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

让某个状态常驻如鼠标悬停

在这里插入图片描述

全局、部分样式的的选择与取消

全局样式的选择与取消
在这里插入图片描述

部分样式的选择与取消
在这里插入图片描述

复制样式

在这里插入图片描述

某个样式属性的选择 compted

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

console

在这里插入图片描述
$_返回上一条语句执行结果
在这里插入图片描述
选中新闻
在这里插入图片描述
在这里插入图片描述
$0上一个 $1上上一个, $2上上上一个,以此类推

错误级别

在这里插入图片描述
在这里插入图片描述

组group

shift + 回车
在这里插入图片描述

time计时

在这里插入图片描述
在这里插入图片描述
打开menu输入enable code folding可以折叠代码
watch检测变量
在这里插入图片描述

subtree modifactons 该节点为根结点,它下面的子节点被修改了,js会暂停
attribute modifications. 该节点的属性被修改 js被暂停
node remove 该节点被删除 js 会暂停
在这里插入图片描述
在这里插入图片描述

source

network

在这里插入图片描述

在这里插入图片描述
关闭缓存:点击 Network 标签页,勾选下方的 “Disable cache” 即可。勾选之后浏览器则会禁用网络请求的缓存,每次都请求服务器。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Application

通过console设置cookie和session

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值